---
title: "Getting started with Gravity Forms Widget for Elementor"
date: 2026-04-23
updated: 2026-10-02
author: "GravityKit"
link: "https://www.gravitykit.com/docs/gravity-forms-widget-for-elementor/gravity-forms-elementor-widget/"
category: "GF Widget for Elementor"
---

[Gravity Forms Widget for Elementor](https://www.gravitykit.com/products/gravity-forms-elementor-widget/), 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?

https://www.youtube.com/watch?v=Df6KzMmz9Tc 

## 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](https://www.gravitykit.com/products/gravity-forms-elementor-widget/), 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](https://www.gravitykit.com/gravity-forms-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](https://www.gravitykit.com/wp-content/uploads/2026/04/gravity-forms-elementor-widget-edit-with-elementor.png)
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](https://www.gravitykit.com/wp-content/uploads/2026/04/gravity-forms-elementor-widget-search.png)
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](https://www.gravitykit.com/wp-content/uploads/2026/04/gravity-forms-elementor-widget-select-form.png)

## 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](https://docs.gravityforms.com/allow-field-to-be-populated-dynamically/): 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](https://www.gravitykit.com/wp-content/uploads/2026/04/gravity-forms-elementor-widget-style-tab.png)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](https://docs.gravityforms.com/about-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](https://www.gravitykit.com/wp-content/uploads/2026/04/gravity-forms-elementor-widget-theme-note.png)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).