Newsletter Signup Footer Template

Turn visitors into loyal subscribers with this footer built for high-conversion email signups.

This footer template is a dedicated lead-generation machine. It uses a bold, full-width design with a clear call-to-action to make subscribing to your newsletter the most compelling next step a user can take on the page.

Get Source Code Preview

About this Newsletter Footer Template

This footer is designed with one clear goal in mind, which is to grow your mailing list. Unlike traditional footers that offer dozens of links, this design minimizes distractions and focuses user attention on a single, valuable action. It uses a two-tiered structure: a large, eye-catching main section for the signup form, and a slim, subtle bottom bar for essential copyright and social links.

Features

Conversion-Focused Design: A large headline and a high-contrast button make the call-to-action impossible to miss.
Spacious & Clean Form: The form elements are large and easy to use on both desktop and mobile devices.
Persuasive Layout: Includes space for a short, compelling paragraph to explain the value of subscribing.
Accessible Form: The form includes a properly associated label for screen readers.
Responsive & Aligned: The layout adapts perfectly to all screen sizes and aligns with the main page content.

Ideal Use Cases

Blogs and content creators.
SaaS companies building a waitlist or user community.
E-commerce sites promoting sales and new products.
Any website where email marketing is a primary growth channel.

Code Breakdown

The template has two main parts. The .footer-newsletter__main section has a distinct background color and uses a .container to center its content. This section uses Flexbox to stack and center the heading, paragraph, and form. The form itself (.footer-newsletter__form) also uses Flexbox, allowing the input field and button to stack on small screens and sit side-by-side on larger ones.

The .footer-newsletter__bottom bar is visually separate and uses a .container with Flexbox to cleanly position the copyright notice and social links.

Code

Here's the full code for the footer template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newsletter Signup Footer</title>
    <style>
        :root {
            --main-bg: #2c3e50;
            --main-heading-color: #ffffff;
            --main-text-color: #ecf0f1;
            
            --bottom-bg: #233140;
            --bottom-text-color: #bdc3c7;
            --bottom-link-hover: #ffffff;
            
            --form-button-bg: #3498db;
            --form-button-text: #ffffff;
        }

/* Basic body styles */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        main {
            flex-grow: 1;
        }

.container {
            width: 90%;
            max-width: 1140px;
            margin-left: auto;
            margin-right: auto;
        }

.main-content {
            padding: 2rem 0;
        }

/* FOOTER STYLES START HERE */
        
        .footer-newsletter {
            line-height: 1.6;
        }

/* Main signup section */
        .footer-newsletter__main {
            background-color: var(--main-bg);
            color: var(--main-text-color);
            padding: 4rem 0;
            text-align: center;
        }

.footer-newsletter__heading {
            color: var(--main-heading-color);
            font-size: 2.25rem;
            font-weight: 600;
            margin: 0 0 1rem 0;
        }

.footer-newsletter__subheading {
            max-width: 600px;
            margin: 0 auto 2rem auto;
            font-size: 1.1rem;
        }
        
        .footer-newsletter__form {
            display: flex;
            flex-direction: column; /* Mobile-first stack */
            gap: 1rem;
            max-width: 500px;
            margin: 0 auto;
        }

.footer-newsletter__input {
            padding: 1rem;
            border: 1px solid transparent;
            border-radius: 8px;
            font-size: 1rem;
        }
        .footer-newsletter__input:focus {
            outline: 2px solid var(--form-button-bg);
        }

.footer-newsletter__button {
            background-color: var(--form-button-bg);
            color: var(--form-button-text);
            border: none;
            padding: 1rem 2rem;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .footer-newsletter__button:hover { opacity: 0.85; }

/* Bottom bar section */
        .footer-newsletter__bottom {
            background-color: var(--bottom-bg);
            color: var(--bottom-text-color);
            padding: 1.5rem 0;
            font-size: 0.875rem;
        }
        
        .footer-newsletter__bottom-container {
            display: flex;
            flex-direction: column; /* Mobile-first stack */
            align-items: center;
            gap: 1.5rem;
        }
        
        .footer-newsletter__copyright { margin: 0; }
        
        .footer-newsletter__social ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            gap: 1.5rem;
        }
        .footer-newsletter__social a { color: var(--bottom-text-color); transition: color 0.2s; }
        .footer-newsletter__social a:hover { color: var(--bottom-link-hover); }
        .footer-newsletter__social svg { width: 20px; height: 20px; fill: currentColor; }

@media (min-width: 576px) {
            .footer-newsletter__form {
                flex-direction: row; /* Side-by-side on larger screens */
            }
            .footer-newsletter__input {
                flex-grow: 1; /* Allow input to take up available space */
            }
        }

@media (min-width: 768px) {
            .footer-newsletter__bottom-container {
                flex-direction: row;
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <main>
        <div class="container main-content">
            <h1>Newsletter Signup Footer</h1>
            <p>A footer built to grow your mailing list.</p>
        </div>
    </main>

<footer class="footer-newsletter" role="contentinfo">
        <div class="footer-newsletter__main">
            <div class="container">
                <h2 class="footer-newsletter__heading">Join Our Mailing List</h2>
                <p class="footer-newsletter__subheading">Be the first to know about new templates, free resources, and exclusive offers. Unsubscribe at any time.</p>
                <form class="footer-newsletter__form">
                    <label for="newsletter-email-main" style="display: none;">Email Address</label>
                    <input type="email" id="newsletter-email-main" class="footer-newsletter__input" placeholder="Enter your email" required>
                    <button type="submit" class="footer-newsletter__button">Subscribe</button>
                </form>
            </div>
        </div>
        <div class="footer-newsletter__bottom">
            <div class="container footer-newsletter__bottom-container">
                <p class="footer-newsletter__copyright">&copy; 2025 Your Company Name. All Rights Reserved.</p>
                <nav class="footer-newsletter__social" aria-label="Social media">
                    <ul>
                        <li><a href="#" aria-label="Our Twitter"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.223.085 4.93 4.93 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg></a></li>
                        <li><a href="#" aria-label="Our Facebook"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.35C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg></a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </footer>
</body>
</html>

View Output