Grow Your Business | Heartie Queen Tamayo
Sharing is Stellar!
How to Integrate Thrive Landing Pages With MailChimp Sub-Groups

How to Integrate Thrive Landing Pages With MailChimp Sub-Groups

Two questions were recently asked by my client for me to do concerning MailChimp and Thrive Landing Pages.  

  • The first one is:  can you designate a group where collected email addresses go? 
  • And the second is:  can you segment incoming subscribers by identifying which landing page subscribers opted in from?

The answers to these questions didn't come out in a snap.  The bad news is that - it doesn't look like Thrive Themes integration with MailChimp allows designation of sub-groups (how the different freemiums are segmented).  But only one API integration.

We've checked forums, opened a ticket with MailChimp support and googled articles and resources online.  Answered to those questions didn't come easy.  I've got to get extremely creative!

I figured out the HTML coding to get the Thrive Landing Pages integrated with MailChimp sub-groups!

Here's the workflow for integrating HTML custom code into Thrive opt-in Landing Pages .

Disclaimer:  This is not an ideal solution as it is too time-consuming generating and editing the HTML custom code in Thrive Landing Pages.

Workflow to Generate and Insert Custom HTML Code into Thrive Landing Pages to Auto-Assign Leads to Specific Sub-Groups in MailChimp

Step 1.  Create the custom HTML code needed in MailChimp

  • First, we need to make sure the category of groups we need (e.g. Website Opt-ins) are included in the signup form. To do this, we need to be sure that category is designated as “visible”
  • Sign into MailChimp, select the list (e.g. Baby Formula Expert Updates List)
  • Under options (next to the “Stats” button), select "Sign up Forms"
  • Select "General Forms"
  • Highlight the category you want to work with (e.g. Website Opt-ins) and be sure they are marked as “Visible” in the Field Visibility Settings
  • Click "Save Field"
  • Go back to "Signup Forms" and navigate to "Embedded forms"
  • Select “Classic” (which has the most customization options)
  • Change the Header text from the Form Options form title
  • Uncheck the "show the required field indicators" box
  • Highlight the code from MailChimp and Copy/Paste onto your site

Step ​2.  Add the MailChimp code to Thrive Landing Page

  • Open the page and edit with Thrive Content Builder
  • Select a “Custom HTML” element and drag it to the location you want
  • Click the “Insert Custom HTML” green button. A white text box will appear. Paste in the code from MailChimp.
  • Now you need to edit this code to automate which group is selected.
  • Click on the green “Insert Custom HTML” button. A box will pop up. Paste in the code copied from MailChimp.
  • Then, click Save.

Step 3.  Edit the HTML code so the opt-in form looks the way you want and sends subscribers to the right place.

  • Select the new opt-in box and a black box will appear.
  • Click “Edit Custom HTML Code” button and you will see the code in a pop-up box.
  • Here you can make the following edits to the code.

TIPS: Do these edits one at a time and click “Save” so you can see if the code worked. Then move onto the next change.  If the code you edited did not work, then you will have to manually undo the last change you made so you don't accidentally damage the working code.

  • Change the Header text
    • As you can see in the example above, the heading was a separate text box in Thrive Theme. You should ALWAYS do this since there is more customization available for you in Thrive Theme than with custom HTML.  You can then delete the heading in the code box.
    • Open the custom code. Find the heading in the code. It will be near the top, flanked by <h2> elements. See highlighted portion below:
    • Delete the whole line of code between the <h2>Title Text</h2>.
    • Click "Save". The title is deleted! (This is also where you type changes to your title if you need to).
  • Change the "Subscriber" button to your preferred Call-To-Action
    • Find the piece of code at the very end for the “Subscribe” button.
    • You are going to change the text after the value= statement (highlighted below in green).
    • Replace the text with your preferred Call-To-Action button.

Default example:

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

</div>

Change code to:

<div class="clear"><input type="submit" value="SEND ME THE FREE CHEAT SHEET" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

</div>

  • Click "Save".
  • Select the sub-group you want automatically assigned
  • Locate the <input> tag for the group you want subscribers to be added to automatically.  In this tutorial, the Website Opt-ins category is selected.
  • Add the word "checked" just before the closing bracket and before the "label" statement.
  • This will force the form to check the box for this sub-group.

Default example:

<div class="mc-field-group input-group">

<strong>Website Optins </strong>

