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 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.

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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

Textual content/Textarea

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Asterisk

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

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.

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.

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.

Footer

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

Development Bar Name

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

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.

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.

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.

And here’s the affirmation 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.

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.

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.

Field Shadow

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

Filters

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

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.

Complicated Settings

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

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.

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

Divi Gravity Paperwork Instance

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

Web page 1

Web page 2

Affirmation Message

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.

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