Getting started with Gravity Forms Widget for Elementor

Gravity Forms Widget for Elementor, our free plugin, adds a Gravity Forms widget to Elementor, so you can place a form on any Elementor page and style it from the editor panel.

Prefer to watch the video?

Before you start #

To use the widget, your site needs:

WordPress 6.5 or newer and PHP 7.4 or newer.
Elementor (the free plugin is enough).
Gravity Forms newer than version 2.7.15, with at least one form to add.

The widget is free: download it from its product page, then install and activate it like any other plugin. If your site already runs a GravityKit product, you can install it from the Manage Your Kit page in the GravityKit menu instead.

For a broader look at using Gravity Forms with Elementor, see our full guide.

Adding a form to a page #

Edit an existing page or create a new one, then click Edit with Elementor to open the Elementor editor.

The WordPress block editor toolbar with the Edit with Elementor button outlined

In the Elements panel, search for Gravity Forms and drag the widget onto the page.

Elementor's Elements panel with Gravity Forms in the search box and the Gravity Forms widget outlined

Choose your form under Select Form, and a preview of the form loads in the editor.

The Content tab of the Gravity Forms widget with Select Form outlined, next to a preview of the chosen form

Form settings #

The rest of the Form Settings section on the Content tab controls how the form appears:

Title and Description show or hide the form’s title and description.
Use Ajax submits the form without reloading the page.
Theme picks the Gravity Forms theme for this form. Inherit from default uses the Default Form Theme from the Gravity Forms settings, while Orbital Theme and Gravity Forms 2.5 Theme set one of Gravity Forms’ two themes. Disable Theme keeps Gravity Forms’ basic layout styles and removes its theme styles.

On the Advanced tab, the widget adds these settings:

Field Values fills fields with starting values. It works with fields that allow dynamic population: in the form editor, open the field’s Advanced settings, check Allow field to be populated dynamically, and enter a Parameter Name. Then enter each parameter name and its value here, joined by &, such as first_name=Alex&last_name=Smith.
Tab Index sets the form’s starting tabindex value.

Styling the form #

The Form section of the Style tab styles the box around the form: its background color, alignment, max width, margin, padding, border, and box shadow. Alignment, max width, margin, and padding can be set separately for each device size.

The other sections have the same style settings as the Gravity Forms form block:

Field Labels and Field Descriptions: text color and font size.
Inputs: size, border radius, border color, background color, text color, and an accent color for checked checkboxes and radio buttons. Its Image Choices settings change the appearance, style, and size of image choices.
Buttons: background color and text color.

The Style tab of the Gravity Forms widget with the Inputs section open, next to a form preview in the chosen label, input, and button colors

Your changes show in the editor preview as you make them. The sections you see depend on your Gravity Forms version, because the widget offers only the settings that your version supports in its form block.

Note: Gravity Forms applies the label, description, input, and button settings only to forms that use its Orbital theme. With another Theme selected on the Content tab, the Style tab shows only the Form section, with a note pointing back to that setting. A form that uses legacy markup also gets only the Form settings.

When you’re done, publish the page, or save your changes if it’s already published.

Troubleshooting #

The Style tab shows only the Form section

When the form’s theme is the reason, a note under Form on the Style tab says so:

The widget's Style tab with the Gravity Forms 2.5 Theme selected, showing only the Form section and its note about the Orbital theme, next to the form in the 2.5 theme

Set Theme on the Content tab to Orbital Theme. If it’s set to Inherit from default, you can instead change Default Form Theme under Forms, then Settings, which changes the theme for every form that inherits the default.

If the form uses legacy markup, open the form in Gravity Forms, go to its Settings, and turn off Enable legacy markup under Form Options. Gravity Forms recommends modern markup for every form and plans to remove legacy markup in Gravity Forms 4.0. If your site has custom CSS written for the old markup, check the form afterwards.

Problems fixed in recent versions

If you see one of these, update the widget:

A form with conditional logic shows as an empty grey box in the editor (fixed in 1.0.2).
Only the first field gets its value from Field Values in Elementor 4 (fixed in 1.1.1).
A field value with an apostrophe or quotes shows as code, such as it's (fixed in 1.2.0).
Disable Theme still applies the Orbital theme to the form (fixed in 1.2.0).
A form in the Gravity Forms 2.5 theme looks unstyled when the editor first opens (fixed in 1.2.0).