How to Create a Popup Form with WPForms

Would you like to add a WordPress form to a popup on your site? Displaying a form in a popup can be a great way to generate more leads and drive more sales for your business.

In this tutorial, we’ll show you how to create a popup form with WPForms.

  1. Installing Popup Maker
  2. Creating a Form
  3. Creating a Popup in Popup Maker
  4. Configuring Popup Settings
  5. Publishing Your Popup Form
  6. Frequently Asked Questions

Before getting started, you’ll first need to make sure WPForms is installed and activated on your WordPress site and that you’ve verified your license.

1. Installing Popup Maker

To begin, install Popup Maker, a free plugin for creating popups.

To install this plugin from the WordPress dashboard, go to Plugins » Add New. Then, search for the Popup Maker plugin in the search bar.

Search Popup Maker plugin

Next, click the Install Now button to install the plugin.

Click install now Popup Maker

Note: For extra help, be sure to check out WP Beginner’s guide to installing WordPress plugins.

2. Creating a Form

Now that you’ve installed Popup Maker, go ahead and create a new form for your popup.

For this example, we’ll create our form with the simple contact form template. To do this, go to WPForms » Add New. Then, select the simple contact form template by clicking the Use Template button.

Simple contact form template

This will take you to the form builder where you can add additional fields by dragging and dropping them into the form preview area.

Drag and drop fields

You can also remove a field from your form by hovering over it and clicking the red trash icon.

Delete field in form builder

Once you’re done editing your form, be sure to click the Save button to save any changes.

Save form changes

After you’ve saved your form, you can further customize it in the Settings tab.

Form settings tab

If you would like to receive an email when your form is submitted, check out our guide to setting up form notifications. You can also set up confirmation settings for your form if you’d like.

3. Creating a Popup in Popup Maker

Now that your form is ready, you can start creating a popup. To do this, click on Popup Maker » Create Popup in the WordPress side menu.

Create popup page

Then, be sure to add a name to your popup in the Popup Name field. If you’d like, you can also add an optional title to your popup in the Popup Title field.

Add popup name and title

Next, we’ll add a form to our popup by clicking the Add Form button.

Click add form button

You’ll now see an Insert Form appear. From here, click on the dropdown menu and select the form that you’d like to add to your popup. For example, we’ll select the Simple Contact Form that we created earlier.

Select form from dropdown

Once you’ve selected a form, click on the Add Form button to add it to your popup.

Add form to popup

This will create a unique shortcode that tells the popup which form to display.

WPForms shortcode

In the Popup Settings section, you’ll find many built-in options for creating a customized popup that best fits your needs. In the following sections, we’ll cover some of the basic settings to help get you started.

Note: For more advanced settings, be sure to checkout Popup Maker’s documentation.

Adding a Trigger

We’ll start by adding a trigger for when the popup is displayed to the user. To add a trigger, go to the Triggers tab and click on the Add New Trigger button.

Add new trigger button

A modal will appear where you can select which type of trigger you’d like to use. For this example, we’ll select the Time Delay / Auto Open option. This option triggers the popup to open on a user’s screen after they’ve been on a page for a specific amount of time.

Time delay auto open

Once you’ve selected the trigger type that you’d like to use, click the Add button to continue to the next step.

Click add button new trigger

This will take you to the Time Delay Settings step, where you can adjust the number of milliseconds before the popup opens. To do this, slide the number slider or manually enter your preferred time in the Delay section.

Delay number slider

When you’re ready, click the Add button to complete the trigger setup.

Click add button for trigger

Adding a Target

By default, the popup will load on every page that any user visits on your site. However, in the targeting settings, you can adjust these conditions to target specific people, devices, posts, and pages.

To choose a specific condition, go to the Targeting tab and click on the Choose a condition dropdown.

Choose a target condition

As an example, we’ll configure our popup to display on a specific page by selecting the Pages: Selected option.

Pages selected option

Then, in the Select pages field, we can select the specific pages we want to load our popup. For example, if we want the popup to only load on our homepage, we’ll select our page titled “Homepage.”

Selected pages

Customizing the Popup Display

You can customize the way your popup looks by clicking on the Display tab within the popup settings. Here you’ll find options to customize the appearance, size, and position, as well as add animation and sounds.

Click display tab

For this example, we’ll change the popup theme by clicking on the Appearance tab.

Appearance tab display settings

Next, we’ll select the Light Box theme from the Popup Theme dropdown.

Light Box theme

Once you’ve added your preferred customizations, get ready to publish your popup form.

Publishing Your Popup Form

To publish your popup form, click on the blue Publish button located on the right side of the page.

Click publish button

Now when you visit the page on your site, you’ll see your popup form in action.

Popup form example

6. Frequently Asked Questions

Below, we’ve answered some of the top questions about creating a popup form in WPForms.

The calendar in the Date / Time field displays behind the popup, how can I fix this?

To prevent the calendar in the Date / Time field from displaying behind the popup, you’ll need to make a quick adjustment in the Popup Maker settings.

To do this, go to Popup Settings » Display » Advanced. Then, change the value of the Popup Z-Index to any value less than 99999.

Popup Z-Index

That’s it! Now you know how to create a popup form with WPForms.

Next, would you like to test out your forms before you publish them? Our complete form testing checklist will walk you through the process step by step.