Gravity Forms plugin for Divi Theme

Free Trial

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.


Edit with the Theme Customiser

Theme Customizer

Set global styles for all your Gravity Forms with a few clicks. Making form creation easy!

Upload Preset File

Upload Preset Styles

Upload or download a preset style which can save you heaps of time with site creation.

Divi Module

Divi Module

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.

Gravity Forms Theme Customizer Settings

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:

Form Background

Change your form background with the option to add an image or select a colour using the Theme Customizer.

Form Title

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.

Form Footers

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.

Form Description

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.

Uploading a preset that you use can save lots of time. This is for the Global Theme Customizer.
Uploading a preset that you use can save lots of time. This is for the Global Theme Customizer.

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.

The upload of setting is done in the MRK WP menu area under Gravity Forms.
The upload of setting is done in the MRK WP menu area under Gravity Forms.


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.

Use the visual builder for your Gravity Forms in Divi Theme
Use the visual builder for your Gravity Forms in Divi Theme

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.

Content Options for our Gravity Form Module for Divi
Content Options for our Gravity Form Module for Divi

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.

Design tab for your Gravity Form with Visual Builder Support
Design tab for your Gravity Form with Visual Builder Support.

Advanced Tab

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.

The advanced tab allows for CSS, transition animations and visibility options to be used on each form module.
The advanced tab allows for CSS, transition animations and visibility options to be used on each form module.


Frequently Asked Questions

  • Does the Gravity Form Plugin work with Extra Theme?

    Yes, the plugin works well with Extra theme by Elegant Themes.
  • 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.

Reviews

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

Product Pricing

Single Site

$14.99
  • Annual
$49.99
  • Lifetime

5 Sites

$29.99
  • Annual
$89.99
  • Lifetime

Unlimited

$59.99
  • Annual
$179.99
  • Lifetime

* All prices in $USD. These prices do not include local taxes.

Secure payments by Freemius - Sell and market freemium and premium WordPress plugins & themes

buildDependencies

To use this product you need to have the following plugins installed on your WordPress installation:

insert_chartProduct Stats

Version5.3.1
Last UpdatedMarch 9, 2020
RequiresWordPress4.8+
TestedWordPress 5.2.0
Change LogView

Changelogs

5.3.1 -March 9, 2020
  • Fixed warning for Missing Form ID
  • Tested WordPress 5.4
5.3.0 -January 27, 2020
  • Added support for theme Extra
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`.
  • Bug fix. In the frontend builder, gravity forms html was hidden. When javascript associated with gravity form is not able to run, the form remains hidden. Added a fix in frontend builder javascript to show the form when the components `rendering` is done.
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