Embed Mailchimp on Your Site: Menus, Where to Paste Code, Opt in Tips

You can connect Mailchimp to any website by using an embedded signup form or a Mailchimp popup form. For most beginners, the embedded form is the fastest route because you just generate HTML and paste it into your page. Popups look flashier but need your site connected to Mailchimp or pushed through an integration. Either way, decide on single or double opt-in before you publish.

---

TL;DR:

• Embedded forms are easiest to implement for most small sites, requiring only pasting generated HTML into your site’s code or CMS widget area.
• Popups can be highly visible but need manual script embedding unless your platform has native Mailchimp integration, which simplifies setup.
• Mobile responsiveness requires setting form widths to percentages and stacking fields vertically to prevent layout breakage on small screens.
• Using a no-code builder like WebsitePublisher.ai can streamline signup form creation and styling without manual HTML editing, saving time and reducing errors.
• Confirm that your site accepts external scripts and full URLs, especially for tracking links, to prevent common issues with broken campaigns or form failures.

---

Table of Contents

• Pre-flight checklist: what you need before you start
• Overview of connection methods: embed, popup, landing pages, CMS integrations
• Step-by-step: add an embedded Mailchimp signup form
• Step-by-step: create and publish a Mailchimp popup form
• WordPress-specific considerations
• Verify the connection and fix common problems
• Privacy, consent, and opt-in settings
• Fixing styling and CSS conflicts
• Third-party integration tools and plugins beyond WordPress and Shopify
• Synchronizing subscriber lists between your website and Mailchimp
• Embedding Mailchimp forms on Wix, Squarespace, and other builders
• Making Mailchimp forms work well on mobile
• No-code builders vs manual integration: when each makes sense
• WebsitePublisher.ai: a faster path when you’d rather skip the manual steps
• FAQ
• Sources

Pre-flight checklist: what you need before you start

Before you touch any code, get these pieces in place so the setup goes smoothly.

• A Mailchimp account with at least one audience already created and selected.
• Admin access to your website or CMS, plus knowledge of where to paste HTML or scripts (widget area, page editor, or theme header).
• A decision on form type: embedded form, popup, or a Mailchimp-hosted landing page.
• A choice between single and double opt-in, plus privacy policy link text ready to paste into your form.

Having these ready means you won’t stall halfway through generating your form code.

Overview of connection methods: embed, popup, landing pages, CMS integrations

Mailchimp gives you several ways to collect signups, and the right one depends on how much control you have over your site’s code.

• Embedded form: universal HTML you paste directly into your page, best when you can edit your site’s HTML or drop in a widget.
• Popup form: higher visibility since it appears over your content, but it requires either a connected site or a direct integration.
• Mailchimp-hosted landing pages or sites: fastest to publish since Mailchimp hosts everything, though publishing to a custom domain needs a paid Mailchimp Websites plan.
• CMS-specific routes: WordPress blocks, plugins, or Shopify’s native integration, where the platform’s own rules decide what will actually work.

For most small business sites, the embedded signup form wins on simplicity. You generate it once in Mailchimp, choose your audience, customize the fields you want to collect, and copy the resulting HTML into your backend. It works on nearly any platform that lets you paste raw HTML, which covers most website builders, CMS platforms, and custom-coded sites.

Popups are worth it when you want every visitor to see your offer, not just people who scroll to a footer or sidebar. The tradeoff is setup complexity: some platforms, like Shopify, receive the popup automatically through their native Mailchimp integration, while everything else needs a manual script added to your site’s header.

Mailchimp-hosted landing pages skip your website entirely. You build the page inside Mailchimp, publish it, and share the link. This is the quickest option when you don’t have a website yet or want a dedicated signup page fast, but putting that page on your own domain (rather than a mailchi.mp link) requires a paid plan.

CMS integrations sit in between. WordPress, Shopify, and similar platforms each have their own rules about what forms or scripts they’ll accept, which we cover in detail further down. Pick your method based on how much time you have and how much control you need over the final look of the form.

Step-by-step: add an embedded Mailchimp signup form

Generating and placing an embedded form takes about ten minutes once you know the menu path.

1. In Mailchimp, go to Audience → Signup forms → Forms builder, then select Embedded forms.
2. Choose the audience you want new subscribers added to.
3. Customize which fields appear (name, email, birthday, and so on) and remove any you don’t need.
4. Turn on GDPR fields or set your opt-in preference before you generate the code, since changing it later means regenerating.
5. Pick Unstyled if you plan to style the form yourself with your own CSS, or keep the default style if you want Mailchimp’s built-in look.
6. Click Copy Code to copy the generated HTML to your clipboard.
7. Paste the code into an HTML-ready area: your page’s HTML editor, a text widget, a CMS HTML block, or your theme template. You can also deploy it through Google Tag Manager if your site uses that.
8. Publish the page and test the live form by submitting a real email address.
9. When you edit the form later in Mailchimp, copy the new code and replace the old snippet entirely rather than editing it by hand.

