How to Create a Pop-up Form in WordPress

Want to create a WordPress popup form? You can easily create your popup with a form builder and a WordPress popup plugin!

Approximate read-time: 6.5 minutes

If you are hoping to create a pop-up form for your WordPress site, you aren't alone. WordPress pop-up forms (sometimes called modal popups) are becoming very popular.

To get started, you'll need two tools:

Pop-up form WordPress plugin
WordPress form builder plugin

Using these tools, it's actually very easy to install any type of popup on your WordPress website. In this step-by-step tutorial, we'll show you how to create contact form popups.

There are three major steps to getting this done:

Create a contact form using a drag and drop form builder
Build a popup using a pop-up maker plugin
Publish the popup on your site with a trigger button

How to make a pop-up contact form in WordPress

To follow this tutorial, you'll need a WordPress forms plugin & a popup maker plugin. There are many form building options out there, but we'll show you using Formidable Forms. Full disclosure: it's the drag and drop form builder that we made.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

But for contact forms, it's 100% free to use! So if you like free, it's going to work great.

You may be wondering what the best WordPress plugin for popup contact forms is. Actually, a great popup plugin can display any type of form you want. Still, if you check out the WordPress plugin directory, you'll see many popup makers to choose from.

In this guide, we are using OptinMonster. It's an extremely popular plugin with almost 1 million users. Although it no longer has a free version, it does have a free trial. It's the popup plugin that we use on our site too.

Are there free popup maker plugins?

To be clear, there are some free popup plugins that could work very well for you. If all you need is one popup form for your site, this tutorial could still work using a different plugin.

But most of the other popup makers don't offer free A/B testing or advanced features like exit intent. Another consideration: many popup plugins have a clunky UI and are full of pesky advertising.

OptinMonster has a dedicated UI that makes building popups super easy & super powerful. So although it comes with a price tag, this plugin is well worth paying for.

To get started, let's install these two plugins. Here are the links:

Once those plugins are installed and activated, we can move on to the next steps.

1. Create a contact form using Formidable Forms

The first thing we'll do is create a simple contact form to use for your popup.

From your WordPress admin, look at the sidebar on the left side of your screen. Go to Formidable → Forms and click Add New at the top of the page.

From there, click Create Form under 'Blank Form'. Give your new form a name and click Create to start building the form.

Now that we've created our contact form, we should add a few fields. In Formidable, this is easily done using our drag and drop form builder.

For a contact form, you'd want to include a Text field, an Email field, and a Paragraph text field at least. If you want, you can add another text field to allow users to add a subject to their contact request.

Feel free to experiment here for a while, then click the update button to save your form when ready. Now, all we need is the shortcode for your newly created form. Click on the Settings tab above the drag and drop form builder. That's where you can find the shortcode.

Keep that open in a separate tab in your browser for now. We'll need that in a couple of minutes!

For more help creating a form in WordPress, click here. We also have a contact form demo if you want to see an example.

2. Build a WordPress popup using OptinMonster

Now it's time to create our modal popup using our popup maker of choice, OptinMonster.

To get started, click on the Create New Campaign button in the OptinMonster section of your WordPress admin. This will take you to the OptinMonster popup builder on their website.

Building your popup form

First, make sure you choose Popup (it's selected by default) and then search for the Canvas popup. OptinMonster comes with a bunch of cool templates, but for our purposes today we want to work with a blank canvas.

Now we need to start building our contact form popup window. The most important thing to consider is ease-of-use for your website visitors. The easier to use, the more email addresses you can collect with your forms!

Click on the Blocks tab in the menu on the left. There you will see many options to build modal popups with. First, let's add a Text block so we can add a header and a little bit of text.

After that, we want to delete the existing elements in the Canvas template to make room for our new contact form. To do that, mouse-over an element and click the Delete button.

Now we need to add an HTML block. This is where we will place the shortcode from the form you just created. It will look a bit weird here, but when the popup form is published on your site, it will come together.

Configure popup display rules

Now we'll continue by clicking on the Display Rules tab at the top of the page. This is where we will configure out trigger options. There are many ways to trigger a popup, as you can see. In this case, we probably want our popup form to trigger On Click with a button.

To set this up, click on the Popular tab and then click on MonsterLink. After that, click on the green button to copy your MonsterLink code. Click Save in the top-right corner and then click on the Publish tab.

The last thing to do here is to click on the Status toggle and set your popup form to LIVE. Since our popup is triggered on click, we don't need to worry about the popup triggering anywhere else on site.

3. Publish the popup button on your site

Before we publish our popup form, let's try previewing it to see if it looks like we would expect. First, go to OptinMonster in your WordPress admin. Click on the Refresh Campaigns button or the preview won't work.

Back in OptinMonster, from the Publish tab, click the Preview Campaign button. Note: you'd need to make sure your site is properly connected to OptinMonster to use the preview function.

If your form doesn't look exactly as you'd expect, there may be a conflict. Between OptinMonster, your WordPress theme, and Formidable Forms, CSS errors can arise.

Here's another benefit to going with a paid popup plugin though - they have 24/7 support for troubleshooting! OptinMonster's support team will absolutely be able to help you tweak things to make them look great. Here's what it might look like for you at this point:

So if your preview doesn't look perfect, don't worry too much because that can be fixed later. For now, let's create a button that will trigger your popup form.

To do that, go to the page you want your popup form to appear on. You could also place your popup form in any widget area on your page. We are creating a pop contact form. But you could easily create a popup subscribe form or a popup registration form using the same method.

Once on your page, you can add a block if you are using the Gutenberg builder. Just copy and paste your MonsterLink into the button. You can also use your MonsterLink with any other WordPress page builder you want.

That's it - you should now have a functioning popup contact form on your WordPress site. Congratulations!

Wrapping up

We hope you've enjoyed today's guide. A popup form is a stylish way to make your website look even better. Why clutter your footer or sidebar with a long contact form? A popup solves this problem cleanly.

Of course, there are a lot of design tweaks you can add to your popup form. In Formidable, you can use our visual form styler to match the look of your forms to your website. You can tweak the look of your modal window in OptinMonster too.

Before you finish, you might want to go back to your form settings and add a confirmation email to your form. For more ideas, check out the Formidable blog. Until next time!