Gravity Forms is a WordPress plugin for creating custom forms on any website. It is a popular choice among developers and businesses due to its drag-and-drop interface and the ability to build complex forms with minimal configuration.
However, styling Gravity Forms directly in the Elementor page builder offers limited options. The Plus Addons for Elementor includes a dedicated Gravity Form widget that gives you full control over every form element without writing any CSS.
Best Used For:
- Web design agencies building client sites with complex Gravity Forms that need on-brand styling without CSS
- Membership or educational sites using multi-step Gravity Forms for registration and onboarding flows
- Contact or lead generation pages where the form style must match the rest of the Elementor page design
Requirement - This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated.
Required Setup
- Premium Gravity Forms Plugin installed and activated.
- Elementor FREE Plugin installed & activated.
- You need to have The Plus Addons for Elementor plugin installed and activated.
- Make sure the Gravity Form widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Gravity Form and activate.
How to Activate and use the Gravity Form Widget?
Go to
- The Plus Addons → Widgets
- Search the widget name and turn on the toggle.
Make sure you have created at least one form in Gravity Forms.
Then add the Gravity Form widget to the page. Go to Gravity Form > Select Form and choose your form from the dropdown. Use the Title toggle to show or hide the form title. Turn on the Ajax Form Submit toggle to submit the form without a page reload.
If you are using the Download Monitor extension of Gravity Forms, choose Download Monitor from the Compatibility dropdown under the Extra Options tab.
Key features
- Style input fields: Style the form input fields for text, email, URL, number, and telephone from one section.
- Style Textarea: Set the typography, colour, height, padding, and border for the text area of your form.
- Style form heading and description: Control the appearance of the form heading and description.
- Style label: Manage the typography, colour, and spacing of form labels.
- Style the progress bar: If you are using a multi-step form, style the progress bar to match your site design.
- Checkbox/Radio button styling: Add custom styling to checkboxes and radio buttons to match your design system.
- Style File Upload button: Style the file upload button, including multi-file upload variants.
- Outer styling: Style the form outer section rows and container.
- Style the Submit/Next/Previous button: Style the submit, next, and previous buttons individually to match your site design.
- Style form messages: Style form error messages, success messages, and validation messages.
If you also use WPForms on your site, see How to Customize WPForms in Elementor (NO CSS) for the same styling workflow with WPForms.
Styling Input Field of Gravity Forms in Elementor
Style the input fields of Gravity Forms using The Plus Addons for Elementor Gravity Form widget. It includes a full range of styling options for text, email, number, and other input types.
To style the Gravity Forms input fields, go to the Style tab and open Input Fields Styling.
Styling Text area of Gravity Forms in Elementor
Similar to the input fields, style the text area of Gravity Forms. Once you have set a style for the input fields, apply the same style to the text area to keep the form appearance consistent.
Find all the styling options under the Textarea Fields Styling section.
Styling Submit Button of Gravity Forms in Elementor
With Gravity Forms, you can create multi-step forms that include Next and Previous buttons alongside the Submit button. Styling each button separately without a plugin requires custom CSS.
The Plus Addons for Elementor Gravity Form widget includes all the options needed to style each button individually under the Submit/Next/Previous Button section.
Styling Radio Button or Checkbox of Gravity Forms in Elementor
The Plus Addons for Elementor Gravity Form widget automatically replaces the default browser styling for radio buttons and checkboxes with a consistent style. This keeps the form appearance uniform across different browsers.
Adjust the style further from the Checkbox/Radio Field section. From here, set the typography, checked colour, unchecked colour, checked background colour, and unchecked background colour.
Styling File Upload Button of Gravity Forms in Elementor
The file upload button is one of the form elements that are difficult to style with CSS. The Plus Addons for Elementor Gravity Form widget applies a distinct style to the file upload button by default.
If you are using the multi-file upload option, the same section includes additional styling options for that variant.
This lets you make the file upload button match the rest of your form design. If you use Ninja Forms and need the same level of styling control, see How to Customize Ninja Forms in Elementor (NO CSS).
Manage all the styling from the File/Upload Field section.
Also, check How to Customize Everest Forms in Elementor.
