In the event you’re aiming to seamlessly combine highly effective varieties into your Divi-designed web pages, mastering Gravity Varieties shortcodes is crucial. You don’t want Highly developed coding abilities—just a clear approach. By next a couple of easy steps, you’ll Regulate both the appearance and placement of the types. But ahead of you can begin accumulating entries or customizing the search, There are many critical actions you’ll really need to get initially…
Understanding Gravity Varieties and Divi Compatibility
Though Gravity Kinds and Divi are formulated by unique teams, they perform seamlessly together to assist you Establish custom made varieties and combine them into your Divi-run Internet site.
Gravity Forms gives you strong tools for producing everything from straightforward Speak to types to complicated, multi-site surveys. Divi, Conversely, allows you to layout visually gorgeous pages with its intuitive builder.
If you use them with each other, you’re not constrained by Divi’s indigenous modules or standard variety alternatives. In its place, you can embed any Gravity Variety instantly into your layouts employing shortcodes, giving you whole Command above form placement and styling.
This compatibility signifies you'll be able to retain your website’s cohesive glimpse whilst leveraging potent type capabilities, making certain the two design and style flexibility and Sophisticated functionality.
Installing and Activating Gravity Varieties
Next, you’ll see a prompt to enter your Gravity Types license key. Find this crucial with your Gravity Forms account, copy it, and paste it to the plugin’s options.
Conserve your changes to permit automated updates and access all characteristics.
With Gravity Types set up and activated, you’re all set to get started developing types and integrating them with all your Divi styles.
Generating Your First Form in Gravity Varieties
With Gravity Kinds set up along with your license vital activated, you can start making your to start with variety. Head to the WordPress dashboard and find “Sorts” during the still left-hand menu. Click “New Form,” then enter a title and outline to prepare your type simply.
Now, you’ll see the drag-and-fall sort builder. Insert fields by clicking or dragging them from the ideal panel into your type. You are able to personalize Just about every industry by clicking on it and altering its options, for example labels, required position, or placeholder text.
When you finally’ve included all of the fields you would like, simply click “Update” or “Save” to retail outlet your development. Give your kind A fast preview to ensure it appears to be like and will work as you want. You’re now Completely ready for another stage.
Finding the Gravity Varieties Shortcode
Just after saving your variety, you’ll need to have the Gravity Forms shortcode to embed it within your Divi structure. To seek out this shortcode, go to the WordPress dashboard and click on “Forms” beneath the Gravity Types menu. You’ll see a list of all of your types.
Search for the one you simply established. On the best facet of the form’s row, you’ll discover a “Shortcode” column displaying some thing like [gravityform id="1"].
Copy this correct shortcode. For those who don’t see the shortcode column, hover around your kind’s title and click “Embed.” A popup will appear demonstrating the shortcode you'll need. Duplicate it to your clipboard.
This shortcode has all the required configurations to Exhibit your form wherever you need within just your Divi-run web-site.
Introducing a New Webpage or Put up With Divi Builder
Willing to increase your Gravity Type to a new webpage or publish? Start off by logging into your WordPress dashboard.
While in the still left sidebar, click “Webpages” or “Posts” determined by in which you want your type.
Next, pick out “Insert New” to produce a refreshing webpage or submit.
Once the editor hundreds, you’ll see the purple “Use Divi Builder” button at the top—simply click it.
Divi will launch its builder interface, providing you with possibilities to construct from scratch, go with a pre-manufactured structure, or clone an present webpage.
Decide on the option that suits your preferences.
Immediately after Divi loads, you’ll have the BloggersNeed how to use gravity forms with divi ability to add sections, rows, and modules to design your content.
Now, your new site or article is ready for personalisation ahead of introducing your Gravity Varieties shortcode.
Inserting Shortcodes Making use of Divi’s Text Module
Once you’ve build your website page or put up using the Divi Builder, it’s time to position your Gravity Variety particularly in which you want it.
Start out by incorporating a fresh area or row, then insert a Text Module with your decided on place.
Click on In the Textual content Module’s written content region, making sure you’re inside the “Text” (not “Visual”) tab.
Now, paste your Gravity Varieties shortcode—anything like `[gravityform id="one" title="Bogus" description="Fake"]`.
Preserve your variations and exit the module editor.
Divi will approach the shortcode and Show your Gravity Sort proper within your format.
You could shift or duplicate the Text Module as needed to regulate placement.
This straightforward technique gives you total Command about exactly where your variety seems about the webpage.
Customizing Kind Appearance Within Divi
Despite the fact that Gravity Types handles the Main composition of your types, Divi offers you potent tools to refine their feel and appear. When you finally’ve placed your Gravity Varieties shortcode within a Divi Text module, you can use Divi’s module design options to boost the appearance.
Modify margins and padding for superior spacing, modify track record colours, or include borders and shadows to make the shape get noticed. You can also customize fonts, textual content dimensions, and button styles by focusing on the module or applying Divi’s constructed-in style options.
If you need far more Manage, include customized CSS directly within the module’s advanced configurations. This solution permits you to match your type’s look to your web site’s branding, guaranteeing a cohesive and Expert presentation across your internet pages.
Altering Form Options for Best Functionality
Though styling attracts guests’ attention, fine-tuning your Gravity Sorts configurations guarantees your types get the job done effortlessly and proficiently within just Divi. Commence by reviewing Just about every sort’s basic settings. Set very clear sort titles and descriptions so consumers know What to anticipate. Change affirmation and notification choices to supply prompt feedback and retain submissions structured. Allow anti-spam options like reCAPTCHA to lower undesired entries with no disrupting real consumers.
Subsequent, configure conditional logic for fields and sections, streamlining the person practical experience by only exhibiting pertinent issues. Restrict the number of entries if essential, especially for registrations or Unique functions.
Lastly, enhance the shape’s overall performance by reducing using unneeded fields and enabling AJAX for smoother submissions. Focus to these settings allows your forms load immediately and function reliably.
Troubleshooting Common Show Problems
Even with watchful setup, you could possibly detect your Gravity Forms aren’t displaying properly in Divi. Occasionally, the form appears misaligned, or styling seems to be off.
To start with, Look at for those who’ve placed the Gravity Varieties shortcode inside a Textual content or Code module. Utilizing the Erroneous module could cause layout problems.
Future, be certain there aren’t conflicting CSS principles from Divi or other plugins. Try disabling tailor made CSS briefly to check out if it resolves the problem.
If the form isn’t demonstrating whatsoever, ensure the shortcode is right and the form is active.
Very clear both of those your browser and website cache, as cached information can protect against updates from showing up.
Finally, guarantee all plugins, Gravity Forms, and Divi are updated to the latest variations to stop compatibility challenges.
Maximizing Varieties With Added Divi Modules
By combining Gravity Forms with Divi’s wide range of modules, you can build far more partaking and interactive sort layouts. Start by putting your Gravity Varieties shortcode inside a Divi Textual content or Code module.
Then, use Divi’s encompassing modules—like Blurbs, Visuals, or Connect with to Steps—to incorporate context, visual cues, or incentives near your kind. It's also possible to stack modules to display testimonies, FAQs, or trust badges together with your form, constructing believability and boosting consumer practical experience.
Enhance visibility with Divi’s Divider and Spacer modules to produce breathing place close to your type. If you wish to highlight your sort, spot it inside of a Divi Boxed or Shadowed portion. Custom backgrounds, gradients, or animations might help draw interest, producing your type sense similar to a purely natural, powerful element of one's website page design and style.
Conclusion
You’ve now got every little thing you must seamlessly combine Gravity Forms into your Divi-run website. By adhering to these steps, you can create, customise, and Show varieties precisely where you want them—no coding demanded. Don’t forget to preview your web site and tweak the look for the best in good shape. If you operate into difficulties, double-check your shortcode and distinct your caches. With a bit of practice, incorporating interactive varieties to your site will experience like 2nd character!