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.
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 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.
