In case you’re looking to seamlessly integrate highly effective varieties into your Divi-created webpages, mastering Gravity Varieties shortcodes is vital. You don’t want Innovative coding competencies—just a clear approach. By next a number of clear-cut ways, you’ll Management each the appearance and placement of one's types. But right before you can start gathering entries or customizing the glimpse, There are several key actions you’ll really need to just take very first…
Comprehending Gravity Varieties and Divi Compatibility
Even though Gravity Varieties and Divi are formulated by unique groups, they work seamlessly jointly that may help you Create custom made kinds and combine them into your Divi-powered Web site.
Gravity Sorts will give you strong resources for making all the things from simple Call forms to intricate, multi-webpage surveys. Divi, on the other hand, permits you to style and design visually breathtaking pages with its intuitive builder.
If you utilize them together, you’re not minimal by Divi’s indigenous modules or essential variety solutions. As an alternative, it is possible to embed any Gravity Form straight into your layouts using shortcodes, giving you full Manage over type placement and styling.
This compatibility signifies you could preserve your website’s cohesive search although leveraging powerful form options, guaranteeing each style adaptability and Superior performance.
Setting up and Activating Gravity Sorts
Following, you’ll see a prompt to enter your Gravity Sorts license key. Come across this key with your Gravity Kinds account, duplicate it, and paste it into your plugin’s options.
Help you save your changes to permit computerized updates and accessibility all functions.
With Gravity Forms installed and activated, you’re wanting to commence building sorts and integrating them along with your Divi styles.
Making Your First Form in Gravity Sorts
With Gravity Varieties put in and your license essential activated, you can begin building your very first kind. Head on your WordPress dashboard and locate “Forms” within the left-hand menu. Click “New Type,” then enter a title and outline to prepare your variety conveniently.
Now, you’ll see the drag-and-drop type builder. Include fields by clicking or dragging them from the correct panel into your sort. You may customize Every industry by clicking on it and altering its options, for instance labels, demanded standing, or placeholder textual content.
As you’ve included every one of the fields you may need, click on “Update” or “Help save” to store your progress. Give your variety a quick preview to verify it appears to be and performs as you desire. You’re now ready for the next action.
Finding the Gravity Varieties Shortcode
Right after saving your form, you’ll want the Gravity Sorts shortcode to embed it within your Divi format. To discover this shortcode, go towards your WordPress dashboard and click on on “Varieties” beneath the Gravity Sorts menu. You’ll see a summary of all your kinds.
Search for the 1 you merely established. On the ideal facet of the form’s row, you’ll recognize a “Shortcode” column exhibiting a thing like [gravityform id="1"].
Copy this exact shortcode. If you don’t see the shortcode column, hover over your kind’s title and click on “Embed.” A popup will show up exhibiting the shortcode you will need. Duplicate it to your clipboard.
This shortcode consists of all the required configurations to Show your variety anywhere you want within just your Divi-powered internet site.
Including a different Site or Post With Divi Builder
Wanting to incorporate your Gravity Sort to a new website page or put up? Start out by logging into your WordPress dashboard.
From the left sidebar, click on “Pages” or “Posts” based on in which you want your type.
Following, find “Add New” to produce a fresh new website page or post.
As soon as the editor hundreds, you’ll begin to see the purple “Use Divi Builder” button at the highest—click on it.
Divi will start its builder interface, giving you solutions to make from scratch, pick a pre-produced format, or clone an current page.
Pick the choice that satisfies your needs.
Soon after Divi loads, you’ll be capable to add sections, rows, and modules to design and style your content.
Now, your new web page or article is prepared for customization before introducing your Gravity Varieties shortcode.
Inserting Shortcodes Employing Divi’s Text Module
After you’ve arrange your site or put up using the Divi Builder, it’s time to put your Gravity Sort specifically in which you want it.
Begin by introducing a brand new segment or row, then insert a Text Module inside your decided on area.
Click In the Textual content Module’s written content region, making certain you’re while in the “Textual content” (not “Visual”) tab.
Now, paste your Gravity Varieties shortcode—a thing like `[gravityform id="one" title="Wrong" description="Wrong"]`.
Preserve your variations and exit the module editor.
Divi will process the shortcode best divi gravity forms and Exhibit your Gravity Form ideal inside of your format.
You can move or replicate the Text Module as needed to regulate placement.
This straightforward strategy gives you entire Manage in excess of wherever your type appears over the web site.
Customizing Form Overall look Inside of Divi
While Gravity Types handles the core framework of your sorts, Divi provides you with highly effective applications to refine their look and feel. As you’ve positioned your Gravity Sorts shortcode inside a Divi Textual content module, You can utilize Divi’s module structure settings to improve the appearance.
Regulate margins and padding for much better spacing, improve background colours, or include borders and shadows to help make the shape get noticed. You may as well customize fonts, textual content dimensions, and button styles by focusing on the module or applying Divi’s built-in style and design options.
If you want all the more Regulate, increase tailor made CSS instantly throughout the module’s Highly developed configurations. This approach permits you to match your variety’s appearance to your web site’s branding, ensuring a cohesive and Skilled presentation across your web pages.
Adjusting Kind Settings for Optimum Effectiveness
Even though styling attracts website visitors’ consideration, high-quality-tuning your Gravity Types configurations makes certain your varieties get the job done smoothly and efficiently within just Divi. Start out by reviewing each variety’s general configurations. Established distinct variety titles and descriptions so end users know What to anticipate. Change affirmation and notification possibilities to deliver fast feedback and keep submissions structured. Allow anti-spam functions like reCAPTCHA to scale back unwelcome entries without disrupting authentic buyers.
Following, configure conditional logic for fields and sections, streamlining the user practical experience by only exhibiting suitable inquiries. Limit the amount of entries if necessary, especially for registrations or Unique occasions.
Last but not least, optimize the form’s efficiency by reducing the use of pointless fields and enabling AJAX for smoother submissions. Notice to these configurations helps your forms load swiftly and function reliably.
Troubleshooting Widespread Exhibit Issues
Despite cautious set up, you could possibly notice your Gravity Kinds aren’t displaying accurately within just Divi. From time to time, the shape seems misaligned, or styling appears off.
Very first, check in case you’ve placed the Gravity Varieties shortcode inside of a Textual content or Code module. Utilizing the Improper module could potentially cause layout troubles.
Up coming, be sure there aren’t conflicting CSS procedures from Divi or other plugins. Test disabling customized CSS briefly to determine if it resolves the situation.
If the shape isn’t showing in any respect, affirm the shortcode is proper and the form is Lively.
Clear equally your browser and web-site cache, as cached data can reduce updates from appearing.
And lastly, guarantee all plugins, Gravity Types, and Divi are up-to-date to the latest variations to prevent compatibility difficulties.
Boosting Kinds With Further Divi Modules
By combining Gravity Forms with Divi’s wide range of modules, you are able to build much more participating and interactive variety layouts. Begin by placing your Gravity Types shortcode inside a Divi Text or Code module.
Then, use Divi’s surrounding modules—like Blurbs, Illustrations or photos, or Simply call to Actions—so as to add context, Visible cues, or incentives in close proximity to your form. It's also possible to stack modules to Screen recommendations, FAQs, or rely on badges together with your form, constructing reliability and improving person working experience.
Boost visibility with Divi’s Divider and Spacer modules to develop respiration home around your type. If you would like spotlight your variety, position it within a Divi Boxed or Shadowed portion. Custom made backgrounds, gradients, or animations will help attract awareness, producing your variety sense similar to a organic, powerful section of one's website page design and style.
Conclusion
You’ve now bought anything you should seamlessly integrate Gravity Kinds into your Divi-powered Site. By subsequent these measures, you are able to make, customize, and Show kinds specifically in which you want them—no coding needed. Don’t ignore to preview your website page and tweak the look for the proper healthy. In the event you operate into troubles, double-Test your shortcode and apparent your caches. With a bit of follow, including interactive forms to your web site will truly feel like next character!