Divi Plugin Spotlight: Divi Gravity Paperwork

by | Mar 19, 2023 | Etcetera | 0 comments

Divi Gravity Paperwork is a plugin for the Divi Builder that permits you to customize your Gravity Form from the Divi Builder. The plugin supplies a brand spanking new module to the Divi Builder with possible choices to change the design of every aspect of the form. When you’re a Gravity Form shopper, this plugin will have the same opinion mix Divi and Gravity Bureaucracy and can help you trade the form design very similar to you most likely can another section for your Divi internet web page. In this article, we’ll take a look at the settings that come with the Divi Gravity Bureaucracy Module and show you the best way you’ll customize your form throughout the Divi Builder.

Let’s get started!

Setting up Divi Gravity Bureaucracy

First, you will need to have the Gravity Bureaucracy plugin installed and activated for your website.

Divi Plugin Highlight Divi Gravity Forms Gravity Forms

Divi Gravity Bureaucracy can be installed very similar to another WordPress plugin. Open the plugins internet web page inside the WordPress dashboard and click on on Add New. Click on on Upload Plugin on the most productive, then choose the .zip plugin record from your computer.

Divi Plugin Highlight Divi Gravity Forms Install

As quickly because the plugin is installed, flip at the plugin.

Divi Plugin Highlight Divi Gravity Forms Activate

Divi Gravity Bureaucracy

The Divi Gravity Bureaucracy plugin means that you can add and customize the Gravity Form right kind throughout the Divi Builder. To get started, you’ll first want to assemble the form throughout the Gravity Bureaucracy settings internet web page. After you have laid out the basic building and function of your contact form, you’ll switch over to the Divi Builder to customize the design.

Divi Plugin Highlight Divi Gravity Forms Build Form

Open your internet web page inside the Divi Builder and click on at the grey plus icon to insert a brand spanking new module. Choose the Gravity Form module from the record.

Divi Plugin Highlight Divi Gravity Forms Add Module

Content material subject matter Settings

Open the Gravity Form module settings to the content material subject matter tab. At the side of the default Background and Admin Label sections, the module comes with a brand spanking new segment known as Shortcode Parameters.

See also  36 Stunning New Guide Templates [Free Download]

Shortcode Parameters

Choose the Gravity Form you need to turn from the Form ID dropdown. Once made up our minds on, your form will appear on the internet web page.

Divi Plugin Highlight Divi Gravity Forms Form ID

During the shortcode parameters settings, you’ll moreover choose to show or conceal the identify and description and make allowance or disable Ajax. Additionally, you’ll specify the start tab index for the form fields and specify default field values.

Divi Plugin Highlight Divi Gravity Forms Shortcode Parameters

Design Settings

Nearly all of the customization settings for Divi Gravity Bureaucracy is located underneath the Design tab. The ones settings give you great flexibility in conjunction with your form’s glance, and also you’ll trade the design of almost every aspect of your form. Let’s take a look at the opposite design settings you’ll use.

Form Titles

First is the form identify settings.

Divi Plugin Highlight Divi Gravity Forms Form Title

You’ll trade the identify margin padding, font settings, alignment, color, dimension, spacing, line top, and shadow.

Divi Plugin Highlight Divi Gravity Forms Title Text

Form Description

The form description settings are the an identical as the form identify settings. Right here’s the form description with customized font, text color, text dimension, and line top.

Divi Plugin Highlight Divi Gravity Forms Description

Field Wrapper

The sector wrapper settings can help you trade the margin and padding of the fields. In this example, I lowered the perfect margin so that the fields were located closer together.

Divi Plugin Highlight Divi Gravity Forms Field Wrapper

Label

Beneath the label tab, you’ve gotten all of the default text customization possible choices. I customized the label font and adjusted the text color to green.

Divi Plugin Highlight Divi Gravity Forms Label

Sub Label

The sub label settings moreover serve as the default text design possible choices. In this example, the sub labels are the “First” and “Final” text labels underneath the name fields. I customized the sub label font.

Divi Plugin Highlight Divi Gravity Forms Sub Label

Field Description

The sector description example is located above the Long Question field. Proper right here I lowered the perfect padding to hold the text closer to the label and adjusted the font.

Divi Plugin Highlight Divi Gravity Forms Field Description

Input Wrapper