<ul><li><input type="checkbox" value="1" name="group[7649][1]" id="mce-group[7649]-7649-0"><label for="mce-group[7649]-7649-0">Formula Shopping Guide</label></li>

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

<li><input type="checkbox" value="4" name="group[7649][4]" id="mce-group[7649]-7649-2"><label for="mce-group[7649]-7649-2">Ingredients Cheat Sheet</label></li>

<li><input type="checkbox" value="64" name="group[7649][64]" id="mce-group[7649]-7649-3"><label for="mce-group[7649]-7649-3">Pop Up</label></li>

</ul>

Change Code to automatically check “Ingredients Cheat Sheet” Sub-Group:

<div class="mc-field-group input-group">

<strong>Website Optins </strong>

<ul><li><input type="checkbox" value="1" name="group[7649][1]" id="mce-group[7649]-7649-0"><label for="mce-group[7649]-7649-0">Formula Shopping Guide</label></li>

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

<li><input type="checkbox" value="4" name="group[7649][4]" id="mce-group[7649]-7649-2" checked ><label for="mce-group[7649]-7649-2">Ingredients Cheat Sheet</label></li>

<li><input type="checkbox" value="64" name="group[7649][64]" id="mce-group[7649]-7649-3"><label for="mce-group[7649]-7649-3">Pop Up</label></li>

  • Click "Save".
  • Hide the Other Sub-Groups (Website Optin and Health Care Provider for this tutorial) so that the user can't see these options
  • To hide groups on your embedded form code, locate the <div> container with the group code. This div will have a class statement after it. Add the following statement after the class statement, before the “>”: style="display:none"

Default example:

<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c960025d754c7bde793bce521_cd715b5d03" tabindex="-1" value=""></div>

<div class="clear"><input type="submit" value="DOWNLOAD YOUR FREE CHEAT SHEET" name="subscribe" id="mc-embedded-subscribe" ***insert here*** class="button"></div>

</div>

Change Code to:

<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c960025d754c7bde793bce521_cd715b5d03" tabindex="-1" value=""></div>

<div class="clear"><input type="submit" value="DOWNLOAD YOUR FREE CHEAT SHEET" name="subscribe" id="mc-embedded-subscribe" style=”background: #084B8A” class="button"></div>

  • Do the same for other sub-group categories
  • Then, click "Save"
  • Change the "Subscribe" button to the color you want
  • Visit Html Color Codes to get the code for the desired color button
  • In this example, a close approximation of that nice blue is: #084B8A
  • Locate the code for the subscribe button and insert style="background: #XXXXXX" after the button title, but before the class statement
  • Default example:

    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c960025d754c7bde793bce521_cd715b5d03" tabindex="-1" value=""></div>

    <div class="clear"><input type="submit" value="DOWNLOAD YOUR FREE CHEAT SHEET" name="subscribe" id="mc-embedded-subscribe" ***insert here*** class="button"></div>

    </div>

    Default example:

    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c960025d754c7bde793bce521_cd715b5d03" tabindex="-1" value=""></div>

    <div class="clear"><input type="submit" value="DOWNLOAD YOUR FREE CHEAT SHEET" name="subscribe" id="mc-embedded-subscribe" ***insert here*** class="button"></div>

    </div>

    • Click "Save"
  • The color is not exactly the same above, but you get the idea of how to change it.
  • Next delete the original Thrive Themes generated opt-in box.
  • Save your work.
  • Test the opt-in box to be sure subscribers end up in the correct sub-group.

Sources:

Here is the article from MailChimp describing how assign “hidden groups” (automatically assigned) and generate the HTML code for MailChimp embedded forms.

Advanced Form Customization in MailChimp: Preview of pieces of code that can and can’t be changed.

Excellent article from Thrive Themes showing how to integrate the code from MailChimp into your opt-in boxes .  And assign leads to a specific MailChimp group using Thrive Leads.

More general article from Thrive Themes about how to get that code into your pages.​

YouTube: Great short tutorial on how to change the subscribe button color.​

About the Author Heartie Queen Tamayo

Heart is the creator, engager, and implementer at Stellar Virtual Solutions. She uses the stellar powers of creative collaboration with her beloved clients to help them fully experience the joy of purpose, freedom, and profit. She also loves alliteration and run-on sentences. She's passionate about helping women entrepreneurs create freedom in their business and life through developing business processes and systems which help their business scale and grow.

follow me on: