A versatile divi module to integrate gravity forms with divi theme builder. Create custom-designed forms for your website using wide-range of style cu …

Jessie Walczak

Module for Gravity Forms in Divi Builder

Module for Gravity Forms in Divi Builder.

Freemius

wptools

<blockquote>
<p>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.</p>
</blockquote>
<p>It has dependencies on the following,</p>
<ul>
<li><a href="http://bit.ly/2xcicxw" rel="nofollow ugc">Divi Theme</a> – Affiliate link</li>
<li><a href="https://rocketgenius.pxf.io/Rj0yR" rel="nofollow ugc">Gravity Form</a> – Affiliate link</li>
</ul>
<p>With the FREE plugin you can,<br />
* Add a gravityform on a divi page using the visual builder.<br />
* Configure the gravityform shortcode params</p>
<h3>Gravityform Shortcode Parameters</h3>
<p><iframe loading="lazy" title="How To Embed Gravity Form In Divi Theme" width="750" height="422" src="https://www.youtube.com/embed/jwId9CUgxOc?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<ul>
<li><strong>Show Title</strong> – Toggle to display the form title. Defaults is <code>on</code></li>
<li><strong>Show Description</strong> –  Toggle to display the form description. Defaults is <code>on</code></li>
<li><strong>Ajax</strong> – Toggle to use AJAX to submit the form. Defaults is <code>off</code></li>
<li><strong>Tab Index</strong> – Specify the starting tab index for the fields of this form</li>
<li><strong>Field Values</strong> – Specify the default field values.
<ul>
<li>Example: field_values=’check=First Choice,Second Choice’. See also https://docs.gravityforms.com/using-dynamic-population/ for detailed information on dynamic population.</li>
</ul>
</li>
</ul>
<h3>Premium Plugin</h3>
<p>Premium plugin is available at <a href="https://wptools.app/wordpress-plugin/gravity-forms-divi-module/?utm_source=wp&utm_medium=plugin-page&utm_campaign=gf-divi&utm_content=description" rel="nofollow ugc"> https://wptools.app/wordpress-plugin/gravity-forms-divi-module/</a></p>
<blockquote>
<p>We offer a 7-day FREE trial on the premium plugin.</p>
</blockquote>
<h3>Style Form Background, Spacing & Border</h3>
<p><iframe loading="lazy" title="How To Add Background, Spacing And Border To Gravity Form Wrapper In Divi" width="750" height="422" src="https://www.youtube.com/embed/Hg8fnxb4l5A?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>Set color, gradient, image or video backgrounds. Add border, margin & padding to form wrapper.</p>
<h3>Style Gravity Form Title</h3>
<p><iframe loading="lazy" title="How To Style Gravity Form Title In Divi" width="750" height="422" src="https://www.youtube.com/embed/Tl88W1U2Uzg?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>Style the title typography and spacing using the divi module</p>
<h3>Style Gravity Form Description</h3>
<p><iframe loading="lazy" title="How To Style Gravity Form Description In Divi" width="750" height="422" src="https://www.youtube.com/embed/Iy_JBVdFJSQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>To render gravityform description, toggle the <strong>Show Description</strong> to <code>on</code> in <strong>Gravityform Shortcode Parameters</strong>.</p>
<p>Style the description typography and spacing using the divi module</p>
<h3>Style Gravity Form Section Break Field</h3>
<p><iframe loading="lazy" title="How To Style Section Break's Title Description And Wrapper" width="750" height="422" src="https://www.youtube.com/embed/xJLCScsdg3o?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>Section break field adds a content separator to your gravity form – https://docs.gravityforms.com/section-break/</p>
<p>Style the content’s title, description, spacing and border color using the divi module.</p>
<h3>Style Input Fields, Input Wrapper & Input Placeholder</h3>
<p><iframe loading="lazy" title="How To Style Gravityform Input Field, Input Wrapper & Placeholder In Divi" width="750" height="422" src="https://www.youtube.com/embed/9Lsyn7Wdhdc?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<ul>
<li>Input fields are text, textarea, checkbox and radio fields. </li>
<li><code>Input Wrapper</code> wraps an input field. Manage input wrappers margin and padding.</li>
<li>Add background, border and rounded corners for text, textarea and dropdown fields.</li>
<li>Manage typography for input fields in the <code>Input General</code> section.
<ul>
<li>Manage checkbox and radio typography settings in <code>Checkbox/Radio</code> section.</li>
</ul>
</li>
<li>Manage margin and padding for text fields.</li>
<li>Manage typography for input placeholder text.</li>
</ul>
<h3>Style Label, Sub-Label & Input Field Description</h3>
<p><iframe loading="lazy" title="How To Style Gravityform Label Sublabel And Field Description Text In Divi" width="750" height="422" src="https://www.youtube.com/embed/XFxkwGRRE4c?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>Style gravityform’s label, sub-label and description for the inputs.</p>
<p>Set typography and spacing for them.</p>
<h3>Style Field Wrapper</h3>
<p><iframe loading="lazy" title="How To Style Gravityform Field Wrapper In Divi" width="750" height="422" src="https://www.youtube.com/embed/XGhikyjuNBM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>A <code>field wrapper</code> wraps the input field, label, sub-label and description.</p>
<p>Manage the field wrappers padding and margin in divi.</p>
<h3>Style Form & Field Validation Errors</h3>
<p><iframe loading="lazy" title="How To Style Gravityform Validation Error Messages In Divi" width="750" height="422" src="https://www.youtube.com/embed/CUBm1jCkKj0?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<ul>
<li><strong>Form Validation Error</strong> is a general validation error text for the whole form.
<ul>
<li>Manage typography, border color, margin and padding.</li>
</ul>
</li>
<li><strong>Field Validation Error</strong> shows the validation per field.
<ul>
<li>Manage typography, border color, background color, margin & padding.</li>
</ul>
</li>
</ul>
<h3>Style Forms Submission Confirmation Message</h3>
<p>https://www.youtube.com/watch?v=Vk_uk</p>
<p>Form submission displays a message. Style typography & background of the confirmation message.</p>
<h3>Style Gravityform Button</h3>
<p><iframe loading="lazy" title="How To Style Gravityform Button In Divi" width="750" height="422" src="https://www.youtube.com/embed/F7fNxHWb5RQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>Set button alignment, typography, border, rounded corner and background color with hover styles.</p>
<h3>Style Consent Field & Description</h3>
<p><iframe loading="lazy" title="How To Style Gravityform Consent Field And Description In Divi" width="750" height="422" src="https://www.youtube.com/embed/tFia_Ud54Ws?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>A gravityform consent field is a checkbox accompanied by description.<br />
It’s a compulsory field.</p>
<p>Style the checkbox’s and description’s typography, margin & padding</p>
<h3>Style Gravityform Footer</h3>
<p><iframe loading="lazy" title="How To Style Gravityform Footer In Divi" width="750" height="422" src="https://www.youtube.com/embed/kbwzORqnWE8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>Footer wraps the form buttons. Manage margin and padding for this element.</p>
<h3>Style Progress Bar</h3>
<p><iframe loading="lazy" title="How To Style Gravityform Progressbar In Divi" width="750" height="422" src="https://www.youtube.com/embed/66DP_JBjGas?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>A multi-step gravityform has a progressbar at the top.<br />
Style the progressbar title’s typography, progressbar’s background and font color.</p>
<h3>Custom CSS Setting</h3>
<p><iframe loading="lazy" title="Custom CSS Style Option For Gravityform In Divi" width="750" height="422" src="https://www.youtube.com/embed/ly4WiUtYcD8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>A fine-grained control over writing custom css for large number of form elements</p>


WP Tools Gravity Forms Divi Module

What else can I say, this plugin is super easy to use, and works great. 

Alternatives to WP Tools Gravity Forms Divi Module

Top alternatives