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.
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.
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.
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.
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.
This will display a modal window with the code to copy inside of it. It should look something like this:
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:
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.
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.