--- 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-05-27 lang: en author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2023/02/How-to-Customize-Gravity-Forms-in-Elementor-NO-CSS-1024x536.jpg word_count: 829 --- # How to Customize Gravity Forms in Elementor (NO CSS) ## - Gravity Forms is a powerful WordPress plugin that enables users to create custom forms with an intuitive drag-and-drop interface. - The Plus Addons for Elementor provides a Gravity Form widget that enhances styling capabilities beyond Elementor's default options. - Users must have the Premium Gravity Forms Plugin, Elementor FREE Plugin, and The Plus Addons for Elementor installed and activated to utilize the Gravity Form widget. - The Plus Addons for Elementor Gravity Form widget allows extensive customization of form elements, including input fields, text areas, buttons, and file upload buttons. 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.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/gravity-forms?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Required Setup - Premium [Gravity Forms Plugin](https://www.gravityforms.com/) installed and activated. - [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated. - You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) 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.** ![](https://theplusaddons.com/wp-content/uploads/2023/02/gravity-form-activation-1024x359.png) 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)](https://theplusaddons.com/docs/customize-wpforms-in-elementor/) 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**. ![gravity forms input styling](https://theplusaddons.com/wp-content/uploads/2023/02/gravity-forms-input-styling.png) ## 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. ![gravity forms submit styling](https://theplusaddons.com/wp-content/uploads/2023/02/gravity-forms-submit-styling.png) ## 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. ![gravity forms checkbox styling](https://theplusaddons.com/wp-content/uploads/2023/02/gravity-forms-checkbox-styling.png) ## 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)](https://theplusaddons.com/docs/customize-ninja-forms-in-elementor/). Manage all the styling from the **File/Upload Field** section. ![gravity forms upload styling](https://theplusaddons.com/wp-content/uploads/2023/02/gravity-forms-upload-styling.png) Also, check [How to Customize Everest Forms in Elementor](https://theplusaddons.com/docs/customize-everest-forms-in-elementor/).