< Toggle Sidebar > Toggle Sidebar

Gravity Forms plugin for Divi Theme

The Ultimate Gravity Forms Styling Tool for Divi

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.

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 sure your WordPress website with Divi is compatible with Gravity Forms.

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.


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.

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

Changelogs

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