How can I populate my MailChimp list via my Webflow site using signup form submission and Ajax form behavior?

To send Webflow form submissions directly to Mailchimp and keep the form submission behavior seamless with AJAX, you’ll need to bypass Webflow’s form handling and connect the form to Mailchimp’s API or embedded form endpoint.

1. Set Up Your Mailchimp Audience and Form Action URL

• In Mailchimp, go to Audience > Signup forms > Embedded forms.
• Locate the form action URL inside the provided form embed code. It looks like:
  https://<dc>.list-manage.com/subscribe/post?u=XXXXXXX&id=YYYYYYY
• is the Mailchimp data center (e.g., us6, us17).
• u= and id= are unique to your account and list.
• You'll need this URL to send submissions via AJAX.

2. Create Your Webflow Form

• Drag a Form block into your Webflow page.
• Give inputs proper names:
• Email field name should be: EMAIL
• You can also include FNAME, LNAME, etc., matching Mailchimp merge tags.
• Remove or disable Webflow’s default form handling:
• In Form settings, remove the action URL if one is set.
• Webflow does client-side AJAX form submission by default when no action is provided.

3. Add Custom JavaScript for AJAX Submission

• Go to Page Settings > Before tag and add custom JavaScript.
• This script should:
• Capture the form submit event.
• Prevent default submission.
• Send a POST request to the Mailchimp endpoint using FormData.
• Append &c=? to the URL to make it a JSONP request since Mailchimp doesn’t support CORS.

Important Notes:

• Mailchimp’s form endpoint requires JSONP, not regular AJAX (XHR/fetch), due to cross-origin restrictions.
• jQuery is needed unless you polyfill JSONP support.

Use this pattern (with your real action URL):

<script>  $(document).ready(function() {    $('#your-form-id').submit(function(e) {      e.preventDefault();      var $form = $(this);      var url = 'https://<dc>.list-manage.com/subscribe/post-json?u=XXXXXX&id=YYYYYY&c=?';      $.ajax({        type: 'GET',        url: url,        data: $form.serialize(),        dataType: 'jsonp',        contentType: "application/json; charset=utf-8",        success: function(data) {          if (data.result === 'success') {            // Success response            alert('Thank you for subscribing!');          } else {            // Error response            alert(data.msg);          }        },        error: function(err) {          alert('Could not connect to the server. Please try again later.');        }      });    });  });</script>

4. Match Input Field Names to Mailchimp Tags

• Mailchimp requires specific field names:
• Email: EMAIL
• First Name: FNAME
• Last Name: LNAME
• In Webflow, select each input field and set the Name attribute accordingly.

5. Test Your Signup Flow

• Publish your Webflow site.
• Open the published page and test the form.
• Ensure that:
• The AJAX request triggers properly.
• You get a success or error response from Mailchimp.
• The user isn't redirected or reloaded.

Summary

To populate your Mailchimp list using Webflow with AJAX:

• Use Mailchimp’s embedded form action URL with JSONP enabled.
• Structure your form fields with the correct names matching Mailchimp tags.
• Disable native Webflow submission and post data using jQuery's AJAX with GET + jsonp.
• Handle responses manually to show feedback without page reloads.