Pro Tip: Build and test your embed on a hidden or unlisted page first, then move it to a visible page once the form behaves correctly. This keeps a broken test from showing up on your live site.

Step-by-step: create and publish a Mailchimp popup form

Popups follow a similar build process but add a connection step that embedded forms skip entirely.

1. In Mailchimp, go to Audience → Signup forms → Forms builder → Pop-up forms, then design your popup and set its targeting and trigger (time delay, scroll depth, or exit intent).
2. If your platform integrates natively with Mailchimp, such as Shopify, the popup can push to your site automatically once the integration is active, with no code to paste.
3. For sites without a native integration, add your site’s URL in Mailchimp, click Get code snippet, and paste the script between your site’s <head> tags, or deploy it through Google Tag Manager.
4. Run Check connection in Mailchimp to confirm the site recognizes the script.
5. Set page rules if you only want the popup appearing on certain pages, then test it on a live, public page before calling it done.

Integrations that push the popup automatically remove the manual script step entirely, which makes them the more reliable choice whenever your platform supports one.

WordPress-specific considerations

WordPress splits into two very different setups, and which one you have changes your options.

• WordPress.com: the built-in Mailchimp signup block is only available on Business or eCommerce plans. On lower-tier plans, use a Mailchimp-hosted landing page instead and link to it.
• WordPress.org (self-hosted): you have full flexibility: paste embedded HTML directly into a block or widget, install a plugin such as MC4WP for a no-code setup, or edit your theme template.
• Choose a plugin if you’d rather manage settings through a dashboard instead of editing raw HTML.
• Whichever route you pick, use the Unstyled embedded form or the plugin’s style settings to avoid your theme’s CSS clashing with Mailchimp’s default form styles.

Verify the connection and fix common problems

Once your form is live, confirm it actually works before you consider the job done.

• Run Check connection in Mailchimp for popups, and open your site in a private browser window to confirm the form or popup actually appears.
• Make sure the page is public, not sitting in coming-soon or maintenance mode, since verification and tracking fail on private pages.
• Confirm your theme or plugin isn’t blocking external scripts, which stops popups from loading at all.
• Use descriptive, full text links rather than shortened URLs, since aggressive spam filters sometimes break Mailchimp’s tracking redirects.

Broken tracking links are one of the most common support issues Mailchimp users run into, and the fix usually comes down to using absolute URLs and confirming your site accepts UTM or query parameters rather than stripping them out. If you’re serious about measuring signup performance, pair this with a clear read on which marketing metrics actually matter so you’re not just checking that links work, but that they’re telling you something useful.

Privacy, consent, and opt-in settings

Getting consent right protects your list and keeps you out of trouble with regulators.

• Double opt-in sends a confirmation email before adding someone to your audience, which improves list quality and protects your sender reputation.
• GDPR fields, turned on in your audience settings, require clear legal text explaining how you’ll use the data, plus a link to your privacy policy.
• reCAPTCHA shows up on some signup flows specifically to block bot signups, which otherwise pollute your list with fake addresses.
• Redirect your thank-you or confirmation page back to your own site instead of leaving visitors on a generic Mailchimp page, so the experience feels consistent.

Pro Tip: Turn on double opt-in even if it feels like an extra step for subscribers. It filters out typos and bot signups before they ever reach your list.

Fixing styling and CSS conflicts

Embedded forms pull in whatever CSS your site already has, which is exactly why they sometimes look broken. If you want full control, choose the Unstyled form option and write your own CSS from scratch. Common fixes include setting a fixed width on the form container, normalizing font families to match your site, and restyling the submit button so it doesn’t inherit a clashing theme color. If elements still overlap, scope a small CSS reset to just the form container instead of touching your site’s global styles. Always check the result on both desktop and mobile before calling it finished.

Third-party integration tools and plugins beyond WordPress and Shopify

Beyond WordPress plugins and Shopify’s native integration, plenty of other platforms connect to Mailchimp without manual code. Many email marketing and form-building tools offer direct Mailchimp sync so new entries land in your audience automatically, which beats copying and pasting code every time you update a form. Automation platforms that connect different apps together are another common route: they let you push form submissions, event signups, or purchase data into Mailchimp as a trigger-based workflow rather than a static embed.

Website builders with marketing features built in often include Mailchimp as a listed integration inside their own settings panel, skipping the HTML-paste step entirely. The tradeoff with any third-party tool is an added layer between your site and your audience data, so if a sync breaks, you’re troubleshooting two systems instead of one. Before adopting one, confirm it supports the specific fields you’ve set up in Mailchimp (GDPR checkboxes, tags, or merge fields) since not every integration passes custom fields through correctly. For simple signup collection, a direct embed or popup still has fewer moving parts to break.

