---
title: "How to Customize Gravity Forms in Elementor (NO CSS)"
url: https://theplusaddons.com/docs/customize-gravity-forms-in-elementor/
date: 2023-02-15
modified: 2026-09-17
lang: en
author: "Aditya Sharma"
description: "Gravity Forms is a powerful form builder, but its visual options stop at the theme layer. Matching a Gravity form to the rest of a page normally means writing CSS..."
image: https://theplusaddons.com/wp-content/uploads/2023/02/How-to-Customize-Gravity-Forms-in-Elementor-NO-CSS-1024x536.jpg
word_count: 988
---

# How to Customize Gravity Forms in Elementor (NO CSS)

## 

- The Gravity Form widget ships in the free The Plus Addons for Elementor plugin, and every styling control described here is available without Pro.
- The Plus Addons for Elementor brings Gravity Forms styling into the Elementor panel, where headings, labels, fields, select boxes, file upload and buttons are restyled from the Style tab.
- Select Fields Styling gives dropdown fields their own section, and Gravity is the only form styler in The Plus Addons with a section just for these.
- Submit/Next/Previous Button covers the submit button plus the Next and Previous buttons of a multi-page form, with width, padding, margin, typography, text colour, background, border options and border radius.

**Gravity Forms** is a powerful form builder, but its visual options stop at the theme layer. Matching a Gravity form to the rest of a page normally means writing CSS against its own class names.

The **Gravity Form** widget in The Plus Addons for Elementor brings that styling into the Elementor panel. You pick a form you have already built and restyle its headings, labels, fields, select boxes, file upload and buttons from the Style tab.

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/gravity-forms-styler/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Free** — the Gravity Form widget ships in the free The Plus Addons for Elementor plugin, and every styling control described here is available without Pro.- **Widget to enable:** **Gravity Form**, switched on under **The Plus Addons > Widgets**. It only appears there while the **Gravity Forms** plugin is active.- **You need the form plugin:** **Gravity Forms** installed and activated, with at least one form already created. The widget styles a form that plugin renders; it does not build one.- **Elementor:** the free Elementor plugin is enough. None of these controls needs Elementor Pro.- **You need a form:** build one in **Forms > New Form** first. The **Select Form** dropdown only lists forms that already exist.

## Turn the Widget On

- Go to **The Plus Addons > Widgets** in the WordPress dashboard.- Search for **Gravity Form**.- Switch its toggle on.

