<\/p>\n\n\n\n
Required Setup<\/h2>\n\n\n\n\n- Premium Gravity Forms Plugin<\/a> installed and activated.<\/li>\n\n\n\n
- Elementor FREE Plugin<\/a> installed & activated.<\/li>\n\n\n\n
- You need to have The Plus Addons for Elementor<\/a> plugin installed and activated.<\/li>\n\n\n\n
- Make sure the Gravity Form widget is activated, to verify this visit Plus Settings \u2192 and Search for Gravity Form and activate.<\/li>\n<\/ul>\n\n\n\n
How to Activate and use the Gravity Form Widget?<\/h2>\n\n\n\n
Go to <\/p>\n\n\n\n
\n- The Plus Settings <\/strong>\u2192 Plus widgets <\/strong><\/li>\n\n\n\n
- Search <\/strong>the widget name <\/strong>and turn on the toggle <\/strong>then <\/strong>click Save.<\/strong><\/li>\n<\/ul>\n\n\n\n
![\"gravity](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/gravity-forms-activate-1024x487.png\")
<\/figure>\n\n\n\nMake sure you have created at least one form in the Gravity Forms.<\/p>\n\n\n\n
Then add the Gravity Form widget on the page, go to Gravity Form<\/strong> > Select Form<\/strong>, and choose your form from the dropdown list.<\/p>\n\n\n\nYou can show or hide the form title from the Title<\/strong> toggle. You can also use ajax for your form submission by turning on the Ajax Form Submit<\/strong> toggle.<\/p>\n\n\n\nIf you are using the Download Monitor extension of Gravity Forms, you have to choose Download Monitor<\/strong> from the Compatibility<\/strong> dropdown under the Extra Options<\/strong> tab.<\/p>\n\n\n\nKey features<\/h2>\n\n\n\n\n- Easily style input fields<\/strong>: You can easily style the form input fields like text, email, URL, number, telephone etc. from one section.<\/li>\n\n\n\n
- Style Textarea<\/strong>: Easily style the text area of your form.<\/li>\n\n\n\n
- Style form heading and description<\/strong>: Manage the style of form heading and description.<\/li>\n\n\n\n
- Style label<\/strong>: You can manage the style of form labels.<\/li>\n\n\n\n
- Style the progress bar<\/strong>: If you are using a multi-step form, you can easily style the progress bar.<\/li>\n\n\n\n
- Checkbox\/Radio button styling<\/strong>: Add a beautiful style to checkboxes and radio buttons.<\/li>\n\n\n\n
- Style File Upload button<\/strong>: Easily style the tricky file upload button.<\/li>\n\n\n\n
- Outer styling<\/strong>: You can style the form outer section rows.<\/li>\n\n\n\n
- Style the Submit\/Next\/Previous button<\/strong>: Easily style the submit, next and previous buttons to match your website design.<\/li>\n\n\n\n
- Style form messages<\/strong>: You can even style the various form messages like form error messages, success messages or validation messages.<\/li>\n<\/ul>\n\n\n\n
Styling Input Field of Gravity Forms in Elementor<\/h2>\n\n\n\n
You can easily style the Input Fields of the Gravity Forms using The Plus Addons for Elementor Gravity Form widget. It has a vast range of styling options to make modern-looking Input Fields.<\/p>\n\n\n\n
To style the Gravity Forms Input Fields, go to the Style<\/strong> tab Input Fields Styling<\/strong>.<\/p>\n\n\n\n![\"gravity](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/gravity-forms-input-styling.png\")
<\/figure>\n\n\n\nStyling Text area of Gravity Forms in Elementor<\/h2>\n\n\n\n
Similar to the Input Fields, you can style the Text area of Gravity Forms. Once you have set a style for the input fields, you must style the text area in a similar way to maintain the form style. The Plus Addons for Elementor Gravity Form widget has all the necessary styling options to help you do so.<\/p>\n\n\n\n
You can find all the styling options under the Textarea Fields Styling<\/strong> section.<\/p>\n\n\n\nStyling Submit Button of Gravity Forms in Elementor<\/h2>\n\n\n\n
As you know, with Gravity Forms, you can easily create multi-step forms as well, in multi-step forms, it adds Next and Previous buttons to the form along with the Submit Button. Styling them individually can be a hefty task but not so with The Plus Addons for Elementor Gravity Form widget.<\/p>\n\n\n\n
It has all the styling options needed to style all the buttons individually under Submit\/Next\/Previous Button<\/strong> section.<\/p>\n\n\n\n![\"gravity](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/gravity-forms-submit-styling.png\")
<\/figure>\n\n\n\nStyling Radio Button or Checkbox of Gravity Forms in Elementor<\/h2>\n\n\n\n
The Plus Addons for Elementor Gravity Form widget automatically adds a style to all the Radio Buttons and Checkboxes replacing the default styling. This will make your Radio Button and Checkbox style consistent across different browsers.<\/p>\n\n\n\n
You can further tweak the style from the Checkbox\/Radio Field <\/strong>section. You can manage things like typography, checked colour, unchecked colour, checked background colour, unchecked background colour etc.<\/p>\n\n\n\n![\"gravity](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/gravity-forms-checkbox-styling.png\")
<\/figure>\n\n\n\nStyling File Upload Button of Gravity Forms in Elementor<\/h2>\n\n\n\n
In a from File Upload Button is one of those tricky form elements that are very difficult to style even with custom CSS. <\/p>\n\n\n\n
To make your life easier, The Plus Addons for Elementor Gravity Form widget by default, adds a unique style to the File Upload Button.<\/p>\n\n\n\n
You can easily customize the styling, and if you are using the multi-file upload option, it has options to style that as well.<\/p>\n\n\n\n
So you can easily make the File Upload Button match your form design.<\/p>\n\n\n\n
How to Activate and use the Gravity Form Widget?<\/h2>\n\n\n\n
Go to <\/p>\n\n\n\n
- \n
- The Plus Settings <\/strong>\u2192 Plus widgets <\/strong><\/li>\n\n\n\n
- Search <\/strong>the widget name <\/strong>and turn on the toggle <\/strong>then <\/strong>click Save.<\/strong><\/li>\n<\/ul>\n\n\n\n
<\/figure>\n\n\n\nMake sure you have created at least one form in the Gravity Forms.<\/p>\n\n\n\n
Then add the Gravity Form widget on the page, go to Gravity Form<\/strong> > Select Form<\/strong>, and choose your form from the dropdown list.<\/p>\n\n\n\n
You can show or hide the form title from the Title<\/strong> toggle. You can also use ajax for your form submission by turning on the Ajax Form Submit<\/strong> toggle.<\/p>\n\n\n\n
If you are using the Download Monitor extension of Gravity Forms, you have to choose Download Monitor<\/strong> from the Compatibility<\/strong> dropdown under the Extra Options<\/strong> tab.<\/p>\n\n\n\n
Key features<\/h2>\n\n\n\n
- \n
- Easily style input fields<\/strong>: You can easily style the form input fields like text, email, URL, number, telephone etc. from one section.<\/li>\n\n\n\n
- Style Textarea<\/strong>: Easily style the text area of your form.<\/li>\n\n\n\n
- Style form heading and description<\/strong>: Manage the style of form heading and description.<\/li>\n\n\n\n
- Style label<\/strong>: You can manage the style of form labels.<\/li>\n\n\n\n
- Style the progress bar<\/strong>: If you are using a multi-step form, you can easily style the progress bar.<\/li>\n\n\n\n
- Checkbox\/Radio button styling<\/strong>: Add a beautiful style to checkboxes and radio buttons.<\/li>\n\n\n\n
- Style File Upload button<\/strong>: Easily style the tricky file upload button.<\/li>\n\n\n\n
- Outer styling<\/strong>: You can style the form outer section rows.<\/li>\n\n\n\n
- Style the Submit\/Next\/Previous button<\/strong>: Easily style the submit, next and previous buttons to match your website design.<\/li>\n\n\n\n
- Style form messages<\/strong>: You can even style the various form messages like form error messages, success messages or validation messages.<\/li>\n<\/ul>\n\n\n\n
Styling Input Field of Gravity Forms in Elementor<\/h2>\n\n\n\n
You can easily style the Input Fields of the Gravity Forms using The Plus Addons for Elementor Gravity Form widget. It has a vast range of styling options to make modern-looking Input Fields.<\/p>\n\n\n\n
To style the Gravity Forms Input Fields, go to the Style<\/strong> tab Input Fields Styling<\/strong>.<\/p>\n\n\n\n
<\/figure>\n\n\n\nStyling Text area of Gravity Forms in Elementor<\/h2>\n\n\n\n
Similar to the Input Fields, you can style the Text area of Gravity Forms. Once you have set a style for the input fields, you must style the text area in a similar way to maintain the form style. The Plus Addons for Elementor Gravity Form widget has all the necessary styling options to help you do so.<\/p>\n\n\n\n
You can find all the styling options under the Textarea Fields Styling<\/strong> section.<\/p>\n\n\n\n
Styling Submit Button of Gravity Forms in Elementor<\/h2>\n\n\n\n
As you know, with Gravity Forms, you can easily create multi-step forms as well, in multi-step forms, it adds Next and Previous buttons to the form along with the Submit Button. Styling them individually can be a hefty task but not so with The Plus Addons for Elementor Gravity Form widget.<\/p>\n\n\n\n
It has all the styling options needed to style all the buttons individually under Submit\/Next\/Previous Button<\/strong> section.<\/p>\n\n\n\n
<\/figure>\n\n\n\nStyling Radio Button or Checkbox of Gravity Forms in Elementor<\/h2>\n\n\n\n
The Plus Addons for Elementor Gravity Form widget automatically adds a style to all the Radio Buttons and Checkboxes replacing the default styling. This will make your Radio Button and Checkbox style consistent across different browsers.<\/p>\n\n\n\n
You can further tweak the style from the Checkbox\/Radio Field <\/strong>section. You can manage things like typography, checked colour, unchecked colour, checked background colour, unchecked background colour etc.<\/p>\n\n\n\n
<\/figure>\n\n\n\nStyling File Upload Button of Gravity Forms in Elementor<\/h2>\n\n\n\n
In a from File Upload Button is one of those tricky form elements that are very difficult to style even with custom CSS. <\/p>\n\n\n\n
To make your life easier, The Plus Addons for Elementor Gravity Form widget by default, adds a unique style to the File Upload Button.<\/p>\n\n\n\n
You can easily customize the styling, and if you are using the multi-file upload option, it has options to style that as well.<\/p>\n\n\n\n
So you can easily make the File Upload Button match your form design.<\/p>\n\n\n\n
- Style Textarea<\/strong>: Easily style the text area of your form.<\/li>\n\n\n\n
- Search <\/strong>the widget name <\/strong>and turn on the toggle <\/strong>then <\/strong>click Save.<\/strong><\/li>\n<\/ul>\n\n\n\n
![\"gravity](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/gravity-forms-upload-styling.png\")
<\/figure>\n\n\n\n