Skip to content

MailChimp Signup Popup With LayerSlider by Kreatura

MailChimp Signup Popup With LayerSlider by Kreatura

You know those annoying popups everyone hates?  Here's how to make 'um with MailChimp and LayerSlider by Kreatura!

LayerSlider by Kreatura recently added a popup feature, so I decided to try it out for creating sticky signup forms with MailChimp.  But I ran into an issue when I was on the last stages of implementing the MailChimp embed form because LayerSlider did not like MailChimp's JavaScript being entered into an html layer.  So I sought out help from tech wizard Mail-Mechanic Dan Wich and he developed a solution for me.  Dan is a MailChimp and WooCommerce expert who specializes in complex problem solving.

Because LayerSlider won't allow JavaScript in their HTML Module, he developed this custom plugin allowing us to add the form as a shortcode.

TopBarPopupExample

Lower Corner Mailchimp Kreatura

Step #1

You will need the Premium LayerSlider plugin installed (it's $25 for 6 months support, lifetime updates, single license).

You will also need to install the MailMechanic LayerSlider + MailChimp plugin.

Add a popup to your WordPress site with LayerSlider.  I started with the Popup Infobar Demo and Popup Modal Demo as a starting point for my popups.  You can find the demo sliders inside your WordPress LayerSlider dash where it says Template Store.

Step #2

Add whatever text you want like 'Newsletter Signup...' with a text layer.

You will need three bits of information to enter into the Mail-Mechanic shortcode fields;

  • Form Action
  • Anti-Spam Code Parameter
  • Optional parameter to change the text on your Submit Button

Go into your MailChimp Account's Embed Code page. Audience > Manage Audience > Signup Forms > Embed Forms.

Form Action
Anti-spam

These three pieces of text are punched straight into the shortcode like so:

[mailchimp_layersliders mailchimp_url="https://mail-mechanic.us20.list-manage.com/subscribe/post?u=3632c0fed48316cedf9064cfa&id=c2a888b543" antispam_code="b_3632c0fed48316cedf9064cfa_c2a888b543" submit_button_text="YES!"]

Customize the shortcode for your list and add it to an html module in layerslider.

Step #3

Here is some css used to stylize my two popups.  My top-bar popup is called layerslider_2 and the bottom corner one is called layerslider_3.

/* Make the demo horizontal LayerSlider (id #2) have a horizontal signup form */
#layerslider_2 form#mailchimp-signup {
  display: flex;
  justify-content: space-between;
	align-items: center;
}

#layerslider_2 .mailchimp-signup-email {
	margin: 10px 10px;
}

#layerslider_2 .mailchimp-signup-button input {
    padding: 10px;
    background: #e76e63;
    border-radius: 0;
    border: 0;
    font-family: "Abril Fatface";
    font-size: 20px;
}

/* Add margins above and below the email field to space the fields out on the bottom-corner LayerSlider */
#layerslider_3 #mce-EMAIL {
	margin-top: 16px;
	margin-bottom: 16px
}

/* Center YES button on bottom-corner LayerSlider */
#layerslider_3 .mailchimp-signup-button {
	text-align: center;
} 

Step #3

You will need to create two more sliders to get this finished.  The second one will have your success message.  The third one will have your error message.

For the error message create a text layer that has the class mailchimp-error.

MailChimpErrorLayerSlider

Turn on word wrap to keep your longer error messages from sprawling outside your popup.

Word Wrap

Almost done...

I don't want my popups showing on mobile devices so I turned set them up to hide on mobile.

LayerSlider Media Queries

This has been an exciting journey with MailChimp and LayerSlider by Kreatura!

It was a bit of work putting this solution together, but I'm glad I persevered because it looks great, and I can use it on across many sites for a small one time investment of $25 per site with bottomless updates.  And the design options I have to choose from with LayerSlider are fantastic. What a deal compared to signing on with a lead generation service that would charge each client of mine a monthly fee and provide a limited number of designs.

Contact

Leah Young
(253) 271-8115
leah@leah-young.com

Leave a Comment





Signup For My Quarterly Newsletter

For my newest findings on marketing for small businesses and individuals.

Thank you for Subscribing!

Error

Quarterly Newsletter Signup

For my newest findings on marketing
for small businesses and individuals

Thanks for signing up!

oops!