Let's eave no stone unturned when it comes to email marketing.

Is there really a free plugin that allows you a create a Mailchimp email popup on click? Yes, it exists, but it took a bit of time to find out the right one for you. If you don’t want to squander a whole afternoon like I did, read on to find out what the plugin is, and get your email popup running.

Prerequisites

For this project, I’m using:

  • Mailchimp, because it doesn’t make sense to pay $29 per month for an email marketing service if you are still in the beginner phase. I remember Abagail and Emylee from Boss Project used Mailchimp for a long time before switching to fancier tools.
  • WordPress, because it’s the CMS I am using, but more importantly, there are plugins for any purposes you could have dreamed of.
  • CSS. This tutorial does require a bit knowledge of CSS, but it’s optional and nothing complex. You can teach yourself some basic CSS in less than two hours here.

Why a Mailchimp email popup on click?

It is widely known that email popup is more successful than traditional embedded form in capturing emails and raise your conversion, but it is also a controversial method.

Many people complain that email popups are annoying, and that’s a valid concern. After all, successful email marketing is all about appearing in the right place at the right time, with the right content.

Annoyed customers may mean less conversion rate. There’s no point in shoveling an email popup into your site visitors when they have just landed on your webpage for the first time.

If you are worried about that but you don’t want to miss out on the amazing power of email popup, then using one that triggers only on click is a good solution.

People who click on a subscribe button are more often than not invested in your offerings. Moreoever, the Zeigarnik effect makes them more likely to continue with the opt-in. After all, we don’t want unfinished task.

Email marketing is a number game. By utilizing an email popup that appears on click, we make sure that we don’t lose track of any potential customers. That’s especially important for small businesses, when every email address count.

What does my Mailchimp popup on click look like?

Example of Mailchimp popup on click
How my Mailchimp popup on clicks looks like

There are many ways to set up a Mailchimp popup on click, but here is what mine looks like for the time being. It will only appear on my homepage, when someone clicks on the word “Subscribe” in the header navigation menu.

Plugin requirements

During the exploration process, I realized that it’s such a pain to find the perfect free WordPress plugin that allows me to install a Mailchimp popup on click.

Most of the email popup plugins require upgrading to the pro version in order to integrate with Mailchimp. The ones which support Mailchimp for free doesn’t support popup on click. The ones which support both email popup and Mailchimp for free turn out to be so hard to use.

So here comes the requirements:

  • Free, or freemium.
  • It should ideally be a one-stop-shop that support a variety of popup features, including popup on click. After all, it doesn’t make sense to install several plugins, each of which does one popup feature.
  • It should allow me to integrate with Mailchimp for free. Seriously, what’s the use of an optin plugin if it doesn’t allow you to connect to your trusty email service?
  • It should be easy to use, but this is a lower priority compared to the previous three requirements.

The winner in Mailchimp popup on click is

Hustle. If price is not an issue, I would have gone with OptinMonster since any WordPress plugins with Syed Balkhi’s involvement are a breeze to use. Anyway, Hustle is developed by WPMU Dev, a WordPress premium plugin maker that I trust so I can bear with its less than stellar user interface.

How to add a Mailchimp popup on click to your WordPress site

Step 1: Install and activate the Hustle plugin.

This step is so simple so I’m not going to waste your time here. However, if you need a refresher, check out the tutorial at WPBeginner.

Step 2: Create your first popup.

After activating the plugin, you will see “Hustle” at the left sidebar of your WordPress admin dashboard. Mouse over it to open up a flyout menu and click on “Pop-ups”.

Now you will land at the “Pop-ups Dashboard”. Click on the “New Pop-up” button to create your first pop-up. There are three tabs that control the function and appearance of your popup:

  • Content
  • Design
  • Display Settings

Step 2a: Control the content of your popup

The “Content” section is very self-explanatory. The only things that you need to pay attention to is email collection module and manage form elements.

The email collection module lets you connect to different email services. If you are on a free plan, you can only use one integration at a time, but that’s enough for me.

To integrate Hustle with Mailchimp, or any email service, click on the button “ADD ANOTHER SERVICE” to open a dialogue.

From the drop-down list, choose the email service you want to connect to. Then enter your API key available on your Mailchimp account. Click “Update Service” to confirm the settings.

The next step is to click on the “EDIT FORM” button to change your form elements. Different location of the popup calls for different form content.

Mailchimp popup on click—edit form fields

For example, it’s probably too much to ask someone on the first page view to provide anything other than an email address. On the other hand, people who are on the fourth pageview, or who are viewing your white paper may be more likely to give your other information.

Step 2b: Control the display settings of your email popup

I won’t bother with the “Design” tab for now because it is all up to you. What really matters is: How do you get your email popup to display on certain pages under certain triggers? That when the “Display Settings” tab comes into play.

For this project, go to the “Pop-up triggers” section and click on the “Click” tab. There are two ways to trigger your popup to display on click:

  • use shortcode to render a clickable button.
  • alternatively, enter the name of the ID or class of the element that, once clicked, will trigger your popup.

The class container of my element is icon–newsletter, so that’s what I entered.

Mailchimp popup triggers

Step 3: Add the class name to the trigger element

Since I want the popup to appear when a visitor clicks on an element of my header menu, I go to Appearance >> Menus and navigate to the relevant menu

Click on the down arrow on the right side of the menu element to open up further options. In the CSS class, I entered the class name for my menu element as icons–newsletter.

Menu for triggering Mailchimp popup on click

Step 4: Customize the design of your email popup

Now go back to the “Design” section of your Hustle popup. Toggle “Use custom CSS for this module” to selectively stylize different elements of your popup.

The CSS selectors are added by Hustle, so they are the same on both my popup and yours. Feel free to steal my code snippets and adjust accordingly:

.hustle-modal-optin_form {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.hustle-modal-body footer {
    background-image: none;
}
.hustle-modal-body footer {
    background-color: #faf7eb;
}
.hustle-modal article hgroup .hustle-modal-title {
    font-size: 1.8rem;
    font-family: "Crimson";
}
.hustle-modal-subtitle {
    font-family: "Crimson";
    font-size: 1.1rem;
    font-weight: 400;
}
.hustle-modal-optin_field input {
    background-color: transparent;
    border-bottom: 2px solid #05668d;
}
@media only screen and (min-width: 400px) {
.hustle-modal-optin_field {
    margin-right: 1rem;
}
}
.hustle-modal-optin_placeholder {
    color: #4b4a55;
    font-family: "Crimson", Times, serif;
    font-size: 1.2rem;
    overflow: visible;
}

Conclusion

In today’s email marketing landscape, you can still convert website visitors into subscribers while delighting them. Using an email popup that triggers on click is one of the many answers.

Have you tried adding one to your website? If you did, tell me how it works in the comments.

Leave a Reply

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