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 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.
As quickly because the plugin is installed, flip at the plugin.
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.
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.
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.
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.
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.
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.
You’ll trade the identify margin padding, font settings, alignment, color, dimension, spacing, line top, and shadow.
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.
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.
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.
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.
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.
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.
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.
Proper right here I added rounded corners, changed the input background color, changed the border color, and adjusted the text font.
Text/Textarea
Throughout the text/textarea settings, you’ll trade the margin, padding, or add a box shadow to the fields.
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.
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.
Input Placeholder Text
You’ll customize the font settings for the input placeholder text proper right here. I changed the font to Montserrat.
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.
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.
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.
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.
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.
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.
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.
Asterisk
Beneath the asterisk settings, you’ll trade the font color.
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.
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.
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.
With the ones settings, you’ll trade the footer margin and padding.
Enlargement Bar Title
Proper right here you’ll regulate the expansion bar margin and padding along with the font design.
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.
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.
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.
And that is the 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.
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.
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.
Box Shadow
You’ll add a box shadow for your form with this setting.
Filters
The filters settings can help you regulate the color of your design by the use of together with a clear out.
Grow to be
After all, the change into settings provide help to regulate the location of the form on the internet web page.
Advanced Settings
Transferring over to the complicated tab, you’ll see that the default complicated sections are listed.
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.
This lets you completely customize your form, even previous the selections that Divi Gravity Bureaucracy supplies to the Divi Builder.
Divi Gravity Bureaucracy Example
Right here’s the total result of the Gravity Form customized with Divi Gravity Bureaucracy.
Internet web page 1
Internet web page 2
Confirmation Message
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.
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.
Contents
- 1 Setting up Divi Gravity Bureaucracy
- 2 Divi Gravity Bureaucracy
- 2.1 Content material subject matter Settings
- 2.2 Design Settings
- 2.2.1 Form Titles
- 2.2.2 Form Description
- 2.2.3 Field Wrapper
- 2.2.4 Label
- 2.2.5 Sub Label
- 2.2.6 Field Description
- 2.2.7 Input Wrapper
- 2.2.8 Input Not unusual
- 2.2.9 Text/Textarea
- 2.2.10 Choose
- 2.2.11 Checkbox/Radio Text Selection
- 2.2.12 Input Placeholder Text
- 2.2.13 Checklist Field Column Text
- 2.2.14 Section Field Wrapper
- 2.2.15 Section Field Title
- 2.2.16 Section Field Description
- 2.2.17 Consent Checkbox
- 2.2.18 Consent Description
- 2.2.19 Date Drop Down & Date Field
- 2.2.20 Time Field
- 2.2.21 Asterisk
- 2.2.22 Asterisk Text Legend
- 2.2.23 Validation Error Heading
- 2.2.24 Field Validation Error
- 2.2.25 Footer
- 2.2.26 Enlargement Bar Title
- 2.2.27 Enlargement Bar
- 2.2.28 Button
- 2.2.29 Confirmation Message
- 2.2.30 Gf_left_half – CSS Ready Class and Gf_left_third & gf_middle_third – CSS Ready Class
- 2.2.31 Spacing
- 2.2.32 Border
- 2.2.33 Box Shadow
- 2.2.34 Filters
- 2.2.35 Grow to be
- 2.3 Advanced Settings
- 3 Divi Gravity Bureaucracy Example
- 4 Achieve Divi Gravity Bureaucracy
- 5 Final Concepts
- 6 How to Secure WordPress with a Password Policy Plugin
- 7 Methods to Disable Overflow in WordPress (Take away Horizontal Scroll)
- 8 CV vs. Resume: What is the distinction?
0 Comments