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.
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.
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.
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.
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.
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.
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.
The WPForms form builder will then pop up so you can begin creating your form, starting with adding a name and choosing a template.
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.
Then toggle on the settings to SHOW the Form Name and Form Description to suit your preferences.
You can also change the way the form looks on the frontend in the Advanced tab of Elementor’s builder.
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.
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.
