Newsletter Signup Form Template

Grow your mailing list with this sleek and compact newsletter signup form.

Designed for maximum conversion with minimum space, this template is perfect for placing in your website's footer, sidebar, or a dedicated landing page section.

Get Source Code → Preview →

About this Newsletter Signup Form

The goal of a newsletter form is to be as frictionless as possible. This template achieves that with a simple, single-field design. It features a visually engaging layout where the input field and submit button are seamlessly joined together. This "inline" style is extremely common and effective.

To ensure accessibility for a form with no visible label, this template uses two important techniques:

The placeholder attribute provides a visual hint to sighted users.
A label is still included in the code but is visually hidden using an sr-only (screen-reader only) class. This ensures that users with assistive technologies still get the proper context for the input field.

Features

Compact Inline Design: The input and button are styled as a single, cohesive unit.
Accessibility-Ready: Includes a visually hidden label for screen reader compatibility.
HTML5 Validation: Uses type="email" and required for simple, effective browser-side validation.
Versatile: Easy to place in various locations around a website.

Dependencies

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the newsletter signup form:

/* The form itself, using flexbox for alignment */
.newsletter-form {
    display: flex;
    justify-content: center;
}
.newsletter-form .form-group {
    flex-grow: 1; /* Allows the input to take up available space */
}

/* Style for the "screen-reader only" class to hide labels visually */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Input field styling */
.newsletter-form input[type="email"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #7f8c8d;
    background-color: #34495e;
    color: white;
    font-size: 1rem;
    border-radius: 4px 0 0 4px; /* Round left corners */
    box-sizing: border-box;
}
.newsletter-form input[type="email"]::placeholder {
    color: #95a5a6;
}
.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
    z-index: 10;
    position: relative;
}

/* Submit button styling */
.newsletter-form .submit-btn {
    padding: 12px 20px;
    border: none;
    background-color: #3498db;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0 4px 4px 0; /* Round right corners */
    margin-left: -1px; /* Overlaps the input slightly for a joined look */
    transition: background-color 0.2s;
}
.newsletter-form .submit-btn:hover {
    background-color: #2980b9;
}
</style>

<div class="newsletter-form-container">
    <h3>Subscribe to our Newsletter</h3>
    <p>Get the latest news and updates delivered to your inbox.</p>
    
    <form class="newsletter-form" action="#" method="post">
        <div class="form-group">
            <label for="newsletter-email" class="sr-only">Email address</label>
            <input type="email" id="newsletter-email" name="email" placeholder="Enter your email" required>
        </div>
        <button type="submit" class="submit-btn">Subscribe</button>
    </form>
</div>

View Output