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

SCRIPT THAT WORKS FOR ANY NUMBER OF FIELDS ON THE FORM

Use case: Pop-up form on webflow that allows users to sign up to download a resource and opt-in to our newsletter. The form adds users to our audience and to one or two groups depending on whether they checked the newsletter sign up checkbox. The form asked for email and first name. The checkbox that adds users to the ‘resource download’ group is hidden and checked by default.

The solution above worked but I had to change it to add the name field. I adapted the script to allow now for ANY number of fields on the form. All you have to do is ensure that the form field names are the same as the embedded form fields in Mailchimp for it to work - see the example posted above for email.

<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");

  mailchimpForm.addEventListener("submit", function () {
    let submissionUrl = ACTION_URL;
    mailchimpFormInputs.forEach(function (input) {
      const type = input.type;
      const name = input.name;
      const value = input.value;
      if (type != "checkbox" && value.length > 1) {
        submissionUrl += '&' + name + '=' + value;
      }
      if (type === "checkbox" && input.checked) {
        submissionUrl += '&' + name + '=true';
      }
    });
    $.ajax({
      type: "POST",
      crossDomain: true,
      dataType: "jsonp",
      url: encodeURI(submissionUrl),
      data: {},
    });
  });
</script>

The script above checks for fields that are not checkboxes; i.e. email, text, number, etc… and appends their name with their value to the submission url.

I hope that helps and thanks @jasondark for posting the original solution.

see the script I posted for the full solution, but basically you check for fields that are not checkboxes and append them to the submission url using their names and values:

    mailchimpFormInputs.forEach(function (input) {
      const type = input.type;
      const name = input.name;
      const value = input.value;
      if (type != "checkbox" && value.length > 1) {
        submissionUrl += '&' + name + '=' + value;
      }
      if (type === "checkbox" && input.checked) {
        submissionUrl += '&' + name + '=true';
      }
    });

@db-assi Thank you for the javascript. It worked!

When I tried to make email the required field, it no longer worked. It looks like one of the checkboxes has to be a required field.

Is there a workaround? Could the code below be tweaked to work with the Mailchimp groups?

Any help is greatly appreciated. Thank you.

<script>
// CODE TO USE
$(document).ready(function () {
  setTimeout(() => {
    $(".checkbox-item-list").eq(2).click();
  }, 800);
});</script>

Hello everyone!

I somehow managed to get this working for a recent client :muscle: Mailchimp groups with native Webflow form.

What I did:

  1. Design your Webflow form and add radio buttons for the groups and also make them required
  2. Go to Mailchimp and create your form fields + group SELECT RADIO BUTTONS FOR THE GROUP
  3. Make sure all name fields match the Mailchimp tag fields
  4. Go to the Mailchimp Embedded forms page
  5. Copy and paste the action url from Mailchimp to the Webflow form settings
  6. Find the group code inside the Mailchimp embed page
<div class="mc-field-group input-group">
    <strong>Group Name </strong>
    <ul><li><input type="radio" value="1" name="group[85081]" id="mce-group[85081]-85081-0"><label for="mce-group[85081]-85081-0">Event - 9am CET</label></li>
<li><input type="radio" value="2" name="group[85081]" id="mce-group[85081]-85081-1"><label for="mce-group[85081]-85081-1">Event - 5pm CET</label></li>
</ul>
</div>
  1. Go to Webflow and open your radio button settings MUST BE THE DIV THAT WRAPS THE RADIO AND THE TEXT

Screenshot 2021-09-13 at 14.19.41

  1. From the groups code, copy the name and paste inside Webflow Group name where the red rectangle is. This group name is the same for all radio buttons
  2. Next, copy the values and paste inside choice value. The values are in the group code from Mailchimp
  3. Open the radio, not the div that wraps all, but the radio inside the div. See bellow

Screenshot 2021-09-13 at 14.27.24

  1. Go to setting > id > add the ids from the group code from Mailchimp. The ids are going to look like this > mce-group[85081]-85081-0 > if you have two, the second will look like this > mce-group[85081]-85081-1

Screenshot 2021-09-13 at 14.29.38

This should do the trick. Feel free to ask any questions

Piter :webflow_heart: