Streaming live at 10am (PST)

How to use a Webflow form for Mailchimp signups with groups

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:

  1. My action URL is https://xxxxxx-manage.com/subscribe/post?u=xxxxxxx&id=xxxxxx
  2. My email field name is EMAIL
  3. My general newsletter field name is group[68390][1]
  4. My German newsletter field name is group[68390][2]
  5. 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:

image

Important
Make sure you are giving your form element the ID, not its parent wrapper!

image

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.

image

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.
image

image

Important
Make sure to make your email field required!

image

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&amp;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:

image

This pops up in Mailchimp:

2 Likes

Hi @jasondark Thanks for setting up this helpful tutorial.

Im currently trying to get the “Users will only be added to the Mailchimp groups that they select” part right…

I’ve followed every step correctly (i believe) and when the form is filled out, the user gets placed into both “mailchimp groups” regardless of what checkbox is checked. Any ideas on what Im missing here?

https://preview.webflow.com/preview/the-source-texas?utm_medium=preview_link&utm_source=designer&utm_content=the-source-texas&preview=f4311a5a522a12003d4e265b6bd68a19&mode=preview

Hi @jasondark this tutorial has proven very helpful, but I’m not getting the results as you described. Mailchimp still sees ALL checkboxes being selected even if they are not, thus adding ALL groups to a user profile.

I see @Charles_Dew is having the same issue.

Has there been a change that we need to address? Below is my preview link.

https://preview.webflow.com/preview/artscenter?utm_medium=preview_link&utm_source=designer&utm_content=artscenter&preview=303d511498406d6ea52d0e7f370658d2&pageId=5f0890b4bca68d199c37efb0&mode=preview

Thanks!

Hey you seem to have missed this step:

On your published site I can see this error in the console:
image
Which is being caused by the script not finding any element with the ID mailchimp-form.

thanks for that! I made the change (it was reverting to the previous ID), but the submitted form is still registering all boxes as checked. Any ideas?

https://preview.webflow.com/preview/artscenter?utm_medium=preview_link&utm_source=designer&utm_content=artscenter&preview=d3c6208b3daa5807ece2e50884eac38d&pageId=5f0890b4bca68d199c37efb0&mode=preview

At a guess it could be that you have the FNAME and LNAME fields which the script isn’t set up for:

You would need to alter this part of the script to handle those 2 new fields:

 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';
    }
});

Can you please share how this can be written in code?

I tried for several hours to make this work and for it to not submit checkboxes checked even if they are not.

Besides the email and checkboxes, I also have a First name form field called FNAME.