how to create a WordPress popup form

How to Easily Create a WordPress Popup Form for Free (2 Ways)

Editorial Note: We may earn a commission when you visit links on our website.

Looking for an easy way to create a popup form in WordPress to grab visitors’ attention and collect more leads?

WordPress popup forms are known to have higher click-through-rates (CTRs) than other forms of advertising.

Create Your WordPress Form Now

In this guide, we’ll walk you through the steps on how to create a popup form through two different methods and tools.

Getting Started: Create Your Form

Before creating a popup, you’ll want to create a form in WPForms. This tutorial will work with any version, including WPForms Lite.

Keep in mind that WPForms Lite sends entries via email, but it doesn’t store them in WordPress.

We recommend WPForms Pro if you want to be able to export your form entries to other platforms later.

Check out this post to see the difference between WPForms Lite and WPForms Pro.

Once WPForms is installed and activated, go to WPForms » Add New to create a new form.

Add new form in WPForms

You should now see the form setup screen with various templates. For a popup form, you’ll want to avoid having a ton of fields.

Keeping the form short and compact will make it easier to display on smaller screens. We’ll use the Simple Contact Form template as a starting point.

Simple contact form template

WPForms will load your template and take you to the form builder screen. The Simple Contact Form template includes the Name, Email, and Paragraph Text fields, which is all we need for now.

simple contact form loaded

When you’re happy with how your form looks, go ahead and press Save. Now, we’re ready to move on to the popup. Let’s start with OptinMonster.

Method #1: Make a Popup With OptinMonster

OptinMonster is a SaaS service offering conversion optimization tools, which integrates smoothly with WordPress sites via its plugin. In this method, we’ll use OptinMonster to create a popup that displays a form.

1. Install OptinMonster

You can download the OptinMonster plugin for free and build up to 3 campaigns with a total limit of 300 campaign impressions per month. This is perfect for setting up your first WordPress popup form when you’re just starting out.

optinmonster

Later on, you’d probably like to remove the limitations of the free version from just $9/month.

If you don’t know how to install a WordPress plugin, here are the instructions for adding OptinMonster to your WordPress site.

2. Create a Popup Campaign

Next, let’s create your popup campaign. Start by clicking on OptinMonster » Campaigns from your WordPress sidebar menu.

optinmonster campaigns

This will redirect you to the campaign creation page. Here, click on the Create Your First Campaign button.

optinmonster first campaign

From the list of options available, select Popup as your campaign type as that’s the main goal for now.

popup campaign type

After that, scroll down and choose a template from the available options. Hover your cursor over a template and press the Use Template button.

I prefer to use the Basic campaign for popups since it’s easy to customize and doesn’t require much tweaking for a starting point.

Basic template

Now, OptinMonster will prompt you to give a name to your campaign. Enter a name and press the Start Building button to proceed.

start building

After that, you’ll find yourself on the OptinMonster campaign builder screen with your selected template loaded.

basic popup template

You can publish this popup campaign as is without adding the WPForms block. However, we’re going to switch to WPForms so we can use its integrations.

Let’s first edit the popup header to include useful directions for visitors seeing the popup form. Just click on the header text, and type in any message you want.

edit popup header text

Since we want to include a form we created separately with WPForms here, we’re going to delete the pre-existing opt-in fields from this popup campaign.

You can delete any element from your campaign by hovering your cursor over it and clicking on the Trash icon.

delete optin field

Now, we can drag and drop the WPForms block right under the campaign header. This integration is really amazing.

wpforms block for OM

Simply, click on the WPForms block after you’ve added it to the campaign. This will open settings where you can select any form created with WPForms.

Click the Form Selection dropdown on the left-hand pane of the campaign builder and select a form that you’d like to embed in the popup campaign.

select the form

Awesome! We’re almost done creating a WordPress popup form using the first method. Now, we just need to publish it!

3. Preview and Publish Your Popup Form

Because OptinMonster uses shortcodes to embed forms made with WPForms, you can’t immediately see a live preview of your form within the popup form campaign.

However, you can preview it right before you publish it. To do that, click on the Publish button on the navigation bar at the top.

publish om popup form

On this screen, there’s a preview button. Clicking the Preview button will take you to your site’s frontend where the form will pop up on your screen, just like it would for your visitors.

preview campaign

Now, OptinMonster will trigger your WordPress popup form on page load. Here’s how it looks in our example:

OM popup preview

The preview allows you to double-check everything before you’re ready to publish the campaign.

Once you’re happy with how the popup form looks, go ahead and press the Publish button under Publish Status.

Publish popup form

Great! Your campaign is now live. The popup form will now appear for all users visiting your site. If you want, you can also change the display rules for your WordPress popup form.

Go back to OptinMonster » Campaigns. Find the campaign you just created and hover your cursor over it. Then, click on the Output Settings option.

OM output settings

Here, you can change the visibility of the campaign and set it to be visible only to visitors, logged-in users, or both.

You can also exclude this campaign from selected pages or include it to display only on a few specific pages. It’s entirely up to you to decide which pages your popup form should display on.

advanced visibility settings om

After changing display rules to your liking, make sure to press the green Save Changes button on the right.

And that’s all you need to do to create a WordPress popup form campaign using OptinMonster and WPForms!

Let’s move on to the next method for achieving the same result.

Method #2: Create a Popup Form With Popup Maker

If you’d prefer a solution where you can build a popup form completely from your WordPress dashboard, then the next method is for you.

Here’s a video guide walking you through this method:

For step-by-step written instructions, you can continue reading below:

1. Install Popup Maker 

For this tutorial, the free version of Popup Maker will work just fine. It’s not as powerful as the OptinMonster plugin, but works just as well with WPForms.

popup maker

Just like we did earlier, we’re going to use the form we created at the start with WPForms and embed it inside your popup.

2. Create a Popup in Popup Maker

Go into the Popup Maker plugin to create your popup. This free WordPress plugin lets you make popups from scratch, easily.

Head to your WordPress dashboard and go to Popup Maker » Add Popup, and you’ll see the popup editing screen appear.

add a new popup in popup maker

On this screen, you’ll want to enter a name for your popup. You can also enter an optional display title, as we did in this example.

name your popup form

And now it’s time to insert your form into your popup. Click on the Add Form button to select your form.

add form

An Insert Form screen will appear. Here, you can pick the form you want to insert into this popup by selecting it from the dropdown menu.

select form

Once the form you created with WPForms is selected, click on the blue Add Form button to add it to your popup.

add contact form to wordpress popup

You’ll see a unique shortcode that tells that popup which form to use. If required, you can modify the form ID whenever required to replace the form.

wpforms shortcode for form in wordpress popup form

Great job. Let’s customize some popup settings by scrolling down and starting with Triggers.

Triggers tell your popup when to open like when existing the page or scrolling down, etc. Click on the blue Add New Trigger button.

add new trigger to wordpress popup form

On the trigger option window, open the dropdown and select Time Delay/Auto Open. This will trigger the popup to open after your website visitors have been on the page for a certain amount of time.

I like to select 5 seconds (5,000 milliseconds). When you’re ready, click the Add button to continue.

save popup time delay settings

By default, this popup will show on every page of your WordPress website and to everyone on all devices.

You can adjust these settings to target specific people, devices, places (like a post or page), and more under Targeting. In fact, for more advanced settings, check out the Popup Maker documentation.

Next, let’s spruce up the look of your popup by clicking on Display under the popup settings.

change wordpress popup form display settings

From the Popup Theme dropdown, select a theme for your popup. You can choose whichever Popup Theme you like. For this example, we’re picking the popular Light Box style.

wordpress popup form theme dropdown

Now, adjust any other settings you’d like, and when you’re ready, let’s go ahead and publish your form.

3. Publish the Popup Form

Scroll up on the page to the top and click on the Publish button to make your WordPress popup form live.

publish wordpress popup form

And there you have it! You can now preview your WordPress popup form to make sure it looks exactly like you want it to and adjust the settings accordingly.

popup maker example when finished in lightbox

To make more contact form popups, you can repeat this process and customize the settings and display rules to appear on different posts or pages, etc. Or you can get creative and make a popup WordPress survey.

Head back to the edit page to keep an eye on the Analytics if you want to know how many people have viewed your WordPress popup form.

how to view how many people have viewed your wordpress popup form

Also, if you’ve set up Google Analytics on your website, you can track Popup Maker through custom event tracking.

Alright, you’re all set. We hope this article helped you to learn how to create a WordPress contact form popup in WordPress.

FAQs about WordPress Popup Forms

Popup forms are a popular topic of interest among our readers. Here are answers to some frequently asked questions (FAQs) about them:

Why should you create a popup form in WordPress?

Popup forms give your readers a quick way to reach you without navigating away from the page that they’re on. They’re ideal for:

  • Feedback — Gather feedback by asking for comments or even creating a survey
  • Subscription — Build your email newsletter list by making it easy to subscribe
  • Appointments — Enable users to schedule a call or appointment.

How do I add a pop up form to WordPress?

WordPress doesn’t have a built-in popup feature, so you’ll need to use a plugin like WPForms to first create your form and then OptinMonster to create your popup.

You can then use a shortcode to embed your form directly into your OptinMonster popup. This is perhaps the most convenient method available.

Not to mention, since both WPForms and OptinMonster offer free version of their plugins, you don’t have to pay a single penny to add this functionality to your website.

How do I create an automatic pop up form in HTML?

Creating an automatic popup form with HTML does require some extensive coding knowledge. Below we breakdown some of the steps that you’ll need to take for creating such a form:

  • HTML Structure: Write basic HTML for your pop-up. Use <div> to create a pop-up box and another <div> for the overlay.
  • Add CSS: Style your pop-up and overlay with CSS. Make the overlay cover the whole screen and the pop-up stand out.
  • JavaScript for Interaction: Use JavaScript for showing and hiding the pop-up. You can set it to appear after a few seconds or when a specific action occurs.
  • Include Form Elements: Inside your pop-up div, add form elements like <input> for user input.
  • Test Your Code: Always test your pop-up in different browsers to make sure it works properly.

However, since working with code can quickly become complicated. We recommend that use a plugin like OptinMonster to easily create a popup form for free!

How do I create a pop up form Elementor?

In order to create a popup form in Elementor, you will require the Pro License. This will give you access to its popup builder and templates.

Choose a template or design from scratch. Drag and drop widgets to add content. Decide where and when your pop-up will appear. And that’s about it!

Next, Accept User Submitted Content

Want to let guest users submit posts on your site from the frontend? WPForms is the best plugin for that! See our guide on allowing user submitted posts on WordPress for details.

Create Your WordPress Form Now

Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Comments

    1. Hey Pratham – You should be able to use our multicolumn layout fields to create form fields on left side, and display image on the right side. For more details, I’d suggest you to take a look at our blog post here.

  1. Do I have to buy the premium versions of Popup Maker to be able to get what I want out of it to use wpforms?

    1. Hey Robert – no, the free version of Popup Maker will also help you to create a popup with WPForms. Really, any plugin that allows you to use a shortcode should work with the WPForms shortcode.

      Thanks 🙂

  2. In the free version of both pop up maker and WP forms, they both look ok on their own when editing but when I include the WP form in the Popup maker it not only looks really cheap, but it garbles everything: text is all the wrong size and the text changes to different fonts and sizes than as designed.

    1. Hey SK – Sure, to create an announcement pop up, once you’ve created the form, go to the page or post where you want the announcement pop up to appear. You can either create a new page/post or edit an existing one.

      Now, you can add the popup on this page/post by following any methods described in this doc! That’s it 🙂

      Thanks!

  3. Can WP Forms be to attached to a button so trigger is when button is clicked the forms displays for entry & submission. And would I use Optin Monster or Popup Maker to make this? Thanks.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.