Search

The Best Way to Add a Popup in WordPress

By Steve Allen |

Want to know how to add a popup in WordPress?

Maybe you want to:

Whatever the reason, adding popups to your WordPress site is super easy and can be an effective way to get website visitors to take action.

In this article, I'll show you different ways you can add popups to WordPress using free and paid plugins.

Let's get started.

How to Add a Popup in WordPress

The easiest way to create a popup is with a WordPress plugin.

Here are three popular WordPress plugins you can use to create popups. At the end, I'll share how you can create your own popup without a plugin.

Use a WordPress Popup Plugin: Popup Maker

The Popup Maker plugin is a free popup builder that's easy to use for any kind of popup you want to create. The free version has over 700,000 active installs and a 4.9 star rating in the WordPress plugins directory.

With Popup Maker, you can choose which layout you want, whether it be the common lightbox popup modal, a top hello bar, or slide-in popup. You can then customize the design in the popup settings and create your own popup template for later use.

Other features include:

The cool thing with Popup Maker is that you can use the built-in subscription form to collect email addresses you place inside the popups. You can also track the opens of the popups and conversion rate of people who sign up.

There is a premium version if you want to get the full benefits of the plugin.

The best features of the full version let you connect every form submission to a MailChimp or Aweber account, add an exit intent or page scroll triggers, connect to WooCommerce or EDD, get advanced  popup analytics, and lots more.

Learn more About Popup Maker Here

Use a Page Builder: Elementor

Elementor is a powerful page builder you can use to create popups for your WordPress website.

The benefit here is that you don't need a separate WordPress theme and popup plugin because Elementor has a built-in popup editor.

To use Elementor popups, you'll need to upgrade to the pro version. With Elementor Pro, you get unlimited flexibility to design your popups however you like.

You also get a huge selection of pre-made popups to choose from and the ability to connect your popup sign-up forms to popular email marketing software.

Other popup features include:

If you already use the free version of Elementor for your site's design, then you can easily add popups to your site by upgrading. Pricing starts at $49 for a one site license.

Here is a video tutorial showing you exactly how to add a popup in WordPress using Elementor:

Learn more About Elementor Here

For more detailed information on Elementor, be sure to see our full Elementor review

View Elementor Review Here

Use a WordPress Form Plugin: FluentForms

FluentForms is a contact form plugin for WordPress that lets you display a popup form inside a simple modal popup. This freeform builder has lots of features to help you create almost any kind of form for your website.

It uses a drag-and-drop editor to make it super easy to create opt-in forms, multi-step conversion forms, conditional logic forms, and even calculators.

Form submissions are saved in your WordPress admin and you can integrate them with MailChimp to store your email list.

To turn your forms in FluentForms into a popup, all you do is add a shortcode. This shortcode will act as a button on your page and will trigger the popup when clicked. 

Here's a basic subscription form I created in less than 2 minutes. Whatever you create here will be what shows in the popup:

The shortcode looks like this:

[fluentform_modal form_id="14" btn_text="Subscribe" css_class="subscribe-button"]

Replace the “form ID” with the form you create and you can change the button text with button_text=””. You can also give the button a custom class to customize its style.



Here's what the popup looks like from what I created above:

Pretty simple, right? You can add a title above the input fields and anything else you want the popup to show.

To integrate other email marketing services, like ActiveCampaign, ConstantContact, and ConvertKit, you can upgrade to FluentForms Pro.

The premium version of FluentForms has tons more integrations and features things like taking payments with Stripe and PayPal.

Learn More About FluentForms Here

How to Create Your Own Popup Without a Plugin

If you're tech savvy and prefer not to use a plugin, it's possible to add a popup to your WordPress site by adding some code to your theme.

This is best for those who need something really basic and only one popup throughout the entire site. You could code different popups for different uses, but it could get a little messy, which is why plugins are a great option.

With that said, there are tons of tutorials online that teach you how to create a custom popup using HTML, CSS, and JavaScript.

Here's one I found that uses minimal code and can easily be added to any WordPress page.

It works when someone clicks on a button on the page. So you could have a call to action button in your hero section that says, “Download Your Free eBook”, which would activate the popup when clicked.

Where the popup in the image above says, “Hello, I am a modal!”, is where you would place the contents of your popup, like an opt-in form.

Here is how you could add it to WordPress.

Open up a page in your WordPress admin and scroll to the bottom. Add the HTML block and paste the code below:

<style>
body {
background-color: white;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scaleX(1.1) scaleY(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
font-family: sans-serif;
z-index:1000;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 26rem;
border-radius: 0.5rem;
}
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scaleX(1.0) scaleY(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
@media only screen and (max-width: 50rem) {
h2 {
font-size: 1.5rem;
}
.modal-content {
width: calc(100% - 5rem);
}
}
</style>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h2>Hello, I am a modal!</h2>
</div>
</div>
<script>
const modal = document.querySelector(".modal");
const trigger = document.querySelector(".trigger");
const closeButton = document.querySelector(".close-button");

function toggleModal() {
modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>

Then you'll want to place a button on the page somewhere and add the custom CSS class of “trigger” so that it activates the popup.

You can do this by adding Additional CSS classes under the advanced settings of the button:

Now, when you click the button on that page, you'll see the popup:

To change the contents inside the popup, replace the highlighted text below:

You can add anything you like inside your popup: text, images, or an opt-in form to collect emails.

Why Add a Popup to Your Website?

You might wonder why you should add a popup to your website in the first place.

And that's a valid question. I mean, won't a popup just annoy your visitors?

The simple answer is, not really.

People who don't use your popup are used to seeing them, so it becomes automatic to ignore them and continue what they were doing.

The fact is that popups work when shown to the right people. As long as you have good quality traffic and you have something valuable to offer in your popups, you'll convert a good percentage of them into leads and sales.

The main benefits include:

Conclusion

Now you know how to add a popup to WordPress. What will use them for and which method will you choose?

The easiest way to create popups for your site is to use a plugin. Form plugins like FluentForms offer a lot of form-related features, whereas a plugin like Popup Maker is designed specifically for building popups.

If you liked this post, check out this article on the best email marketing plugins for WordPress now.




Wordpress

By Steve Allen

Steve Allen is a niche site builder, writer, and all-around WordPress wizard.

He enjoys personal development, entrepreneurship, double espressos, and making things work better than they did before.

Want to learn step-by-step how I built my Niche Site Empire up to a full-time income?

Yes! I Love to Learn

You may also like

View all

Recent Posts

View all