What are the steps to connect Mailchimp signup forms to a website on Webflow?
TL;DR
- Embed Mailchimp's form in Webflow using the Embed element and Mailchimp's full code for a quick setup.
- Alternatively, use a Webflow form by setting its action URL to Mailchimp’s, matching Mailchimp’s required field names, then test to ensure submissions go to your Mailchimp audience.
To connect a Mailchimp signup form to your Webflow website, you can either embed a Mailchimp form directly or integrate a Webflow form with Mailchimp using an action URL.
1. Decide Between Embed or Webflow Form Integration
- Embed Mailchimp Form: Mailchimp handles everything, including design and validation.
- Webflow Form with Mailchimp Action URL: Lets you style the form within Webflow while still sending data to Mailchimp.
2. Create a Mailchimp Signup Form
- Log in to your Mailchimp dashboard.
- Go to Audience > Signup forms.
- Choose Embedded forms.
- Customize the form fields if needed.
- Copy the form action URL and hidden
inputfields (you’ll only need some of this for manual integration).
3. Embed the Mailchimp Form (Option 1)
- In Webflow, drag in an Embed element from the Add panel.
- Paste the full embed code from Mailchimp.
- Adjust styling in Mailchimp if needed before copying the embed code.
- Note: Keep spam protection settings (like bot honeypots) enabled unless you're customizing.
4. Use Webflow Form with Mailchimp Action URL (Option 2)
- In Webflow, add a native Form Block.
- Select the Form element, go to the Settings panel.
- In the Form action field, paste the Mailchimp form’s action URL (e.g.,
https://xyz.us1.list-manage.com/subscribe/post?u=XXXX&id=YYYY). - Set the Method to POST.
- Rename the field names to match Mailchimp’s field names:
- Default is usually
EMAILfor the email field. - Use hidden fields for other inputs required by Mailchimp (e.g.,
u,id, and anti-spam fields).
5. Test the Form
- Publish your Webflow site.
- Submit a test email to check if it appears in your Mailchimp audience.
- If nothing happens, inspect the network activity in the browser’s dev tools to see if the request is getting blocked or misconfigured.
Summary
To connect Mailchimp to a Webflow site, either embed Mailchimp’s form directly or connect Webflow’s native form using Mailchimp’s action URL and correct field names. The embedded approach is simpler, while the Webflow form offers more design customization.