![The Plus Addons Widgets screen with the Gravity Form widget switched on](https://theplusaddons.com/wp-content/uploads/2023/02/gravity-form-activation-1024x359.png)

> *The widget is only registered while the Gravity Forms plugin is active. If it is not in the list, check Gravity Forms first.*

## Add the Widget and Pick a Form

- Edit a page with Elementor.- Drag the **Gravity Form** widget on to the canvas.- In **Content > Select Form**, choose your form.- Decide whether to keep the form's own title. **Title** is switched **on** by default.- Switch **Ajax Form Submit** on if you want the form to submit without reloading the page. It is **off** by default.

**Content > Extra Options > Compatibility** has two values: **Gravity Form** (the default, for an ordinary form) and **Download Monitor**, for forms served through the Download Monitor plugin.

## Style the Heading, Description and Labels

- **Style > Form Heading & Description** — **Form Heading** colour, **Description** colour, **Bottom space** and **Alignment** (Left, Center or Right) for the block above the fields.- **Style > Heading Styling** — typography and spacing for section headings inside the form.- **Style > Label Styling** — typography, colour and spacing for the label above each field.

## Style the Fields

Gravity Forms renders three kinds of field that need different CSS, so the widget gives each its own section:

| Section | What it covers |
| ------- | -------------- |
| **Input Fields Styling** | Single-line fields — text, email, number, phone, URL and date. |
| **Textarea Fields Styling** | The multi-line paragraph fields. |
| **Select Fields Styling** | Dropdown fields. Gravity is the only form styler in The Plus Addons with a section just for these. |

All three carry the same controls: **Padding**, **Margin**, **Typography**, **Text Color**, **Placeholder Color**, **Background Type**, **Border Options** and **Border Radius**, with a **Normal** / **Focus** tab.

> ***Border Style**, **Border Width** and **Border Color** only take effect once **Box Border** is switched on in that section. **Border Radius** works either way.*

## Style Checkboxes, Radio Buttons and the File Upload

- **Style > CheckBox/Radio Field** — the widget hides the browser's own checkbox and radio control and draws its own. Separate **Check Box** and **Radio Button** tabs carry typography, **Checked Color**, **Checked Bg Color**, **UnChecked Color**, **UnChecked Bg Color** and border options.- **Style > File/Upload Field** — the browser's file picker is replaced with a button you can style: padding, typography, text and icon colour, alignment, background and border. Along with Contact Form 7, Gravity is one of only two stylers that has this section.

## Style the Buttons

**Style > Submit/Next/Previous Button** covers all three buttons a Gravity form can show: the submit button, and the Next and Previous buttons of a multi-page form. You get width, padding, margin, typography, text colour, background, border options and border radius, with **Normal** and **Hover** tabs.

## The Other Sections

| Section | What it styles | Default |
| ------- | -------------- | ------- |
| **Outer Field** | The row that wraps each field — padding, margin, background and border. | unset |
| **Form Container** | The box around the whole form — padding, background, border, radius and shadow. | unset |
| **Response Message** | The confirmation and validation messages Gravity Forms prints. | unset |

## How It Behaves

- Every setting is CSS the widget writes for that one widget instance. The same form embedded twice can be styled two different ways.- Fields, conditional logic, notifications and confirmations stay in **Forms**. The widget never edits the form.- Padding, margin, typography and border widths can all be set per device.- **Ajax Form Submit** is Gravity's own AJAX mode, passed through by the widget. It is off unless you switch it on.

## Limitations

- The widget styles what Gravity Forms renders. Markup added by a Gravity Forms add-on is not covered.- The tick inside a checked box is a Font Awesome glyph, and The Plus Addons does not load Font Awesome itself. Check the ticks on your published page.- **Border Style**, **Border Width** and **Border Color** do nothing until **Box Border** is on, in every section that has them.- The **Download Monitor** compatibility mode expects the Download Monitor plugin. Leave **Compatibility** on **Gravity Form** for an ordinary form.

## Troubleshooting

### The widget is not in the Elementor panel

Check that Gravity Forms is active, then that the **Gravity Form** toggle is on under **The Plus Addons > Widgets**.

### Select Form is empty

Build a form in **Forms > New Form** and reload the Elementor editor. If you have switched **Compatibility** to **Download Monitor**, the dropdown lists Download Monitor forms instead.

### The form title shows twice

Switch **Title** off in **Content > Gravity Form**. It is on by default, so a heading you have also added yourself will be duplicated.

### My border colour does nothing

Switch **Box Border** on in that section first.

## Related Docs

- [How to Customize Contact Form 7 in Elementor (NO CSS)](https://theplusaddons.com/docs/customize-contact-form-7-in-elementor-no-css/)- [How to Customize WPForms in Elementor (NO CSS)](https://theplusaddons.com/docs/customize-wpforms-in-elementor/)- [How to Customize Ninja Forms in Elementor (NO CSS)](https://theplusaddons.com/docs/customize-ninja-forms-in-elementor/)- [How to Create an Elementor Form for Free](https://theplusaddons.com/docs/create-an-elementor-form-for-free/)

## Frequently Asked Questions

**Q: What do I need before I can customize Gravity Forms in Elementor without CSS?**
A: The setup depends on three things: Gravity Forms must be installed and active, at least one form has to exist already, and Elementor free is enough. The Gravity Form widget ships in the free The Plus Addons for Elementor plugin, so no Elementor Pro is required. That matters because the widget styles a form Gravity Forms already renders, it does not create the form itself. Build the form first in Forms > New Form, then style it in Elementor.

**Q: Why is the Gravity Form widget missing from the Elementor panel?**
A: That usually means the widget was not enabled or Gravity Forms is not active. The Plus Addons for Elementor only registers the Gravity Form widget while Gravity Forms is active, and it also has to be switched on under The Plus Addons > Widgets. If either piece is missing, the widget will not appear in Elementor. This is a common gotcha when the plugin is installed but not fully activated.

**Q: How do I stop the form title from showing twice in Elementor?**
A: The duplicate title happens when Gravity Forms is already outputting its own title and you add another heading above it. The widget keeps Title on by default in Content > Gravity Form, so turning that off removes the built-in title and leaves your custom heading alone. That is the cleanest fix when you want full control over page copy without repeating the same label twice.

**Q: Can I make a Gravity Forms submission happen without reloading the page?**
A: Ajax Form Submit handles that inside the widget. It uses Gravity’s own AJAX mode and passes it through from The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH. It is off by default, so you only get that behavior when you switch it on. That matters if you want a smoother submit experience on a landing page or multi-step flow.

**Q: What parts of a Gravity Form can I style with this widget?**
A: The widget covers the main visual pieces people usually need to match a page: headings, descriptions, labels, input fields, textarea fields, select fields, checkboxes, radio buttons, file upload controls, submit buttons, and even outer wrappers like the form container and response message. It also separates single-line inputs from textarea and select fields, which helps because those field types need different CSS treatment.

**Q: What are the main limitations of styling Gravity Forms this way?**
A: The styling only applies to what Gravity Forms renders inside that one widget instance. Markup added by a Gravity Forms add-on is outside its scope, and checked box ticks rely on a Font Awesome glyph because The Plus Addons does not load Font Awesome itself. Border Style, Border Width and Border Color also do nothing until Box Border is switched on in that section.