How to add mailchimp groups to the Divi optin module

How To Add Mailchimp Groups To The Divi Optin Module

In this Divi tutorial, you will learn how to easily add Mailchimp groups to the Divi Optin Module. Now you can segment and personalize your email marketing audience!

Step 1

In your Mailchimp account, go to “Audience”. Once you get to the Lists page, decide which list you want to add groups to and select it. Click on “View Contacts.”

Step 2

Under “Manage Contacts” and click on “Groups.” Then click the button to “Create Groups.”

Next, you will see a question, “How should we show group options on your signup form?” Knowing which page(s) I am planning to show the Divi Email Optin will help me determine which groups to set up here in Mailchimp.

The first 3 choices are used if you want the subscriber to see the groups and be able to make a choice. This will depend entirely on your situation. For example, if you want your subscriber to select topics on your blog that interest them, then choose the first option. If you want them to have a choice to select one option, choose the second or third options. DO NOT USE THE LAST OPTION.

I’ll walk you through two examples I use on my website, one with a hidden group and one with them shown as options.

Enter a name for the group category. NOTE: It is important to word this correctly since this is the heading that will be shown if you chose options 1-3 in the previous step.

Under the category, enter at least two group names. Three come up by default, but you can add or remove them.
Hit the save button.

NOTE: The group category is what we will see later in the Divi Optin Module, but the groups inside the category are where the subscribers will be added.

Step 3

Before we jump into Divi, we need to double-check on something to verify the fields are showing correctly and to help you understand what’s going on here.

Once again in the audience menu, click on “Signup Forms.” Select the first one called “Form Builder.” Here you will see your form with the fields you chose in step 2 and the groups from step 3.

You will notice the group fields are visible by default. That is very important, and the MUST BE VISIBLE here in Mailchimp (we can hide them later on your website). If needed, you can click on a field and choose to hide or show those groups in the menu on the right.

Step 4

Go to your website and add an “Email Optin” module to your Divi layout. We will use the Divi Optin module to add Mailchimp groups which we set up in steps 1-3. You can make any design adjustments here that you want, but that is not relevant to this tutorial.

Step 5

Go down to the “Email Account” toggle. Since this tutorial is specific to Mailchimp, then, of course, you should choose Mailchimp as the Service Provider.

Select the Mailchimp list that you just configured in steps 1-3. Add your Mailchimp API if you haven’t already and select “Fetch Lists” (this refreshes the connection). Reminder, the API is found in your Mailchimp Dashboard>Account>Extras>API Keys.

Step 6

Next, click on the “Fields” toggle. Here, I typically toggle on “Use Single Name,” but you can do whatever matches the fields you chose in step 2.

Select the toggle to “Use Custom Fields.”

Select the plus button to “Add New Custom Field.”

Step 7

Next, click on the “Fields” toggle. Here, I typically toggle on “Use Single Name,” but you can do whatever matches the fields you chose in step 2.

Select the toggle to “Use Custom Fields.”

Select the plus button to “Add New Custom Field.”

Step 8

In the field dropdown, choose the name of the group category you set up in step 2. Now that you see this in context, you may need to adjust the group category wording. Simply go back to your Mailchimp groups and make any changes.

Visible Option

Here you can see that subscribers can choose which group to join.

Hidden Option

PLEASE NOTE: The only way to add subscribers to a group is to have the option visible in the Mailchimp Form Builder (seen in step 3). HOWEVER, we can add some CSS to hide the entire group checkmark area on the contact form. This is the only way to make it work with groups. To do this, add a css class to the Optin Module’s advanced tab called “pa-hide-optin-group” and then copy and paste the following CSS snippet into your Divi Theme Options.

Step 9

In this final optional step, select the “Field Options” toggle. You may want to select your group names to make them checked by default for your subscribers. Here you will notice that some fields not editable, since we have established these settings within MailChimp and Divi is simply pulling in the data from there. NOTE: If you are hiding these fields as in step 8, YOU MUST ADD THE CHECK MARK for them to work.

