HTML

Newsletter Signup Form

admin by @admin ADMIN
Jun 15, 2026
May 31, 2026
Public
0 0 up · 0 down Sign in to vote
A focused inline form: just an email + submit. Use `type="email"`, `autocomplete="email"`, `inputmode="email"` for the best mobile UX. Include an inline status/confirmation slot.
HTML
Raw
<section class="newsletter">
    <h2>Get the weekly digest</h2>
    <p>One email every Friday with the week\'s best snippets from the community.</p>

    <form action="/subscribe" method="post" class="newsletter-form">
        <label for="news-email" class="visually-hidden">Email address</label>
        <input
            type="email"
            id="news-email"
            name="email"
            placeholder="you@example.com"
            autocomplete="email"
            inputmode="email"
            autocapitalize="off"
            autocorrect="off"
            spellcheck="false"
            required>

        <button type="submit">Subscribe</button>
    </form>

    <p id="news-status" role="status" aria-live="polite" class="newsletter-status"></p>

    <p class="newsletter-fineprint">
        No spam. Unsubscribe with one click. See our
        <a href="/privacy">privacy policy</a>.
    </p>
</section>

<style>
.newsletter-form { display: flex; gap: 8px; max-width: 420px; }
.newsletter-form input { flex: 1; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 6px; }
.newsletter-form button { padding: 10px 18px; border: 0; border-radius: 6px;
    background: #3b82f6; color: white; cursor: pointer; font-weight: 600; }
</style>
Tags

Save your own code snippets

Create a free account and build your private vault. Share publicly whenever you want.