Thought I would leave this post here in case it helps anyone in future as the solution to this isn’t obvious or documented anywhere else that I could find.
If you want to use a Webflow form to handle Mailchimp signups then you can follow the official Webflow video here and it works fine. Where things get trickier is if you want to allow users to select checkboxes to opt in to groups. You can add checkbox fields to your Webflow form and follow the exact same instructions in the video, but when a user submits the form they will be added to all groups present in the form regardless of whether or not they checked the box.
To get around this limitation you can follow the instructions in this post. But before you carry on, please watch the video linked above as it explains context that you need to know.
OK, now that you’ve watch the video, you need to get some information from Mailchimp. You can see that my embed form has an email field for email, and 3 checkbox fields for my groups:
I’m going to copy my embed code into a code editor so that I can see and edit it properly. This is what it looks like now, and notice that I have highlighted the name properties of the 4 fields in my form as well as my form action POST URL:
You need to make a note of these values, so record yours in a text editor somewhere. In my case, I know that:
- My action URL is
https://xxxxxx-manage.com/subscribe/post?u=xxxxxxx&id=xxxxxx - My email field name is
EMAIL - My general newsletter field name is
group[68390][1] - My German newsletter field name is
group[68390][2] - My French newsletter field name is
group[68390][4]
That’s all you need from Mailchimp, so now you need to make your form in Webflow. I used the default Webflow form and added my checkboxes. Give your form an ID of mailchimp-form:
Important
Make sure you are giving your form element the ID, not its parent wrapper!
Next you need to go through and give your Webflow form fields the same name that your Mailchimp embed form fields have. I recorded mine above above.
For the checkbox fields, select the default Webflow Checkbox Field element and set its name. This will cause the elements within it to inherit the same name, which is what we ultimately want.
Important
Make sure to make your email field required!
Once you have set all your field names to match Mailchimp, you need to add some custom code to make this work. Add the code snippet below to the body code (not head code) of the page you have the form on. You need to replace the action URL in the code snippet with your own.
<script>
// Replace this with your own action URL
const ACTION_URL = 'https://xxxxxx-manage.com/subscribe/post?u=xxxxxxx&id=xxxxxx';
const mailchimpForm = document.getElementById('mailchimp-form');
const mailchimpFormInputs = mailchimpForm.querySelectorAll('input');
document.getElementById('mailchimp-form').addEventListener('submit', function () {
let submissionUrl = ACTION_URL;
mailchimpFormInputs.forEach(function (input) {
const type = input.type;
const name = input.name;
if (type === 'email' && input.value.length > 1) {
submissionUrl += '&EMAIL=' + input.value;
} else if (type === 'checkbox' && input.checked) {
submissionUrl += '&' + name + '=true';
}
});
$.ajax({
type: 'POST',
crossDomain: true,
dataType: 'jsonp',
url: encodeURI(submissionUrl),
data: {}
});
});
</script>
This is where it goes:
Now publish your site and you should be good to go. Users will only be added to the Mailchimp groups that they select. So when I enter this:
This pops up in Mailchimp:
Mailchimp groups with native Webflow form.
