Mailchimp Groups

Design help Custom code
1

I’ve successfully used the Mailchimp guide to integrate a simple first name, last name, and email form that goes right into Mailchimp.

I would love to be using Mailchimp groups as well. Mailchimp has a tutorial on their website explaining how to automatically assign groups to people who sign up using a specifically tailored embedded form.

Is it possible to use a Webflow form to sign a user up for a specific Mailchimp group? Or is there some custom code I can insert that would do this?

2

You can use segments by adding a hidden field, give that field a merge tag that tells you the segment (or group) you want it to be. Then in Mailchimp, you can filter on that merge tag.

3

Mailchimp doesn’t show merge tags for groups in the UI it gives you to manage merge tags.

Just so I understand correctly, are you saying to create an arbitrary text field and assign it a merge tag to then be used in Webflow?

4

Bumping this one - can you provide some more clarification/detail, @Diu?

5

You can do it manually too, and give the page title to see where people come from. Use an embed to use this in your form.

<input type="hidden" name="[MERGE FIELD NAME, LIKE MMERGE3]" id="mce-[MERGE FIELD NAME, LIKE MMERGE3]" value="<?php the_title(); ?>">

6

@Diu, how do I actually put that embed into webflow?

7

8

Thanks @samliew, I’ll try that. I was hoping to use Webflow’s form builder and combine that with the code changes suggested by MailChimp, allowing me to keep the design within the Designer. But, I suppose I can try and customize the embedded code to look right. Is that the run of it?

9

Just put the embed code within the same form.

If you need help customising the custom code elements, please show us what you have done.

10

Wow, it almost totally works. I plucked the Group selection DIV from the embedded form and stuck it inside the Webflow form as an embedded component (right before the Submit button), and the data does indeed get sent through.

Trouble is, it somehow registers ALL the group options as checked, even though the embedded code I inserted clearly only has one option checked. I know that usually works because if you put the entirety of MailChimp’s embedded form code into a separate Container in Webflow, it functions correctly and only has one option checked (which consequently manifests itself as the only group assigned to that user in MailChimp).

For some reason, separating the specific Groups/Segments DIV from the rest of that code causes Webflow to consider all of the options checked (which manifests itself as ALL groups being assigned to that user in MailChimp).

Check it out:

Public Page: http://gamecake.webflow.io/emojicharades
Read Only Designer: https://preview.webflow.com/preview/gamecake?preview=d50fe8c3b0d4a964c75c7a6ce3e3b64e

Here is the entirety of the MailChimp embedded form that I am plucking the specific DIV from: <!-- Begin MailChimp Signup Form --><link href="//cdn-images.mailchimp.com/emb - Pastebin.com

11

Bump, @samliew! Any idea if this is a Webflow bug or something that I’m doing wrong?

12

There is nothing in the embed block.

I cannot view pastebin or personal storage links, you could use the “preformatted text” option in the editor to paste it here.

13

Hey @samliew, I had to remove it because I needed to publish some other changes live. I didn’t know if there was a staging area that could be used for a Read Only Preview, so apologies for that.

Right after I posted this though, I was messing around with various hacks and I ended up getting it to work! Simple solution - just remove the list options that I didn’t want checked. That did the trick, and now users are only getting placed into the single group that I want them to. This will work well enough for now, though I am curious why just the existence of a checkbox meant that Webflow would treat it as checked.

2 Likes
14

Hi @Vexir, I’m doing the same thing on a client’s site, but haven’t been able to fix this last issue where it adds the user to every group (not just the ones they checked). You said above “just remove the list options that I didn’t want checked.”

I’m not following, can you clarify? Do you mean remove the list options in Webflow or Mailchimp?

Thank you so much!

15

Remove it from the embedded code that Mailchimp generates.

16

Sorry @Vexir, still not following. Here is the code from my embed in Webflow that came from the code that Mailchimp generated. If I remove any list options, they won’t show up on the page and people can’t check them. What am I missing? I think I’m misunderstanding you. Thanks so much for your help!

<input type="checkbox" value="1" name="group[14297][1]" id="mce-group[14297]-14297-0"><label for="mce-group[14297]-14297-0" class="field-label-checkbox w-form-label">News &amp; Current Events</label><br>
<input type="checkbox" value="2" name="group[14297][2]" id="mce-group[14297]-14297-1"><label for="mce-group[14297]-14297-1" class="field-label-checkbox w-form-label">Becoming a Grantee</label><br>
<input type="checkbox" value="4" name="group[14297][4]" id="mce-group[14297]-14297-2"><label for="mce-group[14297]-14297-2" class="field-label-checkbox w-form-label">Philanthropy’s Role in the Transition Movement</label><br>
<input type="checkbox" value="8" name="group[14297][8]" id="mce-group[14297]-14297-3"><label for="mce-group[14297]-14297-3" class="field-label-checkbox w-form-label">Becoming a Donor</label><br>
<input type="checkbox" value="16" name="group[14297][16]" id="mce-group[14297]-14297-4"><label for="mce-group[14297]-14297-4" class="field-label-checkbox w-form-label">Transition and the Public Sector</label><br>
<input type="checkbox" value="32" name="group[14297][32]" id="mce-group[14297]-14297-5"><label for="mce-group[14297]-14297-5" class="field-label-checkbox w-form-label">JTF Updates</label><br>
17

I think perhaps you’re misunderstanding the intention of my code and the problem I was trying to solve. I wanted to remove people’s ability to check or uncheck boxes so that the choice of subscriber group was automatic. The existence of the option was causing webflow to automatically mark them as checked, so removing the option solved the problem for me.

18

Thanks for the reply Vexir. Appreciate your time. Never could figure out what the issue was, but in the end I simply dropped the Mailchimp naked form code in as an HTML embed and styled it using my Webflow styles.

Works like a charm!

19

Hi there,

I’m having the same problem that you both were having. @fmcausby, could you explain how you ended up getting the subscriber into the correct group in mailchimp?

I’ve got a hidden field that generates an ID for the page where the subscriber fills out the form, so then I want to add the subscriber to the ID that corresponds to the same ID that I created in mailchimp. I’ve been trying to use a zap, but it looks like the zap is limited in that it can’t search and match the subscriber ID to the group name in mailchimp.

How are you connecting the hidden field in the form to mailchimp?

Here’s the read only link (you have to go to one of the top bill pages to see the form): https://preview.webflow.com/preview/killthebill?preview=1cf62348ad758e4a8f3067d3d7750145

20

Hi Kelly,

I wasn’t using a hidden field in MC or messing with the form ID. But if you’re having the trouble I was having, whenever I tested my form (no matter what groups I selected on the live form) it put me in ALL the groups.

My solution was to use Mailchimp to generate an embedded form (like this). I used the “naked” form so there was no CSS or JS included. I then put that in my page using an HTML embed in Webflow and styled it with my Webflow styles (exported the code of my page and grabbed the classes for each element and added them to the mailchimp code so it looked like what I formatted in Webflow).

Hope that helps!

1 Like