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.

This tutorial will show you how to add WPForms to an Elementor page.

Adding WPForms to Elementor

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. Customizing Your Form

WPForms integrates with Elementor and allows you to customize the appearance of your forms. To start, navigate to the Style tab from Elementor’s sidebar menu.

Opening the Style options for the WPForms widget in Elementor

Note: If you don’t see the Style tab in your Elementor screen, you’ll need to check that the modern markup option is enabled on your site. Please see our tutorial to learn how to enable modern markup in WPForms.

The Style tab in Elementor allows you to adjust the style of the form fields, labels, and buttons without needing any CSS knowledge. You’ll also find an option to copy these style settings from one form to another in the Advanced section.

We’ll cover each of these options in more detail below.

Field Styles

In the Field Styles option, you’ll see settings for Size, Border Radius, and color options for the Background, Border, and Text.

The Size settings control the size of each field on your form. Available options include: Small, Medium, and Large.

Field size in Style tab

Next, you’ll find the Border Radius setting. This changes the roundness of your field corners – a higher number means more rounded corners.

Border radius option in Style tab

Next, you’ll find options to update the Background, Border, and Text colors of your form fields. To change the default colors, click on the color adjacent to the label.

Border color option in Style tab

This opens a color picker allowing you to select the desired color. If you have a specific brand color for your forms, you can directly enter the color code into the HEXA field. While HEXA is the default unit, you can also switch it to RGBA or HSLA as needed.

Color picker option in Style tab

Label Styles

Under Label Styles, you’ll see options to adjust the size and colors of your form labels. From the Size dropdown, you can choose either from SmallMedium, or Large, depending on your preference.

Label sizes option in Style tab

Next, you’ll find options to update the colors for Label, Sublabel & Hint, and Error message of your fields. Below we’ve explained the available color options.

Label colors option in Style tab

  • Label: This option changes the text color of your labels.
  • Sublabel & Hint: This option controls the color of field sublabels and hints that appear when WPForms suggests values to users in the frontend.
  • Error: The color of the error messages that show if an error occurs when users fill out your form.

Button Styles

The Button Styles settings let you customize the style of your buttons. To change the button’s size, click the Size dropdown and select the option you’d like to use.

Button size options in Style tab

To give the button rounded edges, simply enter the value in the Border Radius field.

Button style options in Style tab

Next, you’ll see options to update the background and text colors of your button.

Button colors options in Style tab

Note: The background color you set for your button will also be used as the default accent color. This means the focus state color for fields, progress bars, radio buttons, and checkboxes will use the button’s background color.

Advanced Styling

In this section, you can add any CSS classes to your form by typing the class name into the Additional Classes field.

CSS option in Style tab

Next, you’ll find the CSS code reflecting all the styles you’ve added to the form under the Copy / Paste Style Settings.

This option allows you to copy styles from one form to another.

If you’ve copied style settings from another form, you’ll be able to quickly paste it here. After pasting the code snippet, the form will use the styles from the previous form.

If you’d like to reset any customization you’ve added to your form, click the Reset Style Settings button. This would restore your form to its original state without any custom styling.

Reset CSS styling option in Style tab

After styling your form, be sure to save your changes by either publishing the page or saving it as a draft.

4. 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 Publish or Update button at the bottom of the Elementor page builder.

Publish Elementor page button

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.