7

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
19 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Max
Max
9 months ago

Thanks mate this helped a lot!

Pacha
8 months ago

Thanks, man! This was exactly what I was looking for!

One question: I used this on sign up forms within a blog post. The problem is that they show up in the RSS feed. So when clients receive an email from a new blog post, the sign up forms including the “hidden” fields are visible. Is there a way to hide the fields (or the whole form) in the RSS feed?

trackback
6 months ago

[…] Mailchimp Groups and Divi Optin Tutorial […]

Marcelo
Marcelo
3 months ago

There’s no “Use Custom Fields” Option in My Divi Optin Email Module. I’m a paid user of Divi, my theme is updated. Any clues? Thanks. Awesome Tutorial!

Erin
Erin
3 months ago

I just can’t get this to work 🙁
I checked the signup form, everything is showing up properly.

But when I choose ‘custom field’.. I don’t get an option for the group I created..

Erin
Erin

So, I tried that over and over again. ‘Remove’ then ‘Add’ then ‘Fetch Lists’

What FINALLY worked was to Save the module, Save the page, Refresh, And then go back to ‘Use Custom Fields’ WOOHOO!

Just documenting that fix for anyone else having trouble 🙂 Thank you! Thank goodness for this tutorial

Tania Friis
1 month ago

Hi I’m not a developer, but feel like a rockstar for making this work. Thanks for the detailed help. Two problems have occurred, though. 1) I am using groups (in this particular case) to add readers to a waiting list for a workshop, however the readers receive the normal MC confirmation email that readers should only receive when they sign up to receive the freebie on the regular list. How do I avoid this occuring and simply allowing people to get on my waiting list with no MC confirmation? 2) Secondly, now it seems that the regular signup flow doesn’t… Read more »

Tania Friis

Hi Nelson

I updated everything and now it all works perfectly.

Thank you for your assistance a guide.

/Tania

Tania Friis
Reply to  Tania Friis
1 month ago

Hi again Nelson I have two other questions: In step 2, you say I should add atleast two groups. I only have the need for one now, so I’ve listed one simply called ‘test’. In connection with step 3 that states I must not make the groups hidden in MC, I end up having two groups showing on my sign up form that my new subscribers should not see. 1) Why do I have to add at least two groups, can I not delete the ‘test’? 2) And is there a workaround for hidding the groups on MC and the… Read more »

Vid
Vid
10 days ago

Does this work if I try to subscribe an existing Mailchimp contact to a new Group? In other words, one contact form adds a subscriber to the Master Mailchimp audience and also adds him or her to a group. And a seperate contact form adds subscribers to another group. When the user ( with the same email address) subscribes on the second contact form, the expected result in mailchimp is one name in Audience and added to multiple groups.

Vid
Vid

Hmmm, I hunted all over the place in Mailchimp, couldn’t figure it out (yet). We don’t have a paid version of Mailchimp to seek support from them. Hope someone else knows this option in Mailchimp. Just so I understand – are you saying in Mailchimp, I need to change some setting that will enable Divi to add an existing subscriber to a new group? Divi support came back and said “Mailchimp” does not allow for updating existing contacts. ” which I don’t belive. When I pushed back to Divi support, they said “We will pass this over to our Support… Read more »

Vid
Vid

Nelson, Thanks for feedback. So, just to confirm – in your tests – you were able to update (or add a new group to an existing contact) using Divi contact form and following the procedure you laid out? I searched all over Mailchimp for any setting to enable/disable this, but could not find a thing ( of course, I am not perfect and could have missed something). Also, I saw this below comment from someone on ET community forum in October 2019 – ” See if this fixes it: https://gist.github.com/contemplate/65c … eba650c94d You have to replace their mailchimp integration file… Read more »

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Browse By Hashtags

Divi Divi hack Mailchimp Optin
0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart