Free Newsletter Signup Form Template — HTML Code for Email Lists

Building an engaged email list is one of the most valuable assets for any business or creator. A well-designed newsletter signup form makes it easy for visitors to subscribe to your content. This guide provides three different HTML newsletter signup templates — from minimal one-field signups to more comprehensive forms with preference options. Deploy any of these using FormBackend to manage subscriber data.

Here’s a full-featured newsletter signup form with name field and topic preferences:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newsletter Signup</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            padding: 50px;
            max-width: 500px;
            width: 100%;
        }

        h1 {
            font-size: 32px;
            color: #1a202c;
            margin-bottom: 12px;
        }

        .subtitle {
            font-size: 16px;
            color: #718096;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #2d3748;
        }

        .required::after {
            content: " *";
            color: #e53e3e;
        }

        input[type="email"],
        input[type="text"] {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 14px;
            font-family: inherit;
            transition: all 0.3s ease;
            background: #fff;
        }

        input[type="email"]:focus,
        input[type="text"]:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
        }

        .checkbox-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin-right: 10px;
            cursor: pointer;
            accent-color: #667eea;
        }

        .checkbox-item label {
            cursor: pointer;
            font-weight: normal;
            font-size: 14px;
            color: #4a5568;
            margin: 0;
        }

        .preferences-note {
            font-size: 12px;
            color: #a0aec0;
            margin-bottom: 12px;
        }

        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 25px;
        }

        button {
            flex: 1;
            padding: 14px 20px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        button:hover {
            background: #5568d3;
        }

        button:active {
            transform: scale(0.98);
        }

        button.secondary {
            background: #e2e8f0;
            color: #2d3748;
        }

        button.secondary:hover {
            background: #cbd5e0;
        }

        @media (max-width: 480px) {
            .container {
                padding: 25px;
            }

            h1 {
                font-size: 26px;
            }

            .button-group {
                flex-direction: column;
            }

            button,
            button.secondary {
                width: 100%;
            }
        }

        .success-message {
            display: none;
            background: #c6f6d5;
            color: #22543d;
            padding: 14px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
            border-left: 4px solid #22543d;
        }

        .error-message {
            display: none;
            background: #fed7d7;
            color: #742a2a;
            padding: 14px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
            border-left: 4px solid #742a2a;
        }

        .trust-badges {
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px solid #e2e8f0;
            font-size: 12px;
            color: #a0aec0;
            text-align: center;
        }

        .trust-badges svg {
            width: 16px;
            height: 16px;
            display: inline-block;
            margin-right: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Subscribe to Our Newsletter</h1>
        <p class="subtitle">Get the latest updates delivered directly to your inbox. No spam, unsubscribe anytime.</p>

        <div class="success-message" id="successMessage">
            Welcome! Check your email to confirm your subscription.
        </div>

        <div class="error-message" id="errorMessage">
            There was an issue subscribing. Please try again.
        </div>

        <form id="newsletterForm" action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <div class="form-group">
                <label for="email" class="required">Email Address</label>
                <input type="email" id="email" name="email" placeholder="you@example.com" required>
            </div>

            <div class="form-group">
                <label for="firstName">First Name <span class="optional">(Optional)</span></label>
                <input type="text" id="firstName" name="firstName" placeholder="John">
            </div>

            <div class="form-group">
                <label>Topics You're Interested In <span class="optional">(Optional)</span></label>
                <p class="preferences-note">Select what content you'd like to receive:</p>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="updates" name="interests" value="Product Updates">
                        <label for="updates">Product Updates & New Features</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="blog" name="interests" value="Blog Posts">
                        <label for="blog">Blog Posts & Articles</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="tips" name="interests" value="Tips & Tutorials">
                        <label for="tips">Tips, Tricks & Tutorials</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="news" name="interests" value="Company News">
                        <label for="news">Company News & Announcements</label>
                    </div>
                </div>
            </div>

            <div class="button-group">
                <button type="submit">Subscribe</button>
            </div>

            <div class="trust-badges">
                We respect your privacy. Unsubscribe at any time.
            </div>
        </form>
    </div>

    <script>
        const form = document.getElementById('newsletterForm');
        const successMessage = document.getElementById('successMessage');
        const errorMessage = document.getElementById('errorMessage');

        form.addEventListener('submit', function(e) {
            successMessage.style.display = 'none';
            errorMessage.style.display = 'none';

            const email = document.getElementById('email').value.trim();

            if (!email) {
                errorMessage.textContent = 'Please enter your email address.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }

            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                errorMessage.textContent = 'Please enter a valid email address.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }
        });
    </script>
</body>
</html>

Get your signup form collecting subscribers in three simple steps:

Step 1: Copy the Code

Copy the complete HTML code above and save it as newsletter.html. You can then embed it on your website or use it as a standalone landing page.

Step 2: Create a FormBackend Account

Sign up for a free FormBackend account to receive and manage newsletter signups. FormBackend provides an organized dashboard where you can view all subscriber emails and preferences.

Step 3: Replace the Form ID

Find YOUR_FORM_ID and replace it with your actual FormBackend form ID from the dashboard. The completed action URL will be: https://www.formbackend.com/f/abc123xyz

Your newsletter signup form is now live! Share it with your audience.

Different situations call for different signup approaches. Here are three variations:

Perfect for header/footer placement:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST" style="display: flex; gap: 8px;">
    <input type="email" name="email" placeholder="Enter your email" required style="flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
    <button type="submit" style="padding: 10px 20px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer;">Subscribe</button>
</form>

Friendly and personal:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <h3>Join Our Newsletter</h3>
    <p>Get the latest updates sent to your inbox.</p>

    <input type="text" name="firstName" placeholder="First Name" required style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px;">
    <input type="email" name="email" placeholder="Email Address" required style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px;">

    <button type="submit" style="width: 100%; padding: 12px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">Sign Me Up</button>
</form>

Let subscribers choose how often they hear from you:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="email" name="email" placeholder="Your email" required style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px;">

    <label>How often would you like to hear from us?</label>
    <select name="frequency" style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px;">
        <option value="Daily">Daily</option>
        <option value="Weekly" selected>Weekly</option>
        <option value="Monthly">Monthly</option>
    </select>

    <button type="submit" style="width: 100%; padding: 12px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer;">Subscribe</button>
</form>

Make this template your own:

Change the headline: Update “Subscribe to Our Newsletter” to something specific to your brand.

Adjust color scheme: The form uses purple (#667eea). Change this throughout the CSS to match your brand colors.

Modify topic options: Edit the checkbox labels to match the content categories you actually publish.

Add or remove fields: You can remove the name field entirely for even faster signups, or add company name, location, or other preferences.

Customize the description: Update “Get the latest updates delivered directly to your inbox” to explain the value of your newsletter.

Change button text: “Subscribe” can be “Sign Up,” “Join,” or any other wording you prefer.

Add a logo: Insert your company logo at the top of the form using an <img> tag.

Integrating with Email Services

FormBackend works well with popular email marketing platforms:

Email forwarding: Configure FormBackend to automatically forward new signups to your email address.

API integrations: Use FormBackend’s webhooks to automatically add new subscribers to your email service: - Mailchimp: Set up a webhook to POST new subscribers to Mailchimp’s API - ConvertKit: Create a webhook integration using ConvertKit’s subscriber endpoint - ActiveCampaign, HubSpot, GetResponse: All support webhook integrations

CSV exports: Download all subscribers as CSV and import them into your email platform manually.

For detailed instructions on connecting FormBackend to specific email services, check the webhooks documentation.

Keep it simple: More fields mean fewer conversions. Ask only for email (required) and optionally first name.

Mobile friendly: This template is responsive and works great on phones where most email opens happen.

Set expectations: Tell people what they’re subscribing to and how often they’ll hear from you.

Privacy assurance: Include a statement about not sharing their email or selling their data.

Easy unsubscribe: Include an unsubscribe link in every email to comply with laws like CAN-SPAM and GDPR.

Confirm subscriptions: Consider double opt-in (confirmation email) to verify subscribers want to receive your content.

Frequently Asked Questions

Is this newsletter form template really free? Yes, the template is completely free. The only cost is FormBackend’s service for processing signups, which has a generous free tier.

How do I connect this to Mailchimp or other email services? FormBackend supports webhook integrations. You can configure a webhook to automatically add new subscribers to your Mailchimp audience. See the webhooks integration guide for step-by-step instructions for various email platforms.

Can I add a double opt-in confirmation? FormBackend can send an automated confirmation email to subscribers. You can configure this in your FormBackend settings, and subscribers must click a link to confirm before being added to your list (helps with GDPR compliance).

Does this comply with GDPR? This template doesn’t include all GDPR requirements by default. You should add: - A checkbox for consent to receive emails - A privacy policy link - Clear language about how data is used

FormBackend can help manage GDPR compliance for data storage.

How do I send my first email to subscribers? Export your subscriber list as CSV from FormBackend, then import it into your email service (Mailchimp, ConvertKit, etc.). Alternatively, set up a webhook integration to automatically add new subscribers.

Can I add multiple forms on the same page? Yes, but each form needs its own unique FormBackend form ID. Create separate forms in your FormBackend dashboard and update each form’s action attribute.

What if someone accidentally enters the wrong email? FormBackend stores all submissions. You can manually remove incorrect entries from your dashboard, or instruct people to sign up again with the correct email.

How often can I email my subscribers? That depends on your list and email service provider. Start with a schedule you can commit to (weekly is common) and adjust based on subscriber engagement and preferences.

More form templates

Looking for a different form type? Browse our full collection of free HTML form templates, or try one of these:

Contact Form Template — Collect name, email, and messages from website visitors
Registration Form Template — Event, workshop, and conference signups
Feedback Form Template — Customer feedback with star ratings and comments
Survey Form Template — Multiple choice, rating scales, and open-ended questions
Order Form Template — Accept product orders with quantities and shipping details

Need a custom form? Use our HTML form generator to build one visually.

Free Newsletter Signup Form Template — HTML Code for Email Lists

Complete Newsletter Signup Form Code

How to Use This Newsletter Signup Template

Step 1: Copy the Code

Step 2: Create a FormBackend Account

Step 3: Replace the Form ID

Newsletter Signup Variations

Variation 1: Minimal Email-Only Signup

Variation 2: Signup with Name Field

Variation 3: Signup with Frequency Preference

How to Customize Your Newsletter Form

Integrating with Email Services

Best Practices for Newsletter Signups

Frequently Asked Questions

More form templates

Free Newsletter Signup Form Template — HTML Code for Email Lists