Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Blog
  • Support
  • Login
  • Get Formidable Forms

Formidable Team / Last Updated May 24, 2022

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!

How to Create a Pop-up Form in WordPress
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:

  1. Create a contact form using a drag and drop form builder
  2. Build a popup using a pop-up maker plugin
  3. 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 popups. 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:

  • Formidable Forms
  • OptinMonster

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.

Create WordPress Form

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

name your 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.

Add drag and drop form field

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.

Basic Form Settings - copy 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

Popup form creation

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.

choose popup template

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!

OptinMonster blocks

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.

delete popup form element

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.

copy MonsterLink

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.

Refresh campaign OptinMonster

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:

contact form modal popup

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.

trigger button popup form

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!

Read more about contact forms

  • A Guide to Conversational Marketing Conversational Marketing: A Quick Guide to Better Customer Service
    Read More
    How to embed a form on any website How to Embed a Form on Any Website (Not Only WordPress!)
    Read More
    how to add a contact form in a footer in WordPress How to add a WordPress Contact Form in a Footer
    Read More
  • beautiful contact form design Beautiful Contact Form Design in WordPress (with Examples)
    Read More
    Automated Form Conversations for WordPress forms How to Build a Form Conversation in WordPress (New!)
    Read More
    WordPress Landing Page Plugins 6 Best WordPress Landing Page Plugins (to Get Conversions Now!)
    Read More
  • How to Add an Image to a WordPress Form to Increase Engagement How to Insert Images in WordPress Forms to Increase Engagement
    Read More
    How to Make a Divi Contact Form With Formidable Forms How to Make a Divi Contact Form With Formidable Forms
    Read More
    Best contact forms for WordPress 10 Best Free & Paid Contact Form Plugins for WordPress
    Read More
  • WordPress contact us page How to Make a Great Contact Us Page (With Examples)
    Read More
    How to create an Elementor contact form How to Create an Elementor Contact Form (In 3 Steps)
    Read More
    WordPress contact form multiple recipients How to Create a WordPress Contact Form with Multiple Recipients (Free!)
    Read More
  • How to block spam in WordPress contact forms 8 Ways to Block Contact Form Spam in WordPress
    Read More
    How to Make a Slide-in Contact Form in WordPress How to Make a Slide-in Contact Form in WordPress
    Read More
    how to add a contact form in a WordPress sidebar How to Add a Contact Form to a WordPress Sidebar
    Read More


Not using Formidable Forms yet? Why not? Formidable has plenty of features beyond just contact forms. Get the free WordPress plugin or try Formidable with our no-risk 14-day free trial.

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Leave a Reply Cancel reply

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

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a Calculator in WordPress: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How to Require Email to Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • The Best Gravity Forms Alternative: Formidable Forms vs Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • Blog

Copyright © 2022 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews