Adding WPForms to an Elementor Page

Would you like to add a WordPress form to your website using Elementor? You can easily use the WPForms Elementor widget to add forms to your pages and edit them to get them looking the way you want. Even better, you can do it all right from within the Elementor page builder.

In this article, we’ll show you how to add WPForms to an Elementor page.

  1. Embedding Your Form
  2. Configuring Display Options
  3. Publishing Your Form

Before you get started, make sure you’ve installed and activated the WPForms plugin and verified your license key.

1. Embedding Your Form

First, you’ll need to open up the page or post where you’d like to embed your form.

If you don’t see the Elementor builder when you first open the page or post editor, click the blue Edit with Elementor button.

Opening the Elementor page builder from the block editor

Once you’ve opened the Elementor builder, look to the left sidebar. In the Basic widgets section, you should see a widget labeled WPForms.

Go ahead and drag the WPForms widget into the widget area on the right side of the screen.

Adding the WPForms widget to the Elementor page builder

Next, you’ll need to choose between adding an existing form or creating a brand new one in Elementor.

Adding an Existing Form

If you’d like to add a form that you’ve already created to this page, then click the dropdown inside the WPForms widget. You’ll see all the forms you’ve created. Go ahead and select the one you want to add to your page.

Selecting an existing form from the WPForms Elementor widget

Elementor will show you a live preview of your form as it will appear on your website. If you need to make changes to the form, click the Edit the selected form link in the panel on the left.

Opening the form builder to edit an existing form in Elementor

The form builder will open in a popup window so you can make changes to your form. When you’re done editing, click Save, then click the X icon in the top right corner to close the builder.

Saving and exiting the form builder popup in Elementor

You’ll instantly see any changes you made in the Elementor builder.

Creating a New Form

If you don’t have any forms yet, or just want to build a new one for this page, then you can create a new form without ever closing the Elementor page builder. To do so, click the + New Form button in the panel on the left.

Opening the form builder from Elementor to create a new form

The WPForms form builder will then pop up so you can begin creating your form, starting with adding a name and choosing a template.

Creating a new form in the form builder popup in Elementor

Note: If you need help building your form, take a look at our guide on how to create your first form.

When you’re done building your form, click the Save button in the top right corner of the form builder, then click the X icon to close it.

You’ll then see your new form in the Elementor page builder. If you need to make more changes, just click the Edit the selected form link in the panel on the left.

2. Configuring Display Options

To show the form title or description on the page, click to expand the Display Options for the WPForms widget in the panel on the left side of the page builder.

Opening the display options for the WPForms widget in Elementor

Then toggle on the settings to SHOW the Form Name and Form Description to suit your preferences.

Showing the form name and description in the WPForms Elementor widget

You can also change the way the form looks on the frontend in the Advanced tab of Elementor’s builder.

Opening the Advanced options for the WPForms widget in Elementor

To learn how to use the settings here, see the Elementor documentation on Advanced widget options.

3. Publishing Your Form

Before going live with your form, it’s a good idea to test it out and make sure it works the way you expect. Our guide on how to properly test your WordPress forms before launching includes a complete checklist to help you with this process.

When you’re ready to publish your form, click the green Publish or Update button at the bottom of the Elementor page builder.

Publishing a form page with Elementor

That’s it! Now you know how to embed WPForms on a page using Elementor.

Next, would you like to show or hide fields based on your users’ choices or input in your forms? Take a look at our easy guide to using smart conditional logic for steps on how to implement it.