In case you’re trying to seamlessly integrate strong forms into your Divi-created web pages, mastering Gravity Sorts shortcodes is crucial. You don’t require Superior coding capabilities—just a transparent procedure. By next a couple of easy steps, you’ll Regulate both the appearance and placement of your kinds. But prior to you can start amassing entries or customizing the glimpse, There are many crucial steps you’ll must consider very first…
Being familiar with Gravity Types and Divi Compatibility
While Gravity Forms and Divi are developed by diverse teams, they operate seamlessly with each other to help you Create customized kinds and integrate them into your Divi-run Web site.
Gravity Kinds gives you sturdy tools for building anything from simple contact types to advanced, multi-website page surveys. Divi, Then again, permits you to style and design visually beautiful webpages with its intuitive builder.
After you utilize them alongside one another, you’re not minimal by Divi’s native modules or primary kind choices. Instead, you can embed any Gravity Sort straight into your layouts applying shortcodes, providing you with full Manage over sort placement and styling.
This compatibility means you could retain your website’s cohesive seem although leveraging effective variety characteristics, making sure equally structure versatility and State-of-the-art features.
Installing and Activating Gravity Varieties
Following, you’ll see a prompt to enter your Gravity Types license key. Find this essential inside your Gravity Varieties account, copy it, and paste it in the plugin’s settings.
Conserve your variations to help computerized updates and entry all features.
With Gravity Forms mounted and activated, you’re wanting to start making types and integrating them using your Divi layouts.
Producing Your To start with Type in Gravity Types
With Gravity Varieties installed plus your license essential activated, you can start developing your first type. Head towards your WordPress dashboard and discover “Types” inside the still left-hand menu. Click on “New Kind,” then enter a title and outline to organize your type very easily.
Now, you’ll see the drag-and-fall variety builder. Incorporate fields by clicking or dragging them from the right panel into your sort. You could customise each discipline by clicking on it and adjusting its settings, such as labels, expected status, or placeholder textual content.
After you’ve added all of the fields you would like, simply click “Update” or “Save” to keep your progress. Give your kind a quick preview to be sure it appears to be like and will work as you desire. You’re now ready for the following phase.
Locating the Gravity Types Shortcode
Just after preserving your variety, you’ll have to have the Gravity Types shortcode to embed it as part of your Divi layout. To locate this shortcode, go to the WordPress dashboard and click on “Varieties” under the Gravity Types menu. You’ll see a listing of all of your kinds.
Hunt for the just one you merely made. On the best facet of the form’s row, you’ll notice a “Shortcode” column displaying one thing like [gravityform id="one"].
Duplicate this precise shortcode. If you don’t see the shortcode column, hover around your kind’s title and click on “Embed.” A popup will surface demonstrating the shortcode you would like. Copy it on your clipboard.
This shortcode has all the necessary options to Exhibit your kind anywhere you wish within your Divi-run internet site.
Introducing a different Website page or Write-up With Divi Builder
Willing to increase your Gravity Type to a new site or post? Start by logging into your WordPress dashboard.
From the left sidebar, simply click “Web pages” or “Posts” depending on where you want your variety.
Subsequent, select “Add New” to make a fresh web site or article.
After the editor hundreds, you’ll begin to see the purple “Use Divi Builder” button at the top—simply click it.
Divi will start its builder interface, supplying you with options to create from scratch, go with a pre-designed structure, or clone an present page.
Select the option that fits your needs.
Right after Divi loads, you’ll have the ability to insert sections, rows, and modules to style your content.
Now, your new web site or post is ready for personalization prior to introducing your Gravity Varieties shortcode.
Inserting Shortcodes Using Divi’s Text Module
When you’ve put in place your site or article utilizing the Divi Builder, it’s time to place your Gravity Sort exactly where you want it.
Start by incorporating a fresh area or row, then insert a Textual content Module in the selected spot.
Click on Within the Textual content Module’s material place, making sure you’re in the “Text” (not “Visual”) tab.
Now, paste your Gravity Sorts shortcode—one thing like `[gravityform id="1" title="false" description="Phony"]`.
Save your modifications and exit the module editor.
Divi will course of action the shortcode and Show your Gravity Form right inside your format.
You'll be able to move or copy the Textual content Module as needed to adjust placement.
This straightforward approach offers you comprehensive control in excess of where by your form seems about the website page.
Customizing Variety Look In just Divi
Despite the fact that Gravity Kinds handles the BloggersNeed how to use gravity forms with divi Main composition of one's sorts, Divi will give you potent resources to refine their look and feel. Once you’ve placed your Gravity Types shortcode inside of a Divi Text module, You can utilize Divi’s module layout options to boost the appearance.
Adjust margins and padding for far better spacing, transform track record hues, or include borders and shadows to produce the shape stand out. You may also customise fonts, text sizes, and button styles by focusing on the module or applying Divi’s designed-in design and style alternatives.
In order for you far more Regulate, increase customized CSS right within the module’s Sophisticated settings. This method helps you to match your sort’s appearance to your site’s branding, making sure a cohesive and Skilled presentation throughout your webpages.
Altering Variety Settings for Ideal Overall performance
Whilst styling draws people’ awareness, great-tuning your Gravity Types settings makes certain your kinds function smoothly and successfully in Divi. Commence by reviewing Every sort’s basic settings. Set very clear type titles and descriptions so people know What to anticipate. Adjust confirmation and notification selections to deliver instantaneous responses and maintain submissions structured. Permit anti-spam attributes like reCAPTCHA to lower unwelcome entries with no disrupting legitimate buyers.
Future, configure conditional logic for fields and sections, streamlining the user experience by only exhibiting pertinent questions. Restrict the quantity of entries if essential, especially for registrations or Unique activities.
At last, optimize the form’s functionality by reducing the use of unnecessary fields and enabling AJAX for smoother submissions. Consideration to these settings allows your varieties load immediately and function reliably.
Troubleshooting Popular Display Troubles
Despite very careful set up, you might observe your Gravity Types aren’t exhibiting accurately in Divi. Sometimes, the form appears misaligned, or styling seems off.
To start with, Examine for those who’ve put the Gravity Sorts shortcode within a Textual content or Code module. Using the Incorrect module could potentially cause layout problems.
Upcoming, be certain there aren’t conflicting CSS rules from Divi or other plugins. Test disabling tailor made CSS briefly to determine if it resolves the situation.
If the form isn’t demonstrating at all, confirm the shortcode is proper and the form is Lively.
Clear equally your browser and internet site cache, as cached knowledge can prevent updates from showing.
Lastly, make sure all plugins, Gravity Kinds, and Divi are current to the most recent variations to circumvent compatibility problems.
Boosting Types With Additional Divi Modules
By combining Gravity Kinds with Divi’s big selection of modules, you'll be able to develop much more engaging and interactive variety layouts. Start by inserting your Gravity Kinds shortcode within a Divi Textual content or Code module.
Then, use Divi’s encompassing modules—like Blurbs, Visuals, or Phone to Actions—to include context, visual cues, or incentives in close proximity to your sort. You may also stack modules to display recommendations, FAQs, or believe in badges together with your form, developing reliability and enhancing person practical experience.
Enhance visibility with Divi’s Divider and Spacer modules to develop respiratory home all around your type. In order to spotlight your sort, put it inside a Divi Boxed or Shadowed portion. Personalized backgrounds, gradients, or animations can assist draw attention, creating your sort truly feel like a normal, powerful portion within your web page style.
Summary
You’ve now received everything you have to seamlessly combine Gravity Varieties into your Divi-driven Site. By subsequent these steps, you may generate, customize, and display kinds precisely where you want them—no coding demanded. Don’t fail to remember to preview your web page and tweak the look for the ideal healthy. For those who run into challenges, double-Verify your shortcode and obvious your caches. With a bit of follow, adding interactive types to your internet site will come to feel like second nature!