### [Adding WPForms to an Elementor Popup](https://wpforms.com/docs/how-to-add-wpforms-to-an-elementor-popup/)

**Published:** November 23, 2023
**Author:** Umair Majeed

**Excerpt:** Learn how to add forms to your Elementor popups. Requires Elementor Pro.

**Content:**

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.

This tutorial will show you how to set up and use an Elementor popup with WPForms.

![Elementor popup integration with WPForms](https://wpforms.com/wp-content/uploads/2023/06/elementor-popup.gif "Elementor Popup Integration With WPForms")**Requirements:** The Elementor popup builder is only available with [Elementor Pro](https://elementor.com/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](https://wpforms.com/docs/how-to-create-a-popup-form-with-wpforms/).

---

Before you get started, make sure to [install and activate WPForms](https://wpforms.com/docs/install-wpforms-plugin/) on your WordPress site and [verify your license key](https://wpforms.com/docs/verify-wpforms-license/).

## Creating a Popup

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](https://wpforms.com/wp-content/uploads/2020/05/Add-a-popup-in-Elementor.jpg)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](https://wpforms.com/wp-content/uploads/2020/05/Choose-Template-Type-in-Elementor.jpg)Then click the green **Create Template** button.

## 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](https://wpforms.com/wp-content/uploads/2020/08/Select-WPForms-Widget-Elementor.png)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](https://wpforms.com/wp-content/uploads/2020/11/elementor-widget-popup-select-form.png)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](https://wpforms.com/wp-content/uploads/2020/11/elementor-popup-edit-selected-form.png)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](https://wpforms.com/wp-content/uploads/2020/08/elementor-exit-form-builder-popup.png)### Creating a New Form

If you want to [build a new form](https://wpforms.com/docs/creating-first-form/) for your popup, click the **+ New Form** button in the lefthand panel.

![Creating a new form to embed in a popup in Elementor](https://wpforms.com/wp-content/uploads/2020/11/elementor-popup-new-form.png)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](https://wpforms.com/wp-content/uploads/2020/08/elementor-create-new-form.png)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.

**Note:** If you need help building your form, take a look at our guide on [how to create your first form](https://wpforms.com/docs/creating-first-form/). Also, check out our [Multi-page Elementor form template](https://wpforms.com/templates/elementor-multi-step-form-template/) if you’d like to use a prebuilt form template.

### Customizing Your Form

Once you’ve added a form to your popup, you can also tweak its appearance to match your website’s look and feel from the **Style** tab of Elementor’s builder.

![Opening the Style options for the WPForms widget in Elementor](https://wpforms.com/wp-content/uploads/2020/08/elementor-wpforms-widget-style-options-2.png)The Style tab allows you to adjust the style of the form fields, labels, and buttons without needing any CSS knowledge.

To learn more, check out our guide on [customizing your forms](https://wpforms.com/docs/how-to-add-wpforms-to-an-elementor-page/#customize-form).

### 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](https://wpforms.com/docs/how-to-enable-ajax-form-submissions/) is enabled. This will prevent your popup from closing after submission and from hiding the form’s [confirmation message](https://wpforms.com/docs/setup-form-confirmation-wpforms/).

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](https://wpforms.com/wp-content/uploads/2020/11/enable-ajax-submission.png)Save your changes before you close 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](https://wpforms.com/wp-content/uploads/2020/11/elementor-popup-prevent-closing-overlay.png)Once you’re done setting up your popup, click the **Publish** button in the bottom left corner of the screen.

![Publishing an Elementor popup](https://wpforms.com/wp-content/uploads/2020/11/publishing-elementor-popup.png)## 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](https://wpforms.com/wp-content/uploads/2020/05/Conditions-Setting-in-Elementor-Popup.jpg)We’ll also set the popup’s trigger to the **On Page Load** setting.

![Trigger Settings in Elementor](https://wpforms.com/wp-content/uploads/2020/05/Trigger-settings-in-Elementor-1.jpg)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](https://wpforms.com/wp-content/uploads/2020/11/save-close-elementor-popup-settings.png)**Note:** If you’d like to know more about what each popup setting does, check out [Elementor’s complete documentation](https://elementor.com/help/popups/).

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](https://wpforms.com/docs/how-to-install-and-use-form-abandonment-with-wpforms/).

**Categories:** Extending, Extending Functionality

---