Why isn't the new email collection form in the hero header of the Webflow home page working with Mailchimp integration?
TL;DR
- Ensure Mailchimp API key is valid and the form is linked via the correct Form Action in Webflow.
- Match all required Mailchimp fields (e.g. email, first name) with properly named inputs in your Webflow form.
- If issues persist, use a custom Mailchimp form action URL via embedded form settings.
If your email collection form in the hero header isn't working with Mailchimp integration, it's likely due to issues with form settings, Mailchimp connection, or missing required fields.
1. Confirm Form Action is Connected to Mailchimp
- Go to Project Settings > Integrations and ensure Mailchimp API Key is connected properly.
- In the Form Settings on the homepage, confirm the form is linked to Mailchimp under the Form Action dropdown.
- If no Mailchimp list is showing, it means the API key might lack the right permissions or is invalid.
2. Match Mailchimp Field Requirements
- Check your Mailchimp Audience settings for required fields. Common ones are email, first name, last name.
- Webflow must send all required fields—if Mailchimp expects more than just the email address, the form will fail silently.
- If your form only has an email input but Mailchimp requires a first name, the submission will not go through.
3. Validate Field Naming Conventions
- In Webflow, each input should have a Name attribute that matches what Mailchimp expects (especially if mapped manually).
- For example, if Mailchimp uses “EMAIL” as the field tag, make sure your email input is named EMAIL.
4. Confirm Form Submission Success
- Try submitting the form and check under Project Settings > Forms > Form Submissions to see if Webflow is capturing it internally. If so, it's not reaching Mailchimp.
- Alternatively, test the form in Preview and use browser DevTools to check for error messages in the network tab.
5. Use a Custom Mailchimp Form URL (If Needed)
- As an alternative, use the embed method:
- In Mailchimp, go to Audience > Signup Forms > Embedded Forms.
- Copy your Mailchimp form action URL from the embed code (it starts with
https://...list-manage.com/subscribe...). - In Webflow, select the form and change Form Action to Custom, then paste this URL.
Summary
To fix the Mailchimp integration in your hero header form, ensure the form is correctly connected using a valid API key, all required Mailchimp fields are present and matched, and there are no submission errors. If integration issues persist, use a direct Mailchimp embed form action URL.