Gravity Forms is among the most well liked gear for development touch bureaucracy, multi-page programs, and lead bureaucracy in WordPress. Prior to now, including one to a Divi web page trusted a shortcode, whilst matching its fields, buttons, and validation states to the encircling design steadily required customized CSS. Divi 5 provides a local Gravity Forms Module to the Visible Builder, permitting you to choose an present shape, preview it, and magnificence its output with Divi’s design settings.
On this submit, we’ll discover what the module does and display you upload, configure, taste, and check a Gravity Shape throughout breakpoints. We’ll additionally give an explanation for import the downloadable instance layouts.
Let’s get began.
What Is The Gravity Bureaucracy Module?
The Gravity Bureaucracy Module is a local Divi 5 integration for bureaucracy created with Gravity Bureaucracy. As soon as the plugin is put in and lively, the module seems within the Visible Builder. Upload it like another module, choose a sort in its settings, and preview the end result at the web page.
The module gets rid of the wish to position a Gravity Bureaucracy shortcode in a Code Module. It handles the embed and gives a are living preview, permitting you to design the web page round the real shape.
The shape’s construction and behaviour nonetheless are living in Gravity Bureaucracy. Create its fields, conditional good judgment, notifications, confirmations, and different purposeful settings within the plugin.
Use the Divi module to make a choice the place that shape seems and regulate how its output appears at the web page.
Its design settings quilt shape textual content, fields, buttons, validation messages, and paging controls. This will give you regulate over the shape’s empty, interactive, error, and multi-page states with out leaving the Visible Builder.
Key Benefits
The main merit is a cleaner workflow. You’ll position and magnificence an present shape thru one module as a substitute of transferring between a shortcode, CSS, and the entrance finish to test each and every trade.
The are living preview additionally finds lengthy labels, stacked fields, button placement, and multi-page controls whilst you paintings. You’ll preview validation and affirmation messages, then taste them so that they really feel attached to the remainder of the design.
The result’s a extra constant enjoy throughout touch bureaucracy, lead bureaucracy, programs, and different Gravity Bureaucracy layouts.
Sooner than You Get started
A couple of issues wish to be in position prior to the Gravity Bureaucracy Module seems and works as anticipated.
First, set up and turn on Gravity Bureaucracy. The Divi module is dependent upon the plugin and does no longer seem within the module listing when Gravity Bureaucracy is inactive.
Construct the shape in Gravity Bureaucracy prior to styling it in Divi. Upload the specified fields and configure its conditional good judgment, notifications, and confirmations. The Divi module embeds the shape however does no longer create its fields.
The local Gravity Bureaucracy Module shipped with Divi 5.11, so replace Divi prior to on the lookout for it within the Visible Builder.
In spite of everything, select the shape you intend to make use of prior to styling. Operating with the real box construction is quicker than designing round one shape and changing it with a considerably other one later.
How To Use The Gravity Bureaucracy Module
1. Upload The Module
Create a web page or open an present one within the Visible Builder, then upload the Gravity Bureaucracy Module to a Segment.
Within the module’s Content material tab, open the Gravity Bureaucracy choice team. Use the Shape box to choose one in all your present bureaucracy.
Test the Canvas to verify that the shape renders appropriately.
2. Configure The Settings
Within the Content material tab, select whether or not to permit Ajax. Whilst styling, permit the Validation and Affirmation message previews so you’ll be able to see and design the ones states throughout the Builder.
3. Taste The Shape
Open the Design tab and start with Name Textual content. Modify its font, weight, dimension, colour, line peak, and different to be had settings.
Use the Description Textual content, Segment Heading Textual content, and Sub-Label Textual content teams to taste the shape’s supporting textual content.
Open the Enter team to taste enter, label, and placeholder textual content, regulate Spacing, and modify the background, border, and shadow. Divi’s form field editing modes additionally assist you to design hover and center of attention states, making the lively box more uncomplicated to spot.
If the shape contains checkboxes, radio buttons, or image-based alternatives, taste them thru their corresponding choice teams. Checked-state enhancing can lend a hand distinguish decided on alternatives from unselected ones.
For multi-page bureaucracy, use the Growth Bar Textual content team to taste the textual content related to the growth indicator.
The Publish Button team is to be had for each shape. Save & Proceed, Subsequent Web page, and Earlier Web page follow to multi-page bureaucracy, whilst Document Add types the add regulate when that box is provide.
Use Validation Abstract Textual content, Box Validation Textual content, and Affirmation Textual content to taste the module’s comments messages. Stay the message previews enabled whilst designing so you’ll be able to see the end result.
4. Take a look at For Responsiveness And Serve as
Transfer the Builder to Pill and Telephone perspectives and test the shape at each and every breakpoint.
Search for wrapped labels, stacked columns, undersized buttons, and inconsistent padding. On multi-page bureaucracy, transfer thru each step and make sure that the paging controls stay simple to faucet.
In spite of everything, publish the shape at the entrance finish. Ascertain that required fields validate, error messages stay readable, conditional fields behave appropriately, and the affirmation state suits the structure.
After trying out, you’ll be able to reuse the module or its box presets in other places, choose every other shape, and overview the output for any variations in box construction.
Pointers And Very best Practices
Those practices will lend a hand stay Gravity Bureaucracy layouts constant, responsive, and dependable.
Construct The Shape First
End the fields, labels, required settings, conditional good judgment, notifications, and affirmation prior to styling. The module types the markup Gravity Bureaucracy generates, so structural adjustments would possibly require every other design overview.
Taste Hover, Focal point, And Checked States
The empty shape is just one state. Outline hover and center of attention types for fields and buttons, and checked types for radios and checkboxes. Then overview validation and affirmation messages so each degree feels attached to the similar design.
Use Design Variables And Presets For Repeated Values
Retailer repeated colours, spacing, radii, and border widths as Design Variables. You’ll additionally create box presets for inputs, radios, and checkboxes so bureaucracy throughout more than one modules percentage the similar base design.
Take a look at The Shape On The Entrance Finish
Builder previews are helpful, however they don’t change an actual submission. Ship an access and make sure that validation, record uploads, conditional fields, notifications, and confirmations paintings as anticipated. Take a look at each web page of a multi-page shape on desktop and cellular.
Obtain And Set up The Recordsdata
We’ve created two Segment layouts in keeping with the examples on this submit. The downloadable zip contains 3 JSON information: one Gravity Bureaucracy – ALL.JSON record containing each layouts and two particular person information.
Move to Divi > Divi Library and click on Import & Export.
Make a choice the Import tab, select a JSON record out of your laptop, and click on Import Divi Builder Layouts.
Create a web page or open an present one within the Visible Builder, then click on the blue + icon so as to add a Segment.
Open the Upload From Library tab, select a structure, and click on Use This Segment.
Open the Gravity Bureaucracy Module within the imported Segment. Within the Gravity Bureaucracy team below the Content material tab, choose a sort and make sure that it lots appropriately.
Gravity Bureaucracy Now Belongs In The Builder
You now not want a shortcode so as to add a Gravity Shape to a Divi 5 web page. Upload the Gravity Forms Module, choose an present shape, taste its output within the Visible Builder, and check it throughout breakpoints and submission states.
For a head get started, obtain the instance layouts and import one into Divi. Make a choice your shape, modify its colours and Spacing, and overview each box and message prior to publishing. Ensure that Divi and Gravity Bureaucracy are up-to-the-minute so the mixing is to be had and works as anticipated.
Let us know how the Gravity Bureaucracy Module works for you within the feedback or on our social media channels. Your comments is helping us reinforce long term modules and contours.
The submit Exploring Divi 5’s New Gravity Forms Module gave the impression first on Elegant Themes Blog.
0 Comments