How to Add a Newsletter Sign-up Form to Your Website

Step 2: Connect it to Buttondown#

Buttondown accepts a normal HTML form post, so you can keep your own design. In your Buttondown account, go to Settings, then Embedding, and copy the HTML from the form section. Its WordPress guide shows the key parts:

<form action="https://buttondown.com/api/emails/embed-subscribe/your-username" method="post">
  <label for="newsletter-email">Email address</label>
  <input id="newsletter-email" name="email" type="email" autocomplete="email" required>
  <input type="hidden" name="embed" value="1">
  <button type="submit">Subscribe</button>
</form>

Replace your-username with your newsletter's username. Keep the field's name="email": Buttondown's guide warns that if it changes, sign-ups silently stop reaching your list.

Two more things from the Buttondown docs:

• Don't submit it with fetch. The docs say the endpoint must be the action of a normal form, because a subscriber sometimes has to complete a CAPTCHA or fix an error on Buttondown's page. If you'd rather the visitor stays on your site, use Buttondown's iframe or web component instead.
• Tag where people signed up. Add <input type="hidden" name="tag" value="footer"> to the footer form and a different value to the home page form, and you'll see which one works. Extra fields, such as a first name, use names like metadata__first-name.

With a template that validates the form#

The Freeframe templates check the address in JavaScript first and then call a success function. To keep that validation and still post to Buttondown, set the form's action and method as above, then replace the demo code in the newsletter handler with a real submit:

setupValidation(form, function () {
  form.submit(); // posts to Buttondown once the address is valid
});

form.submit() sends the form as a normal post without firing the submit event again, so it doesn't loop back into the validation. Your function names may differ: check the template's Documentation page.

Step 3: Or use MailerLite or Mailchimp#

Both build the form for you in their dashboard and give you embed code to paste into your page.

• Mailchimp: its sign-up form guide has you open Forms, choose the embedded form option, pick the audience, edit the fields and copy the code. The guide recommends turning on reCAPTCHA for the form to stop fake sign-ups.
• MailerLite: create a sign-up form in the dashboard and copy its embed code. At the time of writing the free plan allows three active forms; check the plan comparison on the pricing page for the form types your plan includes.

Paste the code where your current form is. If you want it to match your design, copy the action URL and the field names (including any hidden fields) from their code into your own form, and test that a sign-up arrives. If it doesn't, go back to their code exactly as given: some embeds rely on their own script.

Step 4: Turn on double opt-in#

With double opt-in, a new subscriber gets an email with a link and is only added once they click it. Mailchimp describes it as an extra step that checks each address, and you turn it on in the audience's settings. Look for the same setting in whichever service you use. It costs you a few sign-ups from people who never click, but it keeps out typos, fake addresses and bots, and it gives you a record that the person really asked to join.

Then make your thank-you message match. If double opt-in is on, say "Check your inbox and click the link to confirm", not "You're subscribed".

Step 5: Ask for consent properly (UK)#

In the UK, marketing email is covered by PECR. The ICO's guidance on electronic mail marketing says you must not send marketing emails to individuals without their specific consent. A sign-up form someone fills in on purpose, with clear words about what they'll receive, is that consent. In practice:

• Don't pre-tick boxes or sign people up because they sent a contact form or downloaded something.
• Existing customers are a narrow exception. The "soft opt-in" lets you email people who bought, or asked about buying, something similar from you, but only if you gave them a clear chance to opt out when you collected their details and in every message since.
• Every email must say who it's from and include a working way to unsubscribe. Your newsletter service adds the unsubscribe link for you; act on any unsubscribe by reply too.
• Never import a bought list. The soft opt-in doesn't cover it, and it will hurt your sending reputation.

The ICO notes that this guidance is under review after the Data (Use and Access) Act, so check the page again if you're reading this later. Mention the newsletter, and which service holds the addresses, in your privacy notice. If the embed code loads the provider's own script, check whether it sets cookies; our cookie banner guide explains what needs consent.

Step 6: Test it before you rely on it#

1. Deploy the site and sign up with an address you can check, from the live page, on your phone.
2. Confirm the double opt-in email arrives (look in spam too) and the link works.
3. Check the address appears in your service's subscriber list, with the tag you set.
4. Try an invalid address and make sure the form says so.
5. Send yourself a test campaign and click the unsubscribe link.

Do this for every form on the site. It's on our website launch checklist for a reason: a footer form that has quietly sent nothing for months is a common find.

Get people to sign up#

A form in the footer collects a trickle. To grow the list before your Black Friday sale:

• Put a sign-up band on the home page, with a reason to join: early access to the sale, a first-order discount or your Christmas order dates.
• Mention it on your order confirmation page and in-store, with the web address on a card at the till.
• Keep the form to one field. Every extra field costs sign-ups; ask for a first name only if you'll use it.

Then send something worth opening. A short email with one clear offer and your Christmas delivery cut-off dates is a good first issue.