Synchronizing subscriber lists between your website and Mailchimp

Keeping your website’s subscriber data and your Mailchimp audience in sync matters most once you’re collecting signups from more than one place. Start by confirming every form on your site, embedded or popup, points to the same audience inside Mailchimp, not several different ones you forgot about. If you use tags or groups to segment subscribers, set those on the form itself so new signups land in the right segment automatically instead of needing manual sorting later.

For sites with native integrations, like Shopify, customer data syncs on its own once the integration is active, pulling in purchase history alongside email addresses. For everything else, periodically export your site’s contact list and compare it against your Mailchimp audience to catch anyone who signed up through a channel that isn’t connected, like a phone inquiry or in-person event. Clean up duplicate entries and unsubscribed contacts on a regular schedule so your audience count and your sending reputation both stay accurate.

Embedding Mailchimp forms on Wix, Squarespace, and other builders

Most website builders that don’t allow raw HTML editing still give you a workaround. On Wix, add an HTML embed element (sometimes called a custom embed or iframe block) to your page, then paste your Mailchimp embedded form code into it. On Squarespace, add a Code Block to any page and paste the same HTML snippet in, since Squarespace supports raw embeds inside that block type.

Both platforms render the form inside an isolated container, which actually reduces the CSS conflicts you’d otherwise fight on a self-hosted WordPress theme. The tradeoff is less flexibility: you can’t easily edit the form’s layout through the builder’s visual editor once it’s embedded as code, so styling changes mean going back into Mailchimp, regenerating the Unstyled version, and pasting it in again. If your builder supports Mailchimp as a native app or integration instead of a raw embed, that route usually survives platform updates better than a pasted HTML block does.

Making Mailchimp forms work well on mobile

A signup form that looks fine on desktop can break completely on a phone screen, so check this before you consider the form done. Set the form container to a percentage-based width (like 100%) rather than a fixed pixel width, so it shrinks to fit smaller screens instead of overflowing. Stack form fields vertically rather than side by side. Most Mailchimp embedded forms already do this by default, but custom CSS can undo it. Keep input fields large enough to tap accurately, and make sure your submit button has enough padding to hit without zooming in.

Test the actual live form on a real phone, not just a browser window resized to look like one, since mobile browsers handle fonts and spacing differently than desktop emulators suggest. If you added a popup, double-check its close button is easy to tap and that the popup doesn’t cover the entire screen on smaller devices, which frustrates visitors and increases the chance they just leave your site.

No-code builders vs manual integration: when each makes sense

Across customer projects, we see small business owners reach for a no-code, push-based integration when speed and reliability matter more than pixel-perfect styling. It just works, with fewer places for something to break. When you need advanced tracking, custom field logic, or a form that matches your brand exactly, manual embedding still gives you the most granular control. The right call comes down to your resources: pick speed when you’re short on time, pick control when the form’s appearance and behavior genuinely need to be exact.

WebsitePublisher.ai: a faster path when you’d rather skip the manual steps

If copying HTML snippets and hunting for the right widget area sounds like more friction than you want, WebsitePublisher.ai builds your pages from a plain-language description and includes email integrations among its 100+ built-in options, so a signup form can be part of the page from the start instead of a separate copy-paste step.

Instead of generating code in Mailchimp and pasting it into a widget, you describe the page you want, and the signup form integration gets wired in as part of that build. You keep visual editing control in your browser afterward, so styling tweaks don’t mean regenerating code from scratch. Start on the Free plan or check plan details on our pricing page to see which tier fits your project.

FAQ

Does Mailchimp make websites?

Yes, Mailchimp includes a built-in website builder, and you can connect a custom domain you already own to use with it. Publishing that site on your own domain, rather than a free mailchi.mp link, requires a paid Websites plan.

How do I add a “view in browser” link on Mailchimp?

Mailchimp automatically generates this link using the *|ARCHIVE|* merge tag in your campaign template, and it only populates the correct, working URL once the campaign is actually sent. You can preview how it will look from the Campaign Builder, but you can’t fully test the live link until after sending.

My links aren’t working in Mailchimp. How do I fix this?

Broken tracking links usually happen because spam filters interfere with Mailchimp’s tracking redirects, or because your destination site doesn’t accept the UTM parameters Mailchimp adds. Use full, descriptive text links, confirm your site accepts query parameters, and test with an actual sent campaign rather than a preview.

How do I connect a domain to Mailchimp?

In your Mailchimp account, go to the Domains section under your website or landing page settings and follow the prompts to connect a domain you’ve already registered elsewhere. If you need to register a new domain first, that’s a separate step outside Mailchimp, through whichever registrar or domain service you use.

Sources

• Add an Embedded Signup Form to Your Website | Mailchimp
• Troubleshoot broken links | Mailchimp