Gravity Forms plugin for Divi Theme
The Ultimate Gravity Forms Styling Tool for Divi
Looking to style your Gravity Forms with the Divi Builder front end editor? The solution is our Gravity Forms styler plugin for Divi Theme.
Join hundreds of other WordPress Developers and improve your customers browsing experience.
The Divi Theme from Elegant Themes will help you make a beautiful website. Use our plugin to make your Gravity Forms match the beauty of the Divi Theme.
With this plugin you no longer need custom css, just use our Divi Gravity Forms Plugin. The plugin helps you to style your Gravity Forms via the Theme Customizer and Divi Builder. We have full front end support so you can see your changes as you style your form.
The Gravity Forms Divi plugin includes a Divi Module to insert Gravity Forms on any page. With all the styling tools you can expect from the Divi Builder.
Set global styles for all your Gravity Forms with a few clicks. Making form creation easy!
Upload Preset Styles
Upload or download a preset style which can save you heaps of time with site creation.
Inject a Gravity Form directly into any page. Add custom styling to specific forms. using the Divi Builder.
With these features all bundled together you get a great result for the visual styles of your Gravity Forms in the Divi Theme.
Make your Divi Theme WordPress website compatible with Gravity Forms the easy way. Avoid Custom CSS and get a beautiful Contact Form.
Lets review the features of our Divi Gravity Forms Plugin.
1. Gravity Forms Styles – Theme Customizer
Let’s face it, the default Gravity Forms are not particularly beautiful when inserted in the Divi Builder. Creating custom styles for those Gravity Forms is also difficult. All your Divi Builder tools are of little use in solving this problem.
Our plugin saves a lot of time when building Divi websites with Gravity Forms. Now you can set your Divi styles once in the Theme Customizer for your Gravity Forms and you are done. You can have all your forms looking the way you want across your entire site.
The Theme Customizer settings are intuitive and easy to use. This saves you loads of time and creates professional looking forms.
Need a visual reference to the Theme Customizer settings?
Watch the video below to learn more about how to style your Gravity Forms using our plugin and the Theme Customizer.
Once you have a form designed, all your forms will get that style. Plus if you want to make any changes later, you simply edit the settings inside the Theme Customizer and all of your forms update at once. Pretty great, huh?
Full List of Theme Customizer Options for Gravity Forms.
The following are the Theme Customizer options for plugin adds for your Gravity Forms elements:
Change your form background with the option to add an image or select a colour using the Theme Customizer.
You can set the for Title attributes here. Anything you can do with text in css is possible. Select a specific font type, spacing, line height and text orientation / alignment.
Form Input and Label, Sub Label
Full controls for the Input field and labels can be handled here.
Form Progress Bar
Multi-step forms use a progress bar to deliver an understanding of how much of a form is complete. Control the display of the bar using the Theme Customizer.
The Form footer is used in gravity forms for the bottom of your form. For some designs you may want a specific action bar area and control over the footer. This is very useful for a wizard setup.
Form Spacing and Borders
Setting the margin, padding and border around your form with these settings.
Control the text orientation, font, font size, font style, color, letter spacing and line height of your Gravity Form Description.
Form Submit Button
Making your buttons have the styling required for your brand is often one of the top requirements for a gravity form. Get full control here.
Form Error Message
You can control how an error message is displayed down to font, backgrounds and error title.
2. Import/Export Gravity Form Styles
The plugin allows you to Import or Export your Gravity Forms Theme Customizer settings.
This helps to replicate style defaults across your websites. Making Gravity Forms both powerful and beautiful too!
You can find the import and export inside the MRK WP Menu -> Gravity Forms Divi menu.
3. Gravity Forms Divi Module
We created a special Divi Module so you can insert a Gravity Form directly onto your page using the visual page builder.
With our Divi Gravity Forms plugin you can also style globally, using the theme customizer.
You can also use the visual builder each time your insert a form. The reasoning behind this is that at times you may want to add specific styles to certain forms and not others. A landing page is a good example. You might require a unique design for your form on a landing page.
For a landing page you would normally create a form ID and add code to your Divi child theme to style the form. With our visual builder support you no longer need to do that. Our custom styles can be set within the visual builder which means no custom CSS code is required.
Divi Visual Builder support for Gravity Forms
The plugin now includes full front end builder support. We have the same menus as other modules. This makes for quick learning and means the same techniques used elsewhere can be applied to the Gravity Form plugin for Divi.
Content Tab for Divi Visual Builder
In the content tab you can edit the default implementation of your Gravity Form. You can select which form you want to embed and its shortcode options.
You can also set parameters for your default form, backgrounds and admin labels.
Design Tab for Divi Visual Builder
In this tab we have a range of extensive options. Every label type, button and option that could be styled is available.
If you are still stuck and need further editing you can make use of the advanced tab.
This tab allows direct adding of CSS for your Gravity Form on each module.
Frequently Asked Questions
Is there a way I can set global site wide style defaults for Gravity Forms?There are two ways you can do this. The easy way is to use our Gravity Forms Divi Plugin. Alternatively you will need to edit the code in your child theme, not fun.
Are there any plugin dependencies?Yes. You will need Gravity Forms and Divi Theme to use this plugin.
Does this plugin come with Gravity Forms?No. You will need to purchase the Gravity Forms plugin separately.
My button style is not working correctly, what can I do?
If your button style is not working you will need to make sure you are using our Divi Gravity Form Module.
Divi has a range of CSS with important statements. This css can be hard to overwrite. Using our Divi Module for Divi visual builder will fix these issues.
Does Divi need Gravity Forms?
No. Gravity forms is an additional form plugin for WordPress. Divi does have a divi form builder which is great for a contact form.
Gravity Forms is a premium plugin and goes beyond being a simple form tool. It has lots of great integrations with Zapier and other CRM tools.
You can read our article here for more information on why it is our default choice – When to use Gravity forms on your Divi website
Does your Plugin work with Extra Theme from Elegant Themes?
We have not tested it with Extra Theme. If you want Extra Theme support please send us a feature request on the contact page of this site.
Is there a free alternative to your plugin?
The closest we have found is Surbma | Divi & Gravity Forms. It has default styling and no front end builder support.
Perfect for those of us using Gravity Forms and Divi.
Actually you have a very nice plugin here. Very helpful for those of us doing DIY sites and don't want to get into much coding. Thank you for asking what would help me. So glad to hear you are continuing to make enhancements to make the plugin even more robust.
- Rick Sorenson
FREE 7 DAY TRIAL. NO CREDIT CARD NEEDED
* All prices in $USD. These prices do not include local taxes.
Links to related documentation and usage of this plugin.
5.2.3 -January 17, 2020
- Theme customizer - button orientation default value is right as per gravity form defaults.
5.2.2 -January 17, 2020
- Theme customizer - button text color on hover fix.
- Theme customizer - converted button padding text field to sliders.
- Theme customizer - added button margin slider fields.
- Divi module - `Has Border` default from theme customizer wasn't being applied. fixed it.
5.2.1 -January 14, 2020
- Theme customizer bug fix when migrating from old plugin
5.2.0 -January 13, 2020
- Linked default values from theme customizer to divi module fields.
- Freemius SDK upgrade to 2.3.2
5.1.1 -December 9, 2019
- Custom support form in admin added.
- Fixed issue where select and textarea styles were not applied.
- Convert most of the divi module styles to output as variables.
5.0.0 -September 12, 2019
- Completely revamped base css to use css variables
- Using kirki theme customizer
- Migrated old customizer settings to new theme customizer setting.
- Sublabel theme customizer - typography and spacing
- Footer theme customizer - background, border, border radius and spacing
- Input theme customizer - border and border radius.
- Divi module - footer spacing, border radius and border. Input background color, border and border radius.
4.2.1 -August 13, 2019
- Added responsive margin and padding options for `title`, `description`, `label`, `sub label`, `input` and `button`.
4.2.0 -July 12, 2019
- Fixed incorrectly enqueued assets.
- Bug fix. Dropdown for gravityform select in divi module was saving form title the `id`. This seems due to a likely bug in divi code. In an array options with only integers as `key` values, the `value` (gravityform title) is used as `key` and `value`.
4.1.3 -July 3, 2019
- Changed namespace and plugin constants to avoid conflict with diviframework plugin
4.1.2 -July 1, 2019
- Added a fix for theme customizer page which gives a fatal error when Divi theme is not activated.
4.1.1 -June 27, 2019
- Branding and plugin name update.
- Added free trial plan for 7 days
4.1.0 -June 14, 2019
- Freemius integration for plugin updates and payments.
4.0.1 -April 26, 2019
- Selecting the first gravity form from the select dropdown in the builder wasn't working. Fixed it.
4.0.0 -March 19, 2019
- Full divi frontend builder support added to the gravity form module
- Fixed issue with licensing code on activation
3.0.0 -September 25, 2018
- Rebranded plugin to "Gravity Forms Divi Plugin". Plugin integrates gravity forms styler and divi module
- Divi builder frontend support added.
2.1.2 -April 25, 2018
- Fixed critical bug
- updated licensing code.
2.1.1 -April 6, 2018
- Plugin rename to 'Gravity Forms Styler'
- Added border radius for text,email, textarea and select input elements
2.0.3 -December 6, 2017
- Added theme customizer
- Made settings backward compatible.
1.0.4 -June 8, 2017
- Rearranged alignment fields in the admin
1.0.3 -June 8, 2017
- Added ability to align title and button
1.0.2 -May 2, 2017
- Fixed bug where plugin gives fatal error when divi is not activated.
1.0.1 -March 15, 2017
- Added font-face settings for the form.
- Added font-size settings for title, description, input labels and input areas.
1.0.1 -March 15, 2017
- Added font face setting to select font family
- Added font size selector for gravity form's title, description, label and input elements.
- Added padding setting for submit button.
1.0.0 -January 27, 2017
- Initial Release
1.0.0 -January 27, 2017
- Initial release