How to Add Beautiful Popup Forms to WordPress

Love ’em or hate ’em, there’s one reason why popups are back.

They work!

Sure, you can add email forms to your sidebar, before your posts, after your posts, etc.

But no matter where you include your forms, the popup always converts better. Yes, they can annoy visitors, but since they work so much better than other optin forms, it’s too effective to ignore.

While popups can be extremely annoying, you’ll learn how to create popups that are attractive, minimally invasive, and still effective for list building.

To do any of this, you’ll need a new plugin. Let’s start this tutorial by covering which plugins you can use to add popup forms to your WordPress website.

The best popup plugin

As with most things WordPress, there are a lot of plugins to choose from.

I have a collection of the best email subscription plugins you can check out, but my personal favorite is MailOptin.

This is the plugin I use for all of the forms on this website including the popup form which you may have seen 😉

What I like about MailOptin is that:

• The forms are easy to create and customize
• There are tons of display options
• It works with all the top email marketing services

Even better, there’s built-in A/B testing, so you can constantly run tests to improve your optin rates. After all, it’s nice to have a beautiful popup form, but it’s even better to have a high-converting one.

And lastly, many email popup solutions that have similar features to MailOptin charge a monthly subscription. MailOptin is a one-time payment, and there’s even a “lite” version available for free.

Now that you’ve got the only tool you need to create popups, let’s walk through the steps to add your first popup form to your site.

Connect to your email service

Before you create any forms, you need to connect MailOptin with your email marketing service.

If you need a recommendation, ConvertKit is the third email platform I’ve used over the last six years running Compete Themes, and it’s by far my favorite.

Now, back to setting up MailOptin!

Once you’ve installed the MailOptin plugin, you’ll see a new menu item in your WP admin dashboard. Hover over the MailOptin menu item and click on the Integrations link.

On this page, you’ll see all of the possible integrations listed along the left side of the screen.

To connect MailOptin with your email service, scroll down the page until you find your email service in the sidebar and click on it. The page will instantly refresh with a single input field where you can enter your API key.

Regardless of which email platform you use, you’ll be able to find your API key available somewhere in the app’s settings menu. Every email service provides an API key for this type of integration.

Once you’ve got the key, paste it into the input and click the Save Changes button.

What happens next (behind-the-scenes) is that your email service is going to authorize MailOptin as a trusted app to communicate with. Now when someone enters their email address into one of your forms, MailOptin can send their info into the email service automatically.

With everything hooked up, you’re ready to create your popup form.

Create the popup form

To create the form, visit the Optin Campaigns menu, and click the Add New button at the top.

On the next screen, you’ll give your campaign a title and select a theme for your popup.

There are quite a few themes to choose from. As you’ll see in a moment, the text, images, colors, fields, and fonts are all customizable, so you should simply pick the theme that looks the most like your vision for your popup.

Once you select a theme, the optin customizer will open up.

As you can see, it’s a specialized version of the Live Customizer used by WordPress themes.

I won’t walk through all the settings since it’s fairly straightforward. You can change the colors, fonts, and more all from the customizer panel. You can also click on any element in the form to open its section in the sidebar.

Once you’re happy with how the form looks and reads, it’s time to connect it to an email list.

Connect to an email list

This is where things get interesting.

You’ve already connected MailOptin to your email service. Now when you click on the Integrations section in the customizer, you’ll find this box where you can choose the email service you’ve integrated with.

When you click the Select dropdown, you’ll see your email provider listed. Once you choose your email service, you’ll see another dropdown appear listing all of your email lists.

This means that each form you create with MailOptin can be connected to a different email list you’ve created in your email marketing app.

Even better, most email platforms will provide MailOptin with segmentation options. For instance, you can see in the example above that ConvertKit allows you to add specific tags to people who subscribe through this form.

At first, you might have just one offer for your visitors, but over time, you’ll surely create multiple optin forms that need to deliver different emails to subscribers. MailOptin makes this complex setup simple and possible.

With your WordPress popup form fully customized and connected to a list, the final step is to decide when and where to show it on your site.

Display the popup on your site

Still inside the customizer, click on the Display Rules section, and you’ll see all these glorious options.

At this point, you have some choices to make.

First, you need to decide who will see your popup. You have tons of options to decide from. A few of those options include targeting:

• The visitor’s device
• The current page
• A query string in the URL
• Whether or not AdBlock is used
• If a visitor is new VS returning

These options allow for precise targeting, but my example will use a simple and popular implementation.

For my example, I want to display the popup to anyone reading a blog post. I don’t want it to show up on my homepage or any other pages (like About or Contact).

To do this, I would turn off the option to display the optin globally, and then choose “Posts” as the only post type to display the form on.

You can show your form on posts in specific categories or even choose individual posts and pages if you want. You could also add another rule to show the popup only to returning visitors or people who are using mobile devices.

For my example, those settings are good enough.

Now that I’ve selected where to show my form and who to show it to, the last step is to decide when it should appear.

The options are to display the form:

• After X seconds
• After they’ve scrolled X percent down the page
• After they’ve viewed X pages
• On “exit intent”
• On click

The first three are fairly obvious. For instance, displaying the form 30s after someone arrives at a post is a simple and easy option to get started with.

The next two options are more interesting.

The Exit Intent option will track the visitor’s mouse movement and when they’re headed for the browser menu, presumably to close the window or hit the “back” button, that’s when the popup will appear.

Exit intent is a nice solution because it won’t disrupt your visitors while they’re reading and engaging with your website.

The other option, Click Launch, lets you place a link anywhere on your site that visitors can click. When someone clicks the link, it will trigger the popup to appear. This is a really unique option and can lead to excellent optin rates.

That wraps up the display options for the form.

If you decide the popup is too aggressive, you can always try a “slide-in” form instead. You’ll have all the same display options, but the form will only take up a little space in the corner of the screen instead of taking over the whole screen.

Adding popups to WordPress

Now you know everything it takes to add a beautiful popup form to your WordPress website.

Once you get the hang of it, I’m sure you’ll have fun split-testing and optimizing your forms for better conversions.

You should also try adding a form to your sidebar with the MailOptin widget. You’ll get more conversions with two or three optin forms instead of just a popup.

If you’re new to email marketing, you might want to read this post next:

How to Send New Post Notifications with WordPress

If this guide helped you to add a popup form to WordPress, then share it with someone else you think would like it too.

Originally published at https://www.competethemes.com/blog/popup-form-wordpress/ on May 22, 2020.