The input wrapper settings can help you trade the margin or padding around the input box. In this example, I lowered the perfect margin, bringing the input box closer to the label and description.

Divi Plugin Highlight Divi Gravity Forms Input

Input Not unusual

The input elementary settings segment is where you’ll completely customize the design of the input box. You’ll regulate the background color, add rounded corners, trade the border, and completely customize the input font settings.

Divi Plugin Highlight Divi Gravity Forms Input General

Proper right here I added rounded corners, changed the input background color, changed the border color, and adjusted the text font.

Divi Plugin Highlight Divi Gravity Forms Input General 2

Text/Textarea

Throughout the text/textarea settings, you’ll trade the margin, padding, or add a box shadow to the fields.

Divi Plugin Highlight Divi Gravity Forms Text

Choose

The choose segment has the an identical settings for the reason that text/textarea segment. You’ll customize the margin, padding, and box shadow for your choose fields.

Divi Plugin Highlight Divi Gravity Forms Select

Checkbox/Radio Text Selection

Proper right here you’ll trade the margin and padding, and customize the font for the checkbox/radio text selection. I customized the font in this example.

Divi Plugin Highlight Divi Gravity Forms Checkbox

Input Placeholder Text

You’ll customize the font settings for the input placeholder text proper right here. I changed the font to Montserrat.

Divi Plugin Highlight Divi Gravity Forms Input Placeholder

Checklist Field Column Text

Equivalent settings proper right here for the reason that input field text segment. Once over again, I customized the font for the record field column text.

See also  Tips on how to Create WordPress Bureaucracy With Dropdown Fields (Simple Way)

Divi Plugin Highlight Divi Gravity Forms List Field

Section Field Wrapper

The segment field wrapper settings can help you trade the margin, padding, and border bottom color. I added somewhat to my form and added a perfect margin and adjusted the border bottom color.

Divi Plugin Highlight Divi Gravity Forms Section Field Wrapper

Section Field Title

To customize the segment field identify, I modified the font, font weight, font style, text color, and letter spacing proper right here.

Divi Plugin Highlight Divi Gravity Forms Section Field Title

Section Field Description

In this example, I added an overview to the segment and altered the font. I moreover added some bottom padding so that you can upload space between the description and the street.

Divi Plugin Highlight Divi Gravity Forms Section Field Description

Consent Checkbox

The design settings for the consent checkbox can help you regulate the margin, padding, and font settings. Proper right here I modified the font.

Divi Plugin Highlight Divi Gravity Forms Consent Checkbox

Consent Description

Equivalent with the consent description settings, you’ll regulate the margin and padding and customize the font. In this example, I changed the font.

Divi Plugin Highlight Divi Gravity Forms Consent Description

Date Drop Down & Date Field

Proper right here you’ll trade the correct margin.

Time Field

Throughout the time field settings, you’ll customize the AM/PM drop-down margin-left and the Time (HH/MM) Field Minimum Width.

Divi Plugin Highlight Divi Gravity Forms Time

Asterisk

Beneath the asterisk settings, you’ll trade the font color.

Divi Plugin Highlight Divi Gravity Forms Asterisk

Asterisk Text Legend

Using the asterisk text legend settings, you’ll customize the asterisk text legend font, dimension, spacing, and further. In this example, I modified the font.

Divi Plugin Highlight Divi Gravity Forms Asterisk Legend

Validation Error Heading

Proper right here you’ll customize the background color, margin and padding, and font design for the validation error heading. Right here’s the customized validation error heading, with modified padding, a different font, and a larger font dimension.

Divi Plugin Highlight Divi Gravity Forms Validation Error

Field Validation Error

And proper right here you’ll customize the field validation error within the an identical approach for the reason that validation error heading. I added some padding to the perfect, bottom, and left, and altered the font. Right here’s the end result on the front end.

Field Validation

Footer

With the ones settings, you’ll trade the footer margin and padding.

Divi Plugin Highlight Divi Gravity Forms Footer

Enlargement Bar Title

Proper right here you’ll regulate the expansion bar margin and padding along with the font design.

Divi Plugin Highlight Divi Gravity Forms Progress Bar Title

Enlargement Bar

Throughout the enlargement bar settings, you’ll regulate the expansion bar color and text color. I changed the expansion bar color to green.

Divi Plugin Highlight Divi Gravity Forms Progress Bar

