Divi Plugin Highlight: Divi Gravity Forms

by | Mar 19, 2023 | Etcetera | 0 comments

Divi Gravity Forms is a plugin for the Divi Builder that lets you customise your Gravity Shape from the Divi Builder. The plugin provides a brand new module to the Divi Builder with choices to modify the design of each side of the shape. If you’re a Gravity Shape person, this plugin will assist combine Divi and Gravity Paperwork and permit you to trade the shape design similar to you could some other part in your Divi web page. On this article, we’ll check out the settings that include the Divi Gravity Paperwork Module and display you ways you’ll customise your shape inside the Divi Builder.

Let’s get began!

Putting in Divi Gravity Paperwork

First, it is very important have the Gravity Paperwork plugin put in and activated in your web site.

Divi Plugin Highlight Divi Gravity Forms Gravity Forms

Divi Gravity Paperwork will also be put in similar to some other WordPress plugin. Open the plugins web page within the WordPress dashboard and click on Upload New. Click on Add Plugin on the most sensible, then choose the .zip plugin document out of your pc.

Divi Plugin Highlight Divi Gravity Forms Install

As soon as the plugin is put in, turn on the plugin.

Divi Plugin Highlight Divi Gravity Forms Activate

Divi Gravity Paperwork

The Divi Gravity Paperwork plugin means that you can upload and customise the Gravity Shape proper inside the Divi Builder. To get began, you’re going to first wish to construct the shape inside the Gravity Paperwork settings web page. After you have laid out the elemental construction and serve as of your touch shape, you’ll transfer over to the Divi Builder to customise the design.

Divi Plugin Highlight Divi Gravity Forms Build Form

Open your web page within the Divi Builder and click on the gray plus icon to insert a brand new module. Choose the Gravity Shape module from the record.

Divi Plugin Highlight Divi Gravity Forms Add Module

Content material Settings

Open the Gravity Shape module settings to the content material tab. Along with the default Background and Admin Label sections, the module comes with a brand new segment known as Shortcode Parameters.

Shortcode Parameters

Choose the Gravity Shape you wish to show from the Shape ID dropdown. As soon as decided on, your shape will seem at the web page.

See also  WP Engine: WordPress Safety: Shielding Your Oklahoma Web site From Assaults…

Divi Plugin Highlight Divi Gravity Forms Form ID

Inside the shortcode parameters settings, you’ll additionally make a selection to turn or conceal the name and outline and allow or disable Ajax. Moreover, you’ll specify the beginning tab index for the shape fields and specify default box values.

Divi Plugin Highlight Divi Gravity Forms Shortcode Parameters

Design Settings

The majority of the customization settings for Divi Gravity Paperwork is positioned below the Design tab. Those settings provide you with nice flexibility along with your shape’s look, and you’ll trade the design of just about each side of your shape. Let’s check out the other design settings you’ll use.

Shape Titles

First is the shape name settings.

Divi Plugin Highlight Divi Gravity Forms Form Title

You’ll be able to trade the name margin padding, font settings, alignment, colour, dimension, spacing, line peak, and shadow.

Divi Plugin Highlight Divi Gravity Forms Title Text

Shape Description

The shape description settings are the similar as the shape name settings. This is the shape description with custom designed font, textual content colour, textual content dimension, and line peak.

Divi Plugin Highlight Divi Gravity Forms Description

Box Wrapper

The sector wrapper settings permit you to trade the margin and padding of the fields. On this instance, I diminished the highest margin in order that the fields have been positioned nearer in combination.

Divi Plugin Highlight Divi Gravity Forms Field Wrapper

Label

Underneath the label tab, you could have the entire default textual content customization choices. I custom designed the label font and adjusted the textual content colour to inexperienced.

Divi Plugin Highlight Divi Gravity Forms Label

Sub Label

The sub label settings additionally characteristic the default textual content design choices. On this instance, the sub labels are the “First” and “Closing” textual content labels beneath the identify fields. I custom designed the sub label font.

Divi Plugin Highlight Divi Gravity Forms Sub Label

Box Description

The sector description instance is positioned above the Lengthy Query box. Right here I diminished the highest padding to deliver the textual content nearer to the label and adjusted the font.

