How can I populate my MailChimp list via my Webflow site using signup form submission and Ajax form behavior?
TL;DR
- Disable Webflow’s default form action to prevent default submission.
- Get your MailChimp API key and Audience ID from your MailChimp account.
- Add JavaScript using
fetch()in the Webflow footer to send form data as JSON. - Use a backend proxy (Zapier, Make, or a custom server) to overcome MailChimp’s CORS restrictions.
- Test submission using browser DevTools and check MailChimp API response codes.
To connect your Webflow signup form to MailChimp while keeping Ajax form submission, you need to use MailChimp's API instead of the default Webflow form submission settings. This ensures smooth user experience without full-page reloads.
1. Disable Webflow’s Default Form Submission
- Select the Form Block and open its settings.
- Remove any action URL under "Form action" to prevent Webflow from submitting it to its default storage.
2. Get Your MailChimp API Key & Audience ID
- Go to MailChimp Dashboard > Account > Extras > API keys and Generate a key.
- Find your Audience ID by going to Audience > Settings > Audience name & defaults.
3. Add Custom JavaScript for Ajax Submission
Go to Project Settings > Custom Code > Footer Code and insert:
Use
fetch()to send form data as JSON to MailChimp.Handle user feedback (loading state, success, error messages) with JavaScript.
4. Adjust for CORS (Cross-Origin Resource Sharing)
- MailChimp’s API does not support direct Ajax submissions due to CORS restrictions.
- You’ll need a backend service (like Zapier, Make, or a custom server) as a proxy to forward form data.
5. Test & Debug
- Use DevTools Console (
F12on Chrome) to check for errors. - Look for MailChimp API response codes (e.g., 200 for success, 400 for bad requests).
Summary
To connect Webflow to MailChimp via Ajax, disable Webflow’s default form submission, get your API credentials, and use JavaScript with a backend proxy to handle CORS issues. This setup allows smooth form submissions without page reloads.