Button

Next, the button settings can help you apply customizes sorts to the form submission button. You’ll moreover trade the button alignment. Proper right here I changed the text color, background, font, font weight, border radius, and letter spacing to style the button.

Divi Plugin Highlight Divi Gravity Forms Button

Confirmation Message

Throughout the confirmation message settings, you’ll regulate how the confirmation message turns out after the form is submitted. I changed the background color, font, and text color in this example.

Divi Plugin Highlight Divi Gravity Forms Confirmation Message Settings

And that is the confirmation message.

Divi Plugin Highlight Divi Gravity Forms Confirmation Message

Gf_left_half – CSS Ready Class and Gf_left_third & gf_middle_third – CSS Ready Class

You’ll apply the ones CSS classes to a Gravity Bureaucracy field with a view to create additional complicated layouts. The ones design settings can help you customize the correct padding for the fields with the ones CSS classes.

See also  Mastering React Conditional Rendering: A Deep Dive

Divi Plugin Highlight Divi Gravity Forms CSS Ready Class

Spacing

The spacing settings can help you customize the margin and padding for all of the form. Proper right here I added some inside of padding to all 4 aspects of my form.

Divi Plugin Highlight Divi Gravity Forms Spacing

Border

Throughout the border settings, you’ll add a border for your form, trade the border color and dimension, add rounded corners, and further. For this example, I added a border with rounded corners to the form.

Divi Plugin Highlight Divi Gravity Forms Border

Box Shadow

You’ll add a box shadow for your form with this setting.

Divi Plugin Highlight Divi Gravity Forms Box Shadow

Filters

The filters settings can help you regulate the color of your design by the use of together with a clear out.

Divi Plugin Highlight Divi Gravity Forms Filters

Grow to be

After all, the change into settings provide help to regulate the location of the form on the internet web page.

Divi Plugin Highlight Divi Gravity Forms Transform

Advanced Settings

Transferring over to the complicated tab, you’ll see that the default complicated sections are listed.

Divi Plugin Highlight Divi Gravity Forms Advanced

If you select the Custom designed CSS tab, you’ll add custom designed CSS to the opposite portions of the Gravity Form, in conjunction with the identify, description, label, text field, choose field, checkbox/radio field, consent checkbox label, validation error heading, button, and much more.

Divi Plugin Highlight Divi Gravity Forms Custom CSS 1

This lets you completely customize your form, even previous the selections that Divi Gravity Bureaucracy supplies to the Divi Builder.

Divi Plugin Highlight Divi Gravity Forms Custom CSS 2

Divi Gravity Bureaucracy Example

Right here’s the total result of the Gravity Form customized with Divi Gravity Bureaucracy.

Internet web page 1

Divi Plugin Highlight Divi Gravity Forms Page 1

Internet web page 2

Divi Plugin Highlight Divi Gravity Forms Page 2

Confirmation Message

Divi Plugin Highlight Divi Gravity Forms Confirmation Message Example

Validation Error Message

Divi Plugin Highlight Divi Gravity Forms Validation Error Message

Achieve Divi Gravity Bureaucracy

Divi Gravity Bureaucracy is available inside the Divi Market. It costs $69 for endless website usage and 1 year of improve and updates. The price moreover includes a 30-day money-back make certain.

Divi Gravity Forms Review

Final Concepts

Divi Gravity Bureaucracy makes it easy to totally design your form throughout the Divi Builder. The plugin robotically refreshes your form after every trade you’re making in an effort to see necessarily essentially the most up-to-date preview, right kind throughout the Divi Builder. When you occur to’re a Gravity Bureaucracy shopper designing internet websites with Divi, this will also be the easiest instrument that can assist you design and customize your bureaucracy with the convenience and luxury of the Divi Builder.

We might in point of fact like to hear from you! Have you ever ever tried Divi Gravity Bureaucracy? Let us know what you imagine it inside the comments!

The publish Divi Plugin Spotlight: Divi Gravity Paperwork gave the impression first on Chic Topics Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

DON'T LET YOUR WEBSITE GET DESTROYED BY HACKERS!

Get your FREE copy of our Cyber Security for WordPress® whitepaper.

You'll also get exclusive access to discounts that are only found at the bottom of our WP CyberSec whitepaper.

You have Successfully Subscribed!