Divi Plugin Highlight Divi Gravity Forms Field Description

Enter Wrapper

The enter wrapper settings permit you to trade the margin or padding across the enter field. On this instance, I diminished the highest margin, bringing the enter field nearer to the label and outline.

Divi Plugin Highlight Divi Gravity Forms Input

Enter Normal

The enter basic settings segment is the place you’ll totally customise the design of the enter field. You’ll be able to regulate the background colour, upload rounded corners, trade the border, and entirely customise the enter font settings.

Divi Plugin Highlight Divi Gravity Forms Input General

Right here I added rounded corners, modified the enter background colour, modified the border colour, and adjusted the textual content font.

Divi Plugin Highlight Divi Gravity Forms Input General 2

Textual content/Textarea

Within the textual content/textarea settings, you’ll trade the margin, padding, or upload a field shadow to the fields.

Divi Plugin Highlight Divi Gravity Forms Text

Choose

The choose segment has the similar settings because the textual content/textarea segment. You’ll be able to customise the margin, padding, and field shadow in your choose fields.

Divi Plugin Highlight Divi Gravity Forms Select

Checkbox/Radio Textual content Possibility

Right here you’ll trade the margin and padding, and customise the font for the checkbox/radio textual content possibility. I custom designed the font on this instance.

Divi Plugin Highlight Divi Gravity Forms Checkbox

Enter Placeholder Textual content

You’ll be able to customise the font settings for the enter placeholder textual content right here. I modified the font to Montserrat.

Divi Plugin Highlight Divi Gravity Forms Input Placeholder

Record Box Column Textual content

Identical settings right here because the enter box textual content segment. As soon as once more, I custom designed the font for the record box column textual content.

See also  Download a Free Water Non Profit Theme Builder Pack for Divi

Divi Plugin Highlight Divi Gravity Forms List Field

Segment Box Wrapper

The segment box wrapper settings permit you to trade the margin, padding, and border backside colour. I added a piece to my shape and added a most sensible margin and adjusted the border backside colour.

Divi Plugin Highlight Divi Gravity Forms Section Field Wrapper

Segment Box Name

To customise the segment box name, I changed the font, font weight, font taste, textual content colour, and letter spacing right here.

Divi Plugin Highlight Divi Gravity Forms Section Field Title

Segment Box Description

On this instance, I added an outline to the segment and changed the font. I additionally added some backside padding so as to add area between the outline and the road.

Divi Plugin Highlight Divi Gravity Forms Section Field Description

Consent Checkbox

The design settings for the consent checkbox permit you to regulate the margin, padding, and font settings. Right here I changed the font.

Divi Plugin Highlight Divi Gravity Forms Consent Checkbox

Consent Description

Identical with the consent description settings, you’ll regulate the margin and padding and customise the font. On this instance, I modified the font.

Divi Plugin Highlight Divi Gravity Forms Consent Description

Date Drop Down & Date Box

Right here you’ll trade the best margin.

Time Box

Within the time box settings, you’ll customise the AM/PM drop-down margin-left and the Time (HH/MM) Box Minimal Width.

Divi Plugin Highlight Divi Gravity Forms Time

Asterisk

Underneath the asterisk settings, you’ll trade the font colour.

Divi Plugin Highlight Divi Gravity Forms Asterisk

Asterisk Textual content Legend

The usage of the asterisk textual content legend settings, you’ll customise the asterisk textual content legend font, dimension, spacing, and extra. On this instance, I changed the font.

Divi Plugin Highlight Divi Gravity Forms Asterisk Legend

Validation Error Heading

Right here you’ll customise the background colour, margin and padding, and font design for the validation error heading. This is the custom designed validation error heading, with changed padding, a special font, and a bigger font dimension.

Divi Plugin Highlight Divi Gravity Forms Validation Error

Box Validation Error

And right here you’ll customise the sphere validation error in the similar means because the validation error heading. I added some padding to the highest, backside, and left, and changed the font. This is the outcome at the entrance finish.

Field Validation

Footer

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

Divi Plugin Highlight Divi Gravity Forms Footer

Development Bar Name

Right here you’ll regulate the development bar margin and padding in addition to the font design.

Divi Plugin Highlight Divi Gravity Forms Progress Bar Title

