Title: Divi Gravity Forms (WP Tools)
Author: wptools
Published: <strong>2019 年 10 月 24 日</strong>
Last modified: 2025 年 12 月 29 日

---

搜索插件

![](https://ps.w.org/wp-tools-gravity-forms-divi-module/assets/banner-772x250.png?
rev=2179347)

![](https://ps.w.org/wp-tools-gravity-forms-divi-module/assets/icon-256x256.png?
rev=2179347)

# Divi Gravity Forms (WP Tools)

 作者：[wptools](https://profiles.wordpress.org/wpt00ls/)

[下载](https://downloads.wordpress.org/plugin/wp-tools-gravity-forms-divi-module.9.1.0.zip)

 * [详情](https://cn.wordpress.org/plugins/wp-tools-gravity-forms-divi-module/#description)
 * [评价](https://cn.wordpress.org/plugins/wp-tools-gravity-forms-divi-module/#reviews)
 *  [安装](https://cn.wordpress.org/plugins/wp-tools-gravity-forms-divi-module/#installation)
 * [开发进展](https://cn.wordpress.org/plugins/wp-tools-gravity-forms-divi-module/#developers)

 [支持](https://wordpress.org/support/plugin/wp-tools-gravity-forms-divi-module/)

## 描述

> Embed gravity forms in Divi visual builder. Add styles for gravity forms border,
> background, title, description, inputs, labels, placeholder, errors, submit button&
> more. Premium version has 7-day FREE trial. No upfront payments needed.

It has dependencies on the following,

 * [Divi Theme](http://bit.ly/2xcicxw) – Affiliate link
 * [Gravity Form](https://rocketgenius.pxf.io/Rj0yR) – Affiliate link

With the FREE plugin you can,
 * Add a gravityform on a divi page using the visual
builder. * Configure the gravityform shortcode params

### Gravityform Shortcode Parameters

 * **Show Title** – Toggle to display the form title. Defaults is `on`
 * **Show Description** – Toggle to display the form description. Defaults is `on`
 * **Ajax** – Toggle to use AJAX to submit the form. Defaults is `off`
 * **Tab Index** – Specify the starting tab index for the fields of this form
 * **Field Values** – Specify the default field values.
    - Example: field_values=’check=First Choice,Second Choice’. See also https://
      docs.gravityforms.com/using-dynamic-population/ for detailed information on
      dynamic population.

### Premium Plugin

Premium plugin is available at [ https://wptools.app/wordpress-plugin/gravity-forms-divi-module/](https://wptools.app/wordpress-plugin/gravity-forms-divi-module/?utm_source=wp&utm_medium=plugin-page&utm_campaign=gf-divi&utm_content=description)

> We offer a 7-day FREE trial on the premium plugin.

### Style Form Background, Spacing & Border

Set color, gradient, image or video backgrounds. Add border, margin & padding to
form wrapper.

### Style Gravity Form Title

Style the title typography and spacing using the divi module

### Style Gravity Form Description

To render gravityform description, toggle the **Show Description** to `on` in **
Gravityform Shortcode Parameters**.

Style the description typography and spacing using the divi module

### Style Gravity Form Section Break Field

Section break field adds a content separator to your gravity form – https://docs.
gravityforms.com/section-break/

Style the content’s title, description, spacing and border color using the divi 
module.

### Style Input Fields, Input Wrapper & Input Placeholder

 * Input fields are text, textarea, checkbox and radio fields.
 * `Input Wrapper` wraps an input field. Manage input wrappers margin and padding.
 * Add background, border and rounded corners for text, textarea and dropdown fields.
 * Manage typography for input fields in the `Input General` section.
    - Manage checkbox and radio typography settings in `Checkbox/Radio` section.
 * Manage margin and padding for text fields.
 * Manage typography for input placeholder text.

### Style Label, Sub-Label & Input Field Description

Style gravityform’s label, sub-label and description for the inputs.

Set typography and spacing for them.

### Style Field Wrapper

A `field wrapper` wraps the input field, label, sub-label and description.

Manage the field wrappers padding and margin in divi.

### Style Form & Field Validation Errors

 * **Form Validation Error** is a general validation error text for the whole form.
    - Manage typography, border color, margin and padding.
 * **Field Validation Error** shows the validation per field.
    - Manage typography, border color, background color, margin & padding.

### Style Forms Submission Confirmation Message

Form submission displays a message. Style typography & background of the confirmation
message.

### Style Gravityform Button

Set button alignment, typography, border, rounded corner and background color with
hover styles.

### Style Consent Field & Description

A gravityform consent field is a checkbox accompanied by description.
 It’s a compulsory
field.

Style the checkbox’s and description’s typography, margin & padding

### Style Gravityform Footer

Footer wraps the form buttons. Manage margin and padding for this element.

### Style Progress Bar

A multi-step gravityform has a progressbar at the top.
 Style the progressbar title’s
typography, progressbar’s background and font color.

### Custom CSS Setting

A fine-grained control over writing custom css for large number of form elements

## 屏幕截图

 * [[
 * Selecting gravityform and setting shortcode params in the divi module.
 * [[
 * Premium module features.

## 安装

How to install the `Divi Gravity Forms (WP Tools)` plugin and get it working.

 1. Upload `plugin-name.php` to the `/wp-content/plugins/` directory
 2. Activate the plugin through the ‘Plugins’ menu in WordPress

## 常见问题

### What are the dependencies for this plugin?

Plugin depends on
 * [Divi Theme](http://bit.ly/2xcicxw) * [Gravity Form](https://rocketgenius.pxf.io/Rj0yR)

## 评价

![](https://secure.gravatar.com/avatar/13207343abd7ebb24216e4733e931d41b80593d458f748274be712a3d9856004?
s=60&d=retro&r=g)

### 󠀁[Discovered Gravity Forms Styling For Dummies Plugin](https://wordpress.org/support/topic/discovered-gravity-forms-styling-for-dummies-plugin/)󠁿

 [carlstaffel](https://profiles.wordpress.org/carlstaffel/) 2026 年 1 月 23 日

I’m a visual designer and CSS isn’t in my wheelhouse. Old time Mac user because 
WYSIWYG won me over. Divi theme fits right in visually and so does this Gravity 
Forms Divi Module. It’s a must have.

![](https://secure.gravatar.com/avatar/2a739286023fb241b197b3bc259f0095611414239fc9741ed1e5894200baefac?
s=60&d=retro&r=g)

### 󠀁[Absolutely Amazing Add-On!](https://wordpress.org/support/topic/absolutely-amazing-add-on/)󠁿

 [ltyd2017](https://profiles.wordpress.org/ltyd2017/) 2024 年 11 月 17 日

I’m a very busy business owner who knows nothing about codes, etc.  If someone was
smart enough to create Divi to make WordPress so much easier, I thought “Why can’t
someone do the same thing for Gravity Forms?”  There are so many business owners
like myself who don’t have the time to learn all this stuff and frankly, it’s expensive
to hire it done. Seems there really was a genius who figured this all out.  This
is the coolest thing ever!  It’s EXACTLY what I was looking for and I’ve looked 
at a ton of add-ons.  BONUS: There are learning videos for every step of the way!
Prior to this, I tried to edit font, color, and line height in GF and simply couldn’t
come up with the right CSS codes and that’s even after copying cheat sheets from
all those websites! If you’re trying to create/edit Gravity Forms, then LOOK NO 
FURTHER!  This guy has done it!!  Truly!  Trust me!  Thanks WP Tools, you’ve taken
1000 lbs off my shoulders!!  Can’t wait to see what else you offer!  I’m a forever
fan! 

![](https://secure.gravatar.com/avatar/527e3b0e474972b74ceddfb6a3aa9e0cec5ee6a9a1903700f1c5f0e13dcf7c51?
s=60&d=retro&r=g)

### 󠀁[The Missing Divi Gravity Forms Module!](https://wordpress.org/support/topic/the-missing-divi-gravity-forms-module/)󠁿

 [robertstaddon](https://profiles.wordpress.org/robertstaddon/) 2023 年 11 月 8 
日

I always wished Divi had a built-in module to style Gravity Forms. This plugin is
it! It provides so many different options for styling each aspect of your forms 
to help them match the style of the rest of your site. The support team is helpful
and responsive. Highly recommend!

![](https://secure.gravatar.com/avatar/9f5646ad179dc903a75ef8016b2badd1ba903cc26971b2635dd062503c75024e?
s=60&d=retro&r=g)

### 󠀁[Like magic.](https://wordpress.org/support/topic/like-magic-12/)󠁿

 [AboutWebsites](https://profiles.wordpress.org/aboutwebsites/) 2023 年 3 月 9 日
1 回复

Makes my clunky old forms look totally pro with ZERO coding.

![](https://secure.gravatar.com/avatar/9fbd7576576982108ae7d6f90cfdd195b2f8f48130b02fb5803231dd7bb100b4?
s=60&d=retro&r=g)

### 󠀁[Makes customizing Gravity forms in Divi simple](https://wordpress.org/support/topic/makes-customizing-gravity-forms-in-divi-simple/)󠁿

 [Cara](https://profiles.wordpress.org/caraface/) 2022 年 5 月 16 日

This module saves me hours of CSS customizations, and integrates easily to match
the look and feel of the website.

![](https://secure.gravatar.com/avatar/4751da83d998ddabdb8ec14b1a088ea1710b73347bb15b43f36cc5ffd0066932?
s=60&d=retro&r=g)

### 󠀁[Exactly what I needed.](https://wordpress.org/support/topic/exactly-what-i-needed-701/)󠁿

 [seleis](https://profiles.wordpress.org/seleis/) 2020 年 6 月 4 日 1 回复

It annoys me that Divi hasn’t got a module link. This works perfectly.

 [ 阅读所有8条评价 ](https://wordpress.org/support/plugin/wp-tools-gravity-forms-divi-module/reviews/)

## 贡献者及开发者

「Divi Gravity Forms (WP Tools)」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ wptools ](https://profiles.wordpress.org/wpt00ls/)
 *   [ Freemius ](https://profiles.wordpress.org/freemius/)

[帮助将「Divi Gravity Forms (WP Tools)」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/wp-tools-gravity-forms-divi-module)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/wp-tools-gravity-forms-divi-module/)，
查看[SVN仓库](https://plugins.svn.wordpress.org/wp-tools-gravity-forms-divi-module/)，
或通过[RSS](https://plugins.trac.wordpress.org/log/wp-tools-gravity-forms-divi-module/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/wp-tools-gravity-forms-divi-module/)。

## 更新日志

#### 9.1.0

 * Updated: Styling for divi 5 module

#### 9.0.0

 * Added: Divi 5 integration with backward compatibility

#### 8.5.3

 * Bug Fix: Issue with content description css

#### 8.5.2

 * Updated: Freemius SDK

#### 8.5.1

 * Updated: Freemius SDK

#### 8.5.0

 * Added: Support for “Orbital” theme in the divi builder and admin notice to inform
   user if default theme is set to orbital

#### 8.4.0

 * Added: “Save And Continue”, “Send Link” button styles
 * Updated: WordPress 6.6 compatible

#### 8.3.0

 * Fixed incompatibility with WordPress 6.5 which caused a critical error.

#### 8.2.0

 * Added divi module settings for form fields row and column gap
 * WordPress 6.4.3 compatible

#### 8.1.2

 * Added font size, letter spacing, alignment, line height and text shadow for field
   asterisk (and required text)
 * WordPress 6.4.2 compatible
 * Freemius sdk upgrade

#### 8.1.1

 * WordPress 6.4 compatible

#### 8.1.0

 * Improvement – Moved DI container to an unique namespace to avoid clashes

#### 8.0.0

 * Added support for php 8.1.+
 * Upgraded freemius
 * Field validation error message background debug message fix

#### 7.1.1

 * Fixed width styling for AM/PM time select box.

#### 7.1.0

 * Freemius upgrade
 * Product title divi design settings added
 * Product description divi design settings added
 * Product price label divi design settings added
 * Product calculated price divi design settings added

#### 7.0.2

 * Fixed form description selector that caused styling issues

#### 7.0.0

 * Checkbox sizing added
 * Radio sizing added
 * Spacing settings for asterisk legend text
 * Spacing settings for current Checkbox/Radio Text toggle moved to “Checkbox/Ratio
   Container”
 * Added spacing settings for ‘Checkbox/Radio Text’
 * Added responsive height settings for select & text field.
 * Fixed next and previous button selector issue.
 * Added ability to change text color for checked radio / checkbox field.
 * Added compatibility with gravity forms 2.7+
 * Added settings for next and previous button styling

#### 6.7.2

 * Removed php version requirement

#### 6.7.1

 * Added WP filter `wpt_divi_gravity_form_id` that helps to programmatically change
   the gravity form ID for the divi module https://gist.github.com/wpt00ls/b969f097a9e5a40d4fc83f35a47b624c.

#### 6.7.0

 * Inline button fixes
 * Freemius SDK upgrade

#### 6.6.6

 * Address field base styles

#### 6.6.5

 * Submit button alignment fix.

#### 6.6.4

 * Composer compatible with php 7.2.0

#### 6.6.3

 * Upgraded freemius to 2.4.3
 * WordPress 5.9.1 compatible

#### 6.6.2

 * Update for sticky scroll compatibility – Divi v4.10+

#### 6.6.1

 * Added compatibility with sticky/scroll effects

#### 6.6.0

 * Added box-shadow settings to text, textarea and select fields.

#### 6.5.0

 * Added asterisk color styling
 * Added “asterisk text legend” text styling.
 * Added new selectors for validation error field container.
 * Added background color for form validation error message.

#### 6.4.0

 * Added styling for date dropdown, date field and date time field.

#### 6.3.0

 * Added compatibility for gravityforms-2.5_rc3

#### 6.2.0

 * Freemius SDK updated to 2.4.2

#### 6.0.1

 * Fixed custom height style for text and select inputs.

#### 6.0.0

 * Added support for gravity forms 2.5 (beta). This version onwards, gravity forms
   has revamped its internal structure that affects the styling of this plugin.

#### 5.2.2

 * Upgraded freemius sdk to 2.4.0.1.

#### 5.2.1

 * Added missing support for `field_values` gravityform shortcode param.

#### 5.2.0

 * Tested with WordPress 5.4.2
 * Added compatibility for Divi 4.5.1+

#### 5.1.0

 * Freemius SDK upgraded to 2.3.2
 * Fixed divi module advanced field settings for FREE version of the plugin.
 * Tested with WordPress 5.4

#### 5.0.1

 * Moved freemius menu pages under Divi in admin.
 * Added plugin documentation in admin menu landing page.

#### 5.0.0

 * Free version for wordpress.org

## 额外信息

 *  版本 **9.1.0**
 *  最后更新：**4 月前**
 *  活跃安装数量 **2,000+**
 *  WordPress 版本 ** 4.5 或更高版本 **
 *  已测试的最高版本为 **6.9.4**
 *  PHP 版本 ** 7.2.5 或更高版本 **
 *  语言
 * [English (US)](https://wordpress.org/plugins/wp-tools-gravity-forms-divi-module/)
 * 标签
 * [divi](https://cn.wordpress.org/plugins/tags/divi/)[divi5](https://cn.wordpress.org/plugins/tags/divi5/)
   [gravity forms](https://cn.wordpress.org/plugins/tags/gravity-forms/)[GravityForms](https://cn.wordpress.org/plugins/tags/gravityforms/)
   [gravityforms divi](https://cn.wordpress.org/plugins/tags/gravityforms-divi/)
 *  [高级视图](https://cn.wordpress.org/plugins/wp-tools-gravity-forms-divi-module/advanced/)

## 评级

 5 星（最高 5 星）。

 *  [  8 条 5 星评价     ](https://wordpress.org/support/plugin/wp-tools-gravity-forms-divi-module/reviews/?filter=5)
 *  [  0 条 4 星评价     ](https://wordpress.org/support/plugin/wp-tools-gravity-forms-divi-module/reviews/?filter=4)
 *  [  0 条 3 星评价     ](https://wordpress.org/support/plugin/wp-tools-gravity-forms-divi-module/reviews/?filter=3)
 *  [  0 条 2 星评价     ](https://wordpress.org/support/plugin/wp-tools-gravity-forms-divi-module/reviews/?filter=2)
 *  [  0 条 1 星评价     ](https://wordpress.org/support/plugin/wp-tools-gravity-forms-divi-module/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/wp-tools-gravity-forms-divi-module/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/wp-tools-gravity-forms-divi-module/reviews/)

## 贡献者

 *   [ wptools ](https://profiles.wordpress.org/wpt00ls/)
 *   [ Freemius ](https://profiles.wordpress.org/freemius/)

## 支持

有话要说吗？是否需要帮助？

 [查看支持论坛](https://wordpress.org/support/plugin/wp-tools-gravity-forms-divi-module/)

## 捐助

您愿意支持这个插件的发展吗?

 [ 捐助此插件 ](https://wptools.app/)