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:

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

I went the opposite route.

Mailchimp provides a javascript that does this in a more robust way. We will build the Webflow form html so that this official script will work correctly rather than modifying or writing a script that works for a Webflow form.

Keep a reference to the embed HTML/CSS/JS extract that Mailchimp gives you. You will be copying and pasting from that a fair bit.

What you have to do is:

  • Copy the form id into the Webflow designer so that your form is named what Mailchimp is expecting. At the time of writing, this is “mc-embedded-subscribe-form”
  • You need at least one wrapping div with the class “mc-field-group”. Mailchimp wants one of these around each field so that it can display validation errors… the least you can get away withy is to add this to a div wrapping all fields.
  • Set the name property for each form field to match the Mailchimp names. These are the FNAME, LNAME…, MMERGE1 and so on. As in the original post, the groups are important that they also are named correctly.
  • Give the success and error divs that Webflow gives you the IDs from the Mailchimp embed extract. I.E. “mce-error-response” and “mce-success-response”
  • Copy the script at the bottom of the Mailchimp embed extract and paste it into the page custom code section (same as references by the original poster).

You are done.

The one caveat is that Webflow expects a different behavior for the success/error messages than Mailchimp. Webflow will hide the mail form and show the message in its place. Mailchimp will show the message but keep the form visible (resetting the contents).

There are two ways around this. You do some CSS trickery so that the success message becomes a modal in front of the form. Alternatively you download the Mailchimp script and hide your form by adding a line of code to it… but then you have to host that yourself and deal with ensuring that all works.

At the time of writing, I added $('#mc-embedded-subscribe-form').hide(); on a new line at L247 in that script.

1 Like

Thank you so much for this! The client ended up going a different way, so I just dropped a Constant Contact form in their site, and that was good enough.

Hi! Did you figure this out eventually? I’m in the exact same situation…

Hi @jasondark

Thank you for some great tips! As I don’t master code I am always so impressed with this skill. I got very close to achieving what I wanted following your steps. The form works and Mailchimp registers correctly into 1 group if I only check one of the boxes. However, as soon as I check more than one box, for instance 2, Mailchimp places me into all the groups. I have a total of 5 checkboxes for groups, and not 3 as in your example. Not sure if this affects anything, but I also have a separate consent box for e-mail and online marketing below (GDPR field not sorting to groups). Do you, or anyone else, have any pointers on what might cause this, and how I would have to alter the script to make it work?

Here is a read-only link to my project.

[EDIT] Just a quick note: Due to deadline issues I had to hide the form based on this tutorial, and go with the built in version - and then manual input to Mailchimp for now.

Thanks in advance, and best regards
Sindre

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

@jasondark Can you share exactly how you need to alter the script to handle FNAME as well?

Cause currently whenever someone fills out my Webflow form, the user gets inside all Mailchimp groups.

Here’s my read-only link.

Thanks for the good work!

Also very interested in the amendment of this code! Can’t figure it out myself :upside_down_face:

I think there are different ways of doing this, for us, we simply added a code block to the form with the checkbox code in it copied from the html code supplied by mailchimp, ours looked like this -

<li><input type="checkbox" value="2" name="group[number][2]" id="mce-group[7811]-7811-1"checked><label for="mce-group[7811]-7811-1">group-name</label></li>

</ul>
  • we then set it to hide and added ‘checked>’ meaning it was auto-applied. but we have different forms needing to go to different groups. Took me ages to work this out but transpired it’s quite straightforward.

Just remember if things arent working its usually because the ID/name is incorrect or conflicting.

Cheers