A tutorial on how to add a mailchimp popup to wordpress

In this tutorial, I’m going to show you how you can quickly and easily add a Mailchimp popup to your WordPress site. Read on to learn how!

What is a Mailchimp Popup?

If you don’t already know, Mailchimp is a brilliant email marketing tool that lets you save email contacts (think newsletter), and design and send emails to those contacts.

I love Mailchimp. It’s what I use to power email marketing for SitesMonster. They have a free account that lets you store 2,000 contacts and send as many emails as you want!

The thing is, you have to actually gather email addresses before you start sending email newsletters to them.

Enter the Mailchimp popup.

A mailchimp popup displaying in a WordPress site

The Mailchimp popup that we’re going to add to our WordPress site is a fantastic way of gathering new contacts. Why?

  • It’s unobtrusive enough (slides in from the bottom right)
  • It looks fantastic
  • It works brilliantly, with very little coding

Create the Mailchimp Popup

Begin by signing in to Mailchimp. If you don’t already have an account, go ahead and create one now. It’s ok, I’ll wait!

Once you have signed in to your dashboard, look in the top left hand corner at the menu and…

Click Create, followed by Signup form from the drop down menu.

Inside Mailchimp showing a dropdown where you can create a signup form

You will see a new modal window displayed in the center of the screen, allowing a choice between creating an Embedded form, Pop-up form, and Signup landing page.

Click Pop-up form.

The popup modal inside of Mailchimp showing how to create a popup

Mailchimp will then ask you what audience you want to capture using this pop up form on your WordPress site. If you haven’t already created an audience within Mailchimp, now is your chance to.

You can have a separate audience for different forms within Mailchimp, but I like to save contacts from all of my forms to the same audience.

Next is the fun part! Actually designing the Mailchimp popup that we’re going to add to WordPress!

Design the Mailchimp Popup For Your WordPress Site

Another reason why I love Mailchimp is because it’s so flexible, yet so simple to use.

On the right hand side are all of the customization options to change the appearance of the popup.

Have a play around with these options until you are satisfied with the result.

I went with the lower right popup, but you can have the popup be displayed in the center of the screen or at the bottom of the window as a bar. The choice is yours!

Finish by adding a nice looking photo to your Mailchimp popup, so it looks eye-catching to your readers when shown in your WordPress site.

Mailchimp popup customize screen

Copy the Code to Your WordPress Site’s Header

We’re almost there! Once you are happy with the look and feel of your Mailchimp popup, you have to add the code to your WordPress site header.php.

Click the Generate Code button in the bottom right hand corner and copy the code snippet.

The code to copy and paste into your WordPress site to show the Mailchimp popup

This will display a modal window with the code to copy inside of it. It should look something like this:

<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"> </script> <script type="text/javascript">window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us18.list-manage.com","uuid":"3c9dcba3087c23c6f6169f1bb","lid":"2cf9263eb9","uniqueMethods":true}) }) </script>

Don’t actually copy and paste the above code into your header.php! That code is specific to SitesMonster.

What you now need to do is open up your WordPress theme’s header.php file.

Add the code from Mailchimp to your header, preferably to the top, so it looks something like this:

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title><?php wp_title('-', true, 'right'); ?></title> <?php wp_head(); ?> <!-- Mailchimp popup code --> <script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us18.list-manage.com","uuid":"3c9dcba3087c23c6f6169f1bb","lid":"2cf9263eb9","uniqueMethods":true}) })</script> </head>

Again, please don’t copy that exact code snippet as it is specific to SitesMonster. I’m just showing you my header.php in WordPress so you know where to copy and paste the snippet from your own Mailchimp popup form in WordPress.

Publish the Popup

Wait! There’s still one last thing you need to do before people start seeing the popup window on your WordPress site.

Go back to Mailchimp and click on the Publish button to save your popup and activate it.

Publishing a Mailchimp popup from the dashboard

And that’s it! You now have a beautiful looking Mailchimp popup form shown on WordPress site.

I capture thousands of email address yearly using this popup form, and now, you can too.

A Mailchimp popup shown in the bottom right hand corner of a WordPress site

🚀 Follow My Journey from 0 to 100,000 Monthly Pageviews!

Starting with this brand-new blog, I'm sharing everything I do to get from 0 pageviews to 100,000 monthly pageviews, every step of the way.
Zero spam, just great content. Unsubscribe at any time.

💬 Leave a comment

Your email address will not be published. Required fields are marked *

We will never share your email with anyone else.