How to setup popup box on your WordPress to collect email using MailChimp

Importance of collecting email

Collecting email address is first thing you should do when your website go live. It doesn’t matter what kind of website are you running, one thing is clear, we are all planning to make some money from the website eventually.  All the visitors are your customers, so it is good idea to communicate with them.  Collecting email is the best and only way to do it.

Also, another important aspect of collecting email address is that when your website goes down, you have way to communicate with the visitor and let them know what is going on.  Without email list, you have no way to communicate with them and you”ll probably lose them.  It is important to use third party email collecting service so that when you website goes down, your email database is safe.  There are few options to choose from.  But in this article, we are going to use free service called MailChimp.  MailChimp allows free service until your list grows to 2000.  So it is recommended for beginners.

When you first starting out, collecting email address is bit of challenge.  Because no one knows about your website.  But as you grow your website, you are also going to grow your email list. So it is good practice to start setup your website to collect the email address from the beginning.

There are many different ways to collect email list.  But the most simple and effective way is to setup popup box asking visitor to signup.  Using WordPress and Mailchimp, setting up popup box is very easy.  In this example, I will be showing you how to setup popup box on your WordPress website.

1. Signup with MailChimp

First thing you have to do signup for MailChimp service.  Like I mentioned before it is forever free until your email list is over 2000. Go to MailChimp and signup.

2. Create List

Go ahead and login to MailChimp after you signup.

First thing you need to do is create LIST.

Collecting email mailchimp-02

In order to complete your LIST, it is required you to fill in your mail address.  You can use your home address, but it is not recommend for security reason.  I’m sure you want to keep your home address private.  One option is to signup for PO Box and use PO Box address.  Or if you have office, you can use your office address.

3. Download Popups plugin

There are  many ways to collect emails.  But the easy way to collect email is creating a popup, so that every time new visitor visit your website, email signup box will popup.  This can be done easily with WordPress plugin called Popups.  

Collecting email mailchimp-03

If you are not sure how to install new plugin, just go to PLUGINS section in the left column and go to ADD NEW.

Collecting email mailchimp-04

After you install the plugin, go ahead and activate it.

4. Get popup code

Now go back to MailChimp, and go back to your LIST.

Collecting email mailchimp-05

Next to your LIST you just created, there is drop down menu.  Click on Signup Forms.

Collecting email mailchimp-06

Select Subscriber pop-up.

Collecting email mailchimp-07

Here we are going to create the popup box.

In DESIGN section, we are going to choose default layout.  But if you like to add photos to your popup, you can by choose different layout.

Collecting email mailchimp-08

On FIELDS section, we are going to choose email field only.  Study shows that if you only have email address field, more visitor likely to signup.  Because most of the visitor don’t like to fill out other information.  But if you like to add First and Last name field, you can. You’ll noticed that email address field is required.

Collecting email mailchimp-09

In CONTENT section, you are going to write short instruction to tell the visitors to signup.  If you post your blog regularly, you can ask them to signup so you can update them when new blog is posted.

Collecting email mailchimp-10

Last in SETTING section, we are going to leave it at default.  In this section, you can delay the popup when visitor visit your website.  If you like to give the visitors few seconds to look around the website before you push your popup, you can using the delay option.  Also you can change the maxim size of the popup box here.

Collecting email mailchimp-11

Finally, click PUBLISH.  Then click VIEW CODE.

Collecting email mailchimp-12

When you click on VIEW CODE, you’ll see bunch codes.  Go ahead and copy all the codes. It is important that you copy everything.

Collecting email mailchimp-13

5. Past code to Popup plugin

Now go back to your WordPress admin page.  Under Popups, click on ADD NEW.  It will create a new popup.

Collecting email mailchimp-14

Fill in the TITLE and paste the code you copied in previous step. Before you paste, you need to choose TEXT mode instead of Visual mode. (see the screenshot)

Collecting email mailchimp-15

When you are done, click PUBLISH.

6. Test the popup

Now test the popup by going to your website.  You should be able to see the email signup popup right away.  If not, try to REFRESH your browser.

After you test the popup, go ahead and test it using your email address.  Put in your email address to make sure the process is working correctly.  Also if you don’t know how the MailChimp works, it is good idea to see it for yourself.

7. Good luck

That is all.  It is very simple.  Good luck!


Recently, Mailchimp mades 2 changes to their system. Starting October 31, single opt-in will become the default setting for all MailChimp hosted, embedded, and pop-up signup forms. So what is that mean? It means that your popup opt-in you setup might not work anymore.  If your popup opt-in don’t work anymore, check this post. 

Leave a Reply

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