Add a newsletter sign-up form to your website

The short version

• Build the form inside your newsletter service, not as a separate website form.
• Ask for an email address, and a first name if you’ll use it. Nothing else.
• One line above the button: what they’ll get and how often.
• Put it where people finish reading: footer, end of blog posts, contact page.
• Test it with your own address and check the contact lands in the right list.

How do I add a sign-up form?

These steps use Mailchimp’s embedded form, from Mailchimp’s signup form guide. Other services work the same way: build the form, copy the code, paste it into your site.

1. In Mailchimp, go to Forms and choose Other forms.
2. Click Create new form, then Create embedded form.
3. Name the form and choose the Audience it should add people to.
4. Click Continue to builder.
5. Adjust Form Fields, Settings and Tags. The form must include an email address (or an SMS phone number) field. Adding a tag here marks everyone who joins through this form.
6. Click Continue, then Copy Code.
7. Paste the code into your website where the form should appear.

In WordPress, paste the code into a Custom HTML block on a page, or into a footer widget area if your theme has one. If your site uses a page builder, look for its HTML or code module. Some services also offer a WordPress plugin, which avoids pasting code; check that it comes from the service itself.

What should the form say?

Keep it short. For example:

Seasonal tips and offers, about once a month. Your email address. [Sign up]

That’s sample wording; describe your own newsletter honestly. Under the button, a short line such as “Unsubscribe anytime. We don’t share your address” sets expectations, as long as it’s true.

Give every field a visible label, not just grey placeholder text that disappears when people type. The W3C’s labels guidance explains why labels matter for people using screen readers and anyone who forgets what the box was for.

Where should it go?

• The site footer, so it’s on every page.
• The end of blog posts and guides, where readers have just found you useful.
• The contact page, next to the form, for people who aren’t ready to call.
• A checkbox on your contact form, unticked, for people already getting in touch. Your web team may need to connect the form to the service.

A pop-up is optional. If you use one, make it easy to close, and don’t show it the moment someone lands. Check whether your plan includes it: Mailchimp lists its pop-up form as a beta with “very limited availability,” and MailerLite’s free plan allows 3 active forms.

Then test it

1. Sign up with an address you can check, ideally on your phone too.
2. If double opt-in is on, confirm the email arrives and the link works.
3. Look for the new contact in your service, with the tag you set.
4. Check that your welcome email arrives.
5. Remove or unsubscribe the test contact.

Why does the form matter?

A form on your site is the steadiest source of subscribers you’ll have, because the people using it found you and liked what they read. It also builds consent in: the person typed their own address and pressed the button. That record is exactly what your service and the law expect you to have. See building a list with consent.

What are the common mistakes and edge cases?

• A form that goes nowhere. It looks fine but isn’t connected, so sign-ups vanish. Always test.
• Asking for too much. Phone, address and birthday fields put people off. Ask later, if you need it.
• A vague promise. “Subscribe” doesn’t say what happens next.
• A pre-ticked newsletter box on a contact form. Leave it unticked.
• Spam sign-ups. Bots fill forms too. Double opt-in keeps fake addresses off your list; for more, see stopping contact form spam.
• Code pasted into the wrong place. Pasting into a normal paragraph shows the code as text. Use an HTML block.
• Mismatched styling. Embedded forms bring their own fonts and colors. Ask your web team to match them to your site.

What if it isn’t working?

• The code shows as text on the page. It was pasted into a text block. Move it into a Custom HTML block.
• Sign-ups aren’t arriving. Check the form is linked to the right audience, and look in your service for contacts awaiting confirmation if double opt-in is on.
• The confirmation email isn’t arriving. Check spam, then check your domain authentication; see business email that lands.
• The form breaks the page layout on phones. Undo and ask your web team; see what to do when a page looks broken.

How much does it cost, and how long does it take?

Embedded forms are included in the free plans of the services that offer them, within each plan’s limits. Building the form takes 15 minutes. Placing and testing it on your site takes about half an hour.

How does E-3 handle this?

We add sign-up forms and newsletter checkboxes to client sites, and changes like these are made on a staging copy first. Whoever makes the change, a test sign-up on a computer and a phone is the way to know it works. Forms that feed a list belong to our leads and follow-up service.

Related questions

• How do I build a list with consent?
• What should my welcome email say?
• Which email platform should I use?
• How do I add or change a form on my site?
• Back to the complete email newsletter guide

Sources

1. Add a signup form to your website (Mailchimp Help)
2. About double opt-in (Mailchimp Help)
3. MailerLite pricing (MailerLite)
4. Mailchimp pricing: Marketing plans (Mailchimp)
5. Labels or Instructions: Understanding Success Criterion 3.3.2 (W3C WAI)