How to Add an Email Signup Form to Your Website
You add an email signup form to your website by embedding a form snippet from your email platform into a page, mapping each field to a contact property and a list, turning on double opt-in, and then testing the full flow with your own address before you send any traffic to it. The whole job takes about twenty minutes on a typical site, and most of the failures people hit later — contacts that never arrive, subscribers stuck in "pending", forms that break on mobile — come from skipping one of the verification steps at the end.
What you'll set up and what you need
There are three moving parts, and it helps to think of them separately because each one can fail on its own.
The form itself. Fields, a button label, a consent checkbox or consent line, and a success state. Keep it minimal: an email address plus at most one or two qualifying questions.
The connection to a list. Where the contact lands, and which tags or custom fields get written at the moment of submission. This is the part people under-plan, and it's the part that determines whether you can segment later.
The confirmation step. Double opt-in: the contact is stored as pending, receives a confirmation email, and only becomes subscribed after clicking the link.
Before you start, confirm you have:
- Access to edit your site — either a block/embed widget in your CMS or the raw HTML of a page.
- A sending domain you can add DNS records to (DKIM, SPF, DMARC). Confirmation emails sent from an unverified domain land in spam, which is the single most common cause of "nobody confirmed".
- A privacy notice URL, because your consent line should link to it.
The exact same flow applies whether you paste an embed snippet into a CMS block or into a custom HTML file. Only the paste location changes.
Step-by-step: embedding the form and connecting it to a list
1. Create the list and decide on your fields
Create the list first, then decide which fields the form writes to. Use email plus one qualifying field — a dropdown, a single checkbox, or nothing at all. Every additional field costs you completions, and you can always ask more in the welcome email.
Verify: the list exists and has a name you'll recognise in six months ("Site signups — newsletter", not "List 2").
2. Build the form
In the form builder, add your fields, set the button label to something concrete ("Get the weekly notes" beats "Submit"), and write the success message. The success message should tell the person what happens next: "Check your inbox — we've sent a confirmation link."
Verify: preview the form and submit it once in preview mode if the builder allows it.
3. Turn on double opt-in and attach consent text
Enable double opt-in in the form settings. Then write the consent line that sits under the button. It needs to say what the person is agreeing to receive, and link to your privacy notice. A workable version:
By subscribing you agree to receive occasional emails from [Company]. You can unsubscribe at any time. See our [privacy notice].
Mailerflow's embeddable signup forms store consent records alongside the contact, so the timestamp and source of the opt-in are retained — useful if you ever need to demonstrate consent.
Verify: the consent text appears above the button, not buried below it, and the privacy link opens the right page.
4. Copy the embed snippet and paste it into your site
Most platforms give you two options. The HTML embed is a <form> block you paste directly into a page template or an HTML block. The JavaScript snippet renders the form client-side and lets the platform update styling without you re-pasting code.
In a block editor, add a Custom HTML / Embed block and paste the snippet there. In a raw HTML file, paste it where you want the form to appear — typically inside a <section> after your main content.
<!-- Paste the platform snippet inside a container you control -->
<section class="signup">
<h2>Get the weekly notes</h2>
<!-- platform embed snippet goes here -->
</section>
Verify: save and view the page. You should see the actual form, not the code.
5. Style it to match the site
Set a max-width (around 480–600px works for most layouts), inherit your body font, and make sure the fields stack vertically on narrow screens. Avoid fixed pixel widths on the input elements — they overflow on phones.
Verify: resize the browser window down to roughly 360px wide. Nothing should spill outside the page.
6. Connect the form to the list, tags and fields
In the form's settings, map each field: email → contact email, your dropdown → a custom field, and add a static tag such as site-signup. The tag is what lets you build a segment later without guessing where a contact came from.
Verify: the mapping screen shows every field on the form assigned to something. An unmapped field is silently dropped.
7. Publish and confirm it renders
Publish the page, then load it in a private window (so caching and login state don't confuse you). If your site uses a caching plugin, clear the cache — a stale cached page is a frequent reason a newly embedded form doesn't appear.
Verify: the form renders, the button is clickable, and the page layout is intact.
A worked example: a two-field form for a small consultancy
The following is an invented example for demonstration, not a real customer.
A five-page consultancy site with a blog wants to separate newsletter readers from people with project enquiries. The form has two fields:
| Form field | Type | Maps to |
|---|---|---|
| email input | Contact email | |
| What do you need help with? | dropdown: Newsletter / Project enquiry | Custom field interest |
| — | static | Tag site-signup |
The consent line reads: "By subscribing you agree to receive occasional emails from Northwind Consulting. Unsubscribe any time. See our privacy notice." The privacy link points to /privacy.
The confirmation email subject is "Confirm your subscription to Northwind notes", with a single button labelled "Confirm my email". The success page says: "You're almost in. Click the link in the email we just sent to confirm."
Once contacts start arriving, the tag site-signup plus the interest field let you build a segment of everyone who chose "Project enquiry" and hasn't replied to a follow-up — a list you couldn't construct if the dropdown had been left unmapped.
How to check it works (before you drive traffic to it)
Run this in one sitting. Each check has a clear pass condition.
- Submit with your own address. Pass: the contact appears in the list within a minute, with the right tag and the right value in the custom field.
- Check the confirmation email arrives. Pass: it lands in the inbox (not spam) and the sender domain matches your verified sending domain.
- Click the confirmation link. Pass: the contact status changes from pending to subscribed.
- Check the consent record. Pass: the contact's record shows a timestamp and the source of the opt-in.
- Test on mobile. Pass: fields stack, the button is tappable, nothing overflows.
- Test an invalid address. Pass: the form shows a validation message rather than silently accepting it.
- Submit the same address twice. Pass: you get a duplicate-handling response, not two contacts.
- Check the page layout. Pass: the form doesn't push your navigation or footer out of place.
If any check fails, fix it before promoting the page. A form that half-works collects addresses you can't email.
Common mistakes and how to fix them
The form submits but no contact appears. Usually one of three things: the form is pointed at the wrong list ID, JavaScript is blocked or the snippet was pasted inside a <form> that already exists, or a caching plugin is serving an old version of the page. Check the list ID first, then the page source, then clear the cache.
Contacts stay pending forever. The confirmation email is landing in spam, or the confirmation link points at a domain you haven't verified. Fix your DKIM, SPF and DMARC records and re-test with a fresh address.
Too many fields, too few completions. Cut to email plus one. You can collect the rest through a welcome email or a preference centre later.
No consent text. Fix this before you collect a single address. It's both a legal issue and a deliverability one — consent records are what let you prove opt-in if a mailbox provider asks.
Fixed-width styling that breaks mobile. Replace pixel widths on inputs with width: 100% and a max-width on the container.
Duplicate contacts from a second form. Point both forms at the same list and let duplicate checks handle it, rather than creating a second list you then have to reconcile.
No welcome email after confirmation. The confirmation click is the highest-intent moment you'll get. Send something immediately.
Where the signup form fits in the rest of your setup
The form is the entry point, not the system. The tag and field names you choose here are what make everything downstream possible: Mailerflow's dynamic segments can be built on fields, tags, engagement, events and website behaviour, and AI segmentation lets you describe a group in plain language and get the segment drafted for you. If you name a field interest today, you can segment on it tomorrow; if you leave it unmapped, that data is gone.
The natural next steps, in order:
- Form field best practices — how many fields, which ones, and how to phrase them.
- Double opt-in setup — the confirmation email, the success page, and what to do with unconfirmed contacts.
- Welcome email sequence — what to send in the first week after confirmation.
- Form placement and conversion — where the form goes on the page and how to test it.
If you need a welcome email quickly, Mailerflow's AI email builder takes a description of the email you want and returns a complete responsive design with subject lines and preview text, which you can then edit in the visual block editor.
FAQ
Do I need double opt-in? It depends on where your contacts come from and which jurisdictions you operate in. Double opt-in produces cleaner lists and stronger consent records, at the cost of some signups who never confirm. If you're collecting in the EU or want defensible consent logs, enable it.
Can I use the same form on more than one site? Yes, as long as both sites point at the same list and you use the same field mapping. If you need to tell the sites apart later, add a different static tag per site rather than a separate list.
Where should the form go on the page? Above the fold on landing pages, inline within blog posts, and in the footer as a fallback. Test one placement change at a time so you know what caused the difference.
Can I add a form to a site builder that doesn't allow custom HTML? Many builders have a dedicated embed or custom-code block that accepts third-party snippets. If yours doesn't, a hosted form page you link to is the usual fallback.
What happens to contacts who never confirm? They stay in a pending state and should be excluded from regular campaigns. Decide on a retention window for unconfirmed contacts and clean them up on a schedule.
How do I stop bots from filling it in? Enable whatever spam protection your form tool offers — honeypot fields and CAPTCHA are the common options — and watch your pending list for patterns.
Add an embeddable signup form with double opt-in and build dynamic segments in Mailerflow — start free.
