Newsletter Signup Hero Template

Grow your audience with a hero section designed to make newsletter signups effortless and immediate.

This template reduces friction by placing an email signup form "above the fold," a proven strategy for increasing conversions and building your mailing list.

Get Source Code Preview

About the Newsletter Signup Hero

For content creators, SaaS companies, and e-commerce stores, a strong email list is a valuable asset. This hero section is laser-focused on growing that list. By making the signup process the most prominent element on the page, it encourages action. The design is clean and direct, which enables it to be easily branded to fit any website.

Features

Integrated Signup Form: An email input and subscribe button are the central focus.
Conversion-Oriented Design: The layout guides users directly from the value proposition to the sign-up action.
Accessible Form: Includes a properly associated label for the input field, which is visually hidden for a cleaner look.
Fully Responsive: The form input and button align neatly on desktop and stack gracefully on mobile.

Code Breakdown

The component is split into CSS for your site's head and HTML for the body.

The overall section is centered using Flexbox. The form itself is the most interesting part. It's also a flex container (display: flex). On mobile, flex-direction: column is used to stack the input and button. A media query for wider screens changes this to row, placing them side-by-side.

To create the unified "pill" shape on desktop, we manipulate the border-radius of the input and button. The input's right-side corners are set to zero, and the button's left-side corners are set to zero, so they fit together perfectly. The label is hidden using an sr-only (screen-reader only) utility class, which is a common accessibility practice.

Code

<style>
    :root {
        --nsh-padding: 4rem 1.5rem;
        --nsh-bg-color: #f1f5f9;
        --nsh-text-color: #334155;
        --nsh-headline-color: #0f172a;
        --nsh-input-bg: #ffffff;
        --nsh-input-border: #cbd5e1;
        --nsh-input-focus-border: #3b82f6;
        --nsh-cta-bg: #2563eb;
        --nsh-cta-hover-bg: #1d4ed8;
        --nsh-cta-text-color: #ffffff;
        --nsh-max-width: 700px;
    }
    .newsletter-signup-hero {
        box-sizing: border-box;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        background-color: var(--nsh-bg-color);
        padding: var(--nsh-padding);
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .newsletter-signup-hero * {
         box-sizing: border-box;
    }
    .nsh-content {
        max-width: var(--nsh-max-width);
    }
    .nsh-content .title {
        color: var(--nsh-headline-color);
        font-size: clamp(2rem, 5vw, 3rem);
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 1rem;
    }
    .nsh-content .subtitle {
        color: var(--nsh-text-color);
        line-height: 1.6;
        margin: 0 auto 2.5rem;
    }
    .newsletter-form {
        display: flex;
        flex-direction: column;
        gap: 0.75rem; /* For stacked mobile layout */
    }
    .newsletter-form .form-input {
        background-color: var(--nsh-input-bg);
        border: 1px solid var(--nsh-input-border);
        padding: 1rem;
        font-size: 1rem;
        border-radius: 8px;
        color: #0f172a;
    }
     .newsletter-form .form-input:focus {
        outline: none;
        border-color: var(--nsh-input-focus-border);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
        z-index: 1; /* Ensures focus ring is on top */
    }
    .newsletter-form .form-button {
        background-color: var(--nsh-cta-bg);
        color: var(--nsh-cta-text-color);
        border: none;
        padding: 1rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .newsletter-form .form-button:hover {
        background-color: var(--nsh-cta-hover-bg);
    }
    .nsh-content .form-footer {
        margin-top: 1rem;
        font-size: 0.85rem;
        color: #64748b;
    }
    .sr-only {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
    }
    @media(min-width: 576px) {
        .newsletter-form {
            flex-direction: row;
            gap: 0; 
        }
        .newsletter-form .form-input {
            flex-grow: 1;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            margin-right: -1px; /* Overlap borders for seamless connection */
        }
        .newsletter-form .form-button {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
</style>

<section class="newsletter-signup-hero">
    <div class="nsh-content">
        <h1 class="title">Get Smarter in 5 Minutes</h1>
        <p class="subtitle">Join our community of innovators and get a weekly digest of the most important trends in tech, design, and business. Straight to your inbox.</p>

<form class="newsletter-form" action="#" method="POST">
            <label for="nsh-email" class="sr-only">Email Address</label>
            <input type="email" id="nsh-email" name="email" class="form-input" placeholder="your.email@example.com" required>
            <button type="submit" class="form-button">Subscribe</button>
        </form>

<p class="form-footer">No spam. Unsubscribe at any time.</p>
    </div>
</section>

View Output