What are the steps to connect Mailchimp signup forms to a website on Webflow?
TL;DR
- Copy the Mailchimp form action URL from the embedded form settings.
- Add a Form Block in Webflow and ensure fields match Mailchimp’s form.
- Paste the form action URL in Webflow’s Form action setting and set the method to POST.
- Match Webflow field names with Mailchimp field keys using custom attributes.
- Publish and test the form to confirm submissions appear in Mailchimp.
To connect a Mailchimp signup form to your Webflow website, you’ll need to integrate Mailchimp’s form action URL into your Webflow form settings. Follow these steps:
1. Get Your Mailchimp Form Action URL
- Log in to Mailchimp and go to Audience > Signup forms > Embedded forms.
- Under Form fields, customize the fields if necessary.
- Copy the form action URL from the
<form action="...">tag in the form code.
2. Add a Form in Webflow
- In Webflow, add a Form Block from the Add Panel (
A). - Ensure the form fields match the Mailchimp form (e.g., Email, First Name, etc.).
3. Update Webflow Form Settings
- Select the Form Block, then go to the Element Settings (cog icon).
- Under Form action, paste the Mailchimp form action URL.
- Change Method to POST.
4. Match Field Names
- Make sure Webflow form field “name” attributes match the Mailchimp field names (e.g.,
EMAIL,FNAME). - Click on each field, open Custom Attributes, and set name to match Mailchimp’s field keys.
5. Publish and Test
- Publish your Webflow site and test the form by submitting an entry.
- Check if the submission appears in your Mailchimp audience list.
Summary
You need to copy the Mailchimp form action URL, add it to your Webflow form settings, match the field names, and test the setup after publishing. This ensures your Webflow form correctly syncs with Mailchimp.