Adding WPForms to an Elementor Popup

Would you like to add your WordPress forms to an Elementor popup? If you’re already running Elementor Pro on your site, then you may want to use its built-in popup tool to display a form.

In this tutorial, we’ll show you how to set up and use an Elementor popup with WPForms.

  1. Creating a Popup
  2. Embedding Your Form
  3. Configuring Popup Settings

Requirements: The Elementor popup builder is only available with Elementor Pro.

If you do not have Elementor Pro but would still like to create a popup form, check out our guide on creating a contact form popup.

Before you get started, make sure to install and activate WPForms on your WordPress site and verify your license key.

To create a new popup with Elementor, you’ll need to go to Templates » Popups in the sidebar of your WordPress admin area. Then click the green Add New Popup button.

Add a popup in Elementor

This will open up an overlay that will let you name your popup. For our example, we’ll name our template Contact Us.

Choose a template type in Elementor

Then click the green Create Template button.

2. Embedding Your Form

Next, you’ll see another overlay with Elementor’s template library, where you can choose a pre-made template for your popup.

For this example, we’ll click the X button to exit the template library and manually build our popup from scratch.

From the main template builder, search the widgets in the left sidebar for the WPForms widget. Then click and drag it into the builder.

Select WPForms Widget Elementor

Once you’ve added the WPForms widget to your popup, you can embed an existing form in it or create a new one.

Embedding an Existing Form

In the WPForms Elementor widget, you’ll see a dropdown menu where you can select the name of the existing form you’d like to embed.

Choosing an existing form to add to an Elementor popup

If you want to make any changes to this form, you can do so right from the popup builder by clicking on the Edit the selected form link in the sidebar.

Editing a selected form in the Elementor popup builder

This will open a popup with the WPForms form builder so you can edit and save the changes to your form.

Editing and saving a form with Elementor

Creating a New Form

If you want to build a new form for your popup, click the + New Form button in the lefthand panel.

Creating a new form to embed in a popup in Elementor

This will open a popup with the WPForms form builder, where you can name your form, select a template, and start customizing it.

Adding a new form in Elementor

Make sure to save your form before closing the builder. If you decide you want to go back and make changes to your new form, click the Edit the selected form link in the lefthand sidebar to reopen the form builder.

Turning on AJAX Form Submission

Whether you add an existing form to your popup or create a new one, it’s a good idea to check that AJAX form submission is enabled. This will prevent your popup from closing after submission and from hiding the form’s confirmation message.

AJAX submission is enabled by default for all new forms. However, you can double-check that this option is turned on by clicking on the Edit the selected form link in the sidebar of the popup builder and going to Settings » General in the form builder.

Then, in the Advanced section, make sure the Enable AJAX Form Submission setting is toggled on.

Checking that AJAX submissions are enabled in the form builder

Enabling Prevent Closing on Overlay

After you’ve chosen and embedded your form, you’ll need to configure an option for your popup to prevent your form from closing out if it includes a File Upload or Date/Time field.

Click the gear icon in the bottom Elementor menu bar to open the popup’s settings. In the Advanced tab, turn on the Prevent Closing on Overlay option.

Turning on the Prevent Closing on Overly option for an Elementor popup

Once you’re done setting up your popup, click the Publish button in the bottom left corner of the screen.

Publishing an Elementor popup

3. Configuring Popup Settings

Before Elementor publishes your popup, you’ll need to configure the settings for Conditions, Triggers, and Advanced Rules. These options will appear when you click the Publish button in the popup builder.

For this example, we’ll set the conditions to show our popup on our entire site.

Conditions Settings in Elementor Popup

We’ll also set the popup’s trigger to the On Page Load setting.

Trigger Settings in Elementor

This way, our users will see our popup no matter which page they visit, as soon as it loads.

We won’t add any advanced rules to our example. Once you’re done configuring your popup’s settings, click the Save & Close button.

Saving and closing the Elementor popup settings

Note: If you’d like to know more about what each popup setting does, check out Elementor’s complete documentation.

Your popup will then be published. You can visit the frontend of your site to view it.

That’s it! You can now add your WordPress form to an Elementor popup.

Next, would you like to learn how to capture leads, even when users don’t fully finish your forms? Be sure to check out our guide to our Form Abandonment addon.