How to Create a Newsletter Signup Form

A newsletter is one of the few audiences you truly own — no algorithm decides who sees your emails. But it all starts with a signup form, and most signup forms are either invisible or annoying.

This guide shows you how to build two kinds of signup form in HTML and CSS — a compact inline bar and a richer card — and how to collect subscribers without running a server.

What makes people subscribe

• A specific promise. "Weekly tips" is vague; "One practical CSS trick every Tuesday" is a reason to sign up.
• As few fields as possible. Email only. Maybe a first name if you'll genuinely use it.
• Social proof. "Join 4,200 developers" works better than "Subscribe".
• Reassurance. "No spam. Unsubscribe anytime." right under the button.
• The right placement. End of a blog post, the footer, and a dedicated landing page beat aggressive pop-ups.

Layout 1: The inline signup bar

Perfect for footers and the end of articles. Email field and button sit on one line, stacking on mobile.

<form class="signup-inline" action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="subject" value="New newsletter subscriber">
  <input type="hidden" name="list" value="weekly-tips">
  <input type="checkbox" name="botcheck" class="hp" tabindex="-1" autocomplete="off">

  <label for="nl-email" class="sr">Email address</label>
  <input id="nl-email" name="email" type="email" autocomplete="email"
         placeholder="you@example.com" required>
  <button type="submit">Subscribe</button>
</form>
<p class="note">One practical tip every Tuesday. No spam, unsubscribe anytime.</p>

.signup-inline {
  display: flex;
  gap: 8px;
  max-width: 460px;
  padding: 6px;
  background: #fff;
  border: 1px solid #d4d4e0;
  border-radius: 14px;
}
.signup-inline:focus-within {
  border-color: #645cec;
  box-shadow: 0 0 0 3px rgba(100, 92, 236, .2);
}
.signup-inline input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font: inherit;
  border: 0;
  outline: none;
  background: transparent;
}
.signup-inline button {
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: #645cec;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.note { margin-top: 8px; font-size: 13px; color: #64748b; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hp { display: none; }

@media (max-width: 420px) {
  .signup-inline { flex-direction: column; }
  .signup-inline button { width: 100%; padding: 12px; }
}

The label is visually hidden but still there for screen readers — the placeholder alone isn't enough. :focus-within highlights the whole bar when the email field is focused.

Layout 2: The signup card

For landing pages and sidebars, a card gives you room to sell the newsletter.

<section class="nl-card">
  <span class="badge">Free newsletter</span>
  <h2>Better forms, every Tuesday</h2>
  <p>One short, practical tip on HTML, CSS and conversion. Join 4,200+ developers and designers.</p>

  <form action="https://api.formclick.io/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
    <input type="hidden" name="subject" value="New newsletter subscriber">
    <input type="checkbox" name="botcheck" class="hp" tabindex="-1" autocomplete="off">

    <label for="card-name">First name</label>
    <input id="card-name" name="first_name" autocomplete="given-name">

    <label for="card-email">Email</label>
    <input id="card-email" name="email" type="email" autocomplete="email" required>

    <label class="consent">
      <input type="checkbox" name="consent" value="yes" required>
      I agree to receive the newsletter and know I can unsubscribe at any time.
    </label>

    <button type="submit">Get the tips</button>
  </form>
</section>

<script src="https://cdn.formclick.io/formclick.min.js"></script>

.nl-card {
  max-width: 420px;
  padding: 32px;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #645cec 55%, #818cf8);
  border-radius: 22px;
  font-family: system-ui, sans-serif;
}
.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
}
.nl-card h2 { margin: 14px 0 8px; font-size: 26px; }
.nl-card p { margin: 0 0 22px; opacity: .9; }
.nl-card label { display: block; margin: 0 0 6px; font-weight: 600; font-size: 14px; }
.nl-card input[type="email"], .nl-card input:not([type]) {
  width: 100%;
  margin-bottom: 14px;
  padding: 12px 14px;
  font: inherit;
  border: 0;
  border-radius: 10px;
}
.nl-card .consent { display: flex; gap: 10px; font-weight: 400; font-size: 13px; opacity: .95; }
.nl-card button {
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  font: inherit;
  font-weight: 800;
  color: #4f46e5;
  background: #fff;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

Consent and the law

If you have subscribers in the EU, UK or many other regions, privacy law requires that consent to marketing email is:

• Freely given — no pre-ticked boxes.
• Specific — say what they're signing up for.
• Recorded — keep a record of when and how they subscribed.
• Easy to withdraw — every email needs an unsubscribe link.

Formclick stores each submission with a timestamp, which gives you a simple record of when someone signed up. Using double opt-in (a confirmation email before adding someone to your list) through your email marketing tool adds stronger proof and keeps fake addresses out.

Getting subscribers into your email tool

With the form posting to Formclick, every new subscriber is saved in your dashboard and emailed to you. To send them on automatically:

• Built-in email marketing integrations add subscribers straight to Brevo, MailerLite or ActiveCampaign.
• Webhooks (paid plans) push each signup to your own endpoint, or to Zapier, Make or n8n.
• Google Sheets (Pro) keeps a running list you can import from.
• Download a CSV any time and upload it to any other email tool.

See all available connections on the integrations page.

Placement ideas that convert

1. The end of every blog post — readers who finished an article are your warmest audience.
2. Your footer — low-key, always available.
3. A dedicated landing page you can link from social profiles.
4. Inside a relevant article, offering a related bonus (a checklist, template or cheat sheet).

Want a ready-made design? Grab the newsletter signup template or the email subscription form. And if you're launching something new, a waitlist form works the same way.