Development Bar

Within the development bar settings, you’ll regulate the development bar colour and textual content colour. I modified the development bar colour to inexperienced.

Divi Plugin Highlight Divi Gravity Forms Progress Bar

Button

Subsequent, the button settings permit you to practice customizes kinds to the shape submission button. You’ll be able to additionally trade the button alignment. Right here I modified the textual content colour, background, font, font weight, border radius, and letter spacing to taste the button.

Divi Plugin Highlight Divi Gravity Forms Button

Affirmation Message

Within the affirmation message settings, you’ll regulate how the affirmation message seems after the shape is submitted. I modified the background colour, font, and textual content colour on this instance.

Divi Plugin Highlight Divi Gravity Forms Confirmation Message Settings

And here’s the affirmation message.

Divi Plugin Highlight Divi Gravity Forms Confirmation Message

Gf_left_half – CSS In a position Elegance and Gf_left_third & gf_middle_third – CSS In a position Elegance

You’ll be able to practice those CSS categories to a Gravity Paperwork box with a purpose to create extra complex layouts. Those design settings permit you to customise the best padding for the fields with those CSS categories.

Divi Plugin Highlight Divi Gravity Forms CSS Ready Class

Spacing

The spacing settings permit you to customise the margin and padding for all the shape. Right here I added some interior padding to all 4 facets of my shape.

See also  Download 4 FREE Blog Post Template Sets for Divi

Divi Plugin Highlight Divi Gravity Forms Spacing

Border

Within the border settings, you’ll upload a border in your shape, trade the border colour and dimension, upload rounded corners, and extra. For this situation, I added a border with rounded corners to the shape.

Divi Plugin Highlight Divi Gravity Forms Border

Field Shadow

You’ll be able to upload a field shadow in your shape with this surroundings.

Divi Plugin Highlight Divi Gravity Forms Box Shadow

Filters

The filters settings permit you to regulate the colour of your design via including a clear out.

Divi Plugin Highlight Divi Gravity Forms Filters

Turn out to be

In spite of everything, the turn into settings make it easier to regulate the location of the shape at the web page.

Divi Plugin Highlight Divi Gravity Forms Transform

Complicated Settings

Transferring over to the complex tab, you’ll see that the default complex sections are indexed.

Divi Plugin Highlight Divi Gravity Forms Advanced

If you choose the Customized CSS tab, you’ll upload customized CSS to the other components of the Gravity Shape, together with the name, description, label, textual content box, choose box, checkbox/radio box, consent checkbox label, validation error heading, button, and a lot more.

Divi Plugin Highlight Divi Gravity Forms Custom CSS 1

This permits you to totally customise your shape, even past the choices that Divi Gravity Paperwork provides to the Divi Builder.

Divi Plugin Highlight Divi Gravity Forms Custom CSS 2

Divi Gravity Paperwork Instance

This is the general results of the Gravity Shape custom designed with Divi Gravity Paperwork.

Web page 1

Divi Plugin Highlight Divi Gravity Forms Page 1

Web page 2

Divi Plugin Highlight Divi Gravity Forms Page 2

Affirmation Message

Divi Plugin Highlight Divi Gravity Forms Confirmation Message Example

Validation Error Message

Divi Plugin Highlight Divi Gravity Forms Validation Error Message

Acquire Divi Gravity Paperwork

Divi Gravity Paperwork is to be had within the Divi Marketplace. It prices $69 for limitless web site utilization and 1 yr of beef up and updates. The fee additionally features a 30-day money-back ensure.

Divi Gravity Forms Review

Ultimate Ideas

Divi Gravity Paperwork makes it simple to fully design your shape inside the Divi Builder. The plugin robotically refreshes your shape after each trade you are making to be able to see probably the most up-to-date preview, proper inside the Divi Builder. Should you’re a Gravity Paperwork person designing internet sites with Divi, this can be the very best device that can assist you design and customise your paperwork with the convenience and comfort of the Divi Builder.

We would like to listen to from you! Have you ever attempted Divi Gravity Paperwork? Tell us what you take into accounts it within the feedback!

The put up Divi Plugin Highlight: Divi Gravity Forms seemed first on Elegant Themes Blog.

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!