In case you’re aiming to seamlessly integrate effective varieties into your Divi-intended webpages, mastering Gravity Sorts shortcodes is crucial. You don’t require Innovative coding abilities—just a clear process. By pursuing a few clear-cut actions, you’ll Handle both of those the appearance and placement of your types. But in advance of you can begin accumulating entries or customizing the glance, There are some vital actions you’ll need to consider first…
Being familiar with Gravity Kinds and Divi Compatibility
Despite the fact that Gravity Sorts and Divi are formulated by diverse groups, they operate seamlessly alongside one another that may help you Develop customized types and combine them into your Divi-run Web page.
Gravity Types provides robust instruments for generating almost everything from basic Make contact with forms to advanced, multi-website page surveys. Divi, However, helps you to style visually stunning webpages with its intuitive builder.
Any time you rely on them jointly, you’re not constrained by Divi’s indigenous modules or standard sort solutions. Rather, you can embed any Gravity Variety directly into your layouts using shortcodes, providing you with whole Regulate more than kind placement and styling.
This compatibility indicates you can maintain your internet site’s cohesive search when leveraging impressive type functions, making sure equally style and design overall flexibility and Highly developed performance.
Putting in and Activating Gravity Kinds
Upcoming, you’ll see a prompt to enter your Gravity Types license crucial. Discover this important in your Gravity Varieties account, copy it, and paste it into the plugin’s settings.
Save your variations to permit automated updates and access all attributes.
With Gravity Types put in and activated, you’re able to start setting up kinds and integrating them with all your Divi layouts.
Building Your To start with Variety in Gravity Types
With Gravity Varieties installed plus your license crucial activated, you can start building your very first sort. Head towards your WordPress dashboard and obtain “Types” within the remaining-hand menu. Click on “New Variety,” then enter a title and outline to prepare your form effortlessly.
Now, you’ll begin to see the drag-and-fall variety builder. Add fields by clicking or dragging them from the best panel into your variety. You may customise Just about every industry by clicking on it and altering its settings, such as labels, necessary status, or placeholder text.
As soon as you’ve extra the many fields you require, click on “Update” or “Preserve” to shop your progress. Give your sort a quick preview to make certain it appears to be like and works as you want. You’re now All set for the following phase.
Locating the Gravity Sorts Shortcode
Immediately after conserving your kind, you’ll require the Gravity Kinds shortcode to embed it with your Divi format. To uncover this shortcode, go towards your WordPress dashboard and click on on “Kinds” underneath the Gravity Types menu. You’ll see an index of all of your kinds.
Hunt for the one you only made. On the ideal facet of the form’s row, you’ll see a “Shortcode” column exhibiting one thing like [gravityform id="one"].
Duplicate this specific shortcode. In the event you don’t begin to see the shortcode column, hover in excess of your type’s title and click on “Embed.” A popup will show up showing the shortcode you may need. Copy it to the clipboard.
This shortcode consists of all the necessary settings to Show your sort where ever you need in just your Divi-run site.
Including a brand new Site or Submit With Divi Builder
Able to increase your Gravity Kind to a brand new website page or submit? Start out by logging into your WordPress dashboard.
Inside the remaining sidebar, click “Web pages” or “Posts” dependant upon in which you want your kind.
Future, decide on “Insert New” to produce a clean website page or publish.
As soon as the editor hundreds, you’ll begin to see the purple “Use Divi Builder” button at the best—simply click it.
Divi will start its builder interface, supplying you with selections to make from scratch, choose a pre-made layout, or clone an current page.
Decide the choice that suits your preferences.
Soon after Divi hundreds, you’ll have the ability to increase sections, rows, and modules to design and style your information.
Now, your new site or publish is ready for customization just before incorporating your Gravity Kinds shortcode.
Inserting Shortcodes Employing Divi’s Text Module
As soon as you’ve setup your site or post utilizing the Divi Builder, it’s time to place your Gravity Variety just where you want it.
Start out by adding a new portion or row, then insert a Textual content Module with your picked location.
Click on inside the Text Module’s material spot, making certain you’re from the “Text” (not “Visual”) tab.
Now, paste your Gravity Types shortcode—some thing like `[gravityform id="1" title="Wrong" description="Phony"]`.
Conserve your improvements and exit the module editor.
Divi will method the shortcode and Display screen your Gravity Sort ideal in your format.
You can move or duplicate the Text Module as needed to change placement.
This simple technique gives you complete Regulate above wherever your kind seems to the web site.
Customizing Sort Overall look Within Divi
Even though Gravity Types handles the core construction of one's sorts, Divi provides you with highly effective instruments to refine their feel and appear. When you finally’ve positioned your Gravity Sorts shortcode inside of a Divi Text module, you can use Divi’s module style and design options to boost the looks.
Change margins and padding for superior spacing, transform track record colours, or insert borders and shadows to create the shape stick out. You may also customize fonts, textual content sizes, and button models by concentrating on the module or employing Divi’s created-in layout selections.
If you prefer a lot more Command, insert tailor made CSS immediately within the module’s State-of-the-art options. This tactic permits you to match your kind’s visual appeal to your site’s branding, making sure a cohesive and Specialist presentation throughout your internet pages.
Adjusting Form Options for Optimal Overall performance
Although styling attracts website visitors’ attention, fantastic-tuning your Gravity Types settings assures your forms operate easily and efficiently inside Divi. Begin by reviewing Each and every variety’s basic configurations. Set clear type titles and descriptions so consumers know What to anticipate. Alter affirmation and notification choices to offer instant feed-back and keep submissions organized. Empower anti-spam functions like reCAPTCHA to cut back undesired entries without having disrupting genuine consumers.
Up coming, configure conditional logic for fields and sections, streamlining the user expertise by only exhibiting related concerns. Restrict the volume of entries if essential, specifically for registrations or Particular events.
Last but not least, improve the shape’s functionality by minimizing the usage of unneeded fields and enabling AJAX for smoother submissions. Attention to these options can help your sorts load quickly and function reliably.
Troubleshooting Common Display screen Challenges
Despite having careful set up, you would possibly notice your Gravity Varieties aren’t displaying the right way within Divi. Often, the form seems misaligned, or styling appears to be like off.
Initially, Look at when you’ve positioned the Gravity Types shortcode inside a Text or Code BloggersNeed divi gravity forms alignment fix module. Utilizing the Erroneous module can result in layout problems.
Future, make sure there aren’t conflicting CSS rules from Divi or other plugins. Attempt disabling customized CSS quickly to check out if it resolves the problem.
If the shape isn’t displaying in any respect, ensure the shortcode is appropriate and the form is Energetic.
Very clear each your browser and web site cache, as cached data can stop updates from showing.
And finally, make certain all plugins, Gravity Forms, and Divi are up to date to the most recent variations to forestall compatibility troubles.
Improving Varieties With More Divi Modules
By combining Gravity Types with Divi’s big selection of modules, you'll be able to create more partaking and interactive type layouts. Start off by placing your Gravity Varieties shortcode within a Divi Textual content or Code module.
Then, use Divi’s encompassing modules—like Blurbs, Images, or Connect with to Steps—to add context, visual cues, or incentives near your type. It's also possible to stack modules to Display screen testimonials, FAQs, or rely on badges alongside your sort, developing reliability and boosting person practical experience.
Improve visibility with Divi’s Divider and Spacer modules to develop respiration space close to your variety. If you want to spotlight your kind, spot it inside of a Divi Boxed or Shadowed segment. Tailor made backgrounds, gradients, or animations can assist draw attention, making your kind sense similar to a natural, persuasive aspect of the site design.
Summary
You’ve now acquired almost everything you have to seamlessly combine Gravity Kinds into your Divi-driven website. By adhering to these methods, you can create, personalize, and Screen kinds exactly in which you want them—no coding essential. Don’t forget about to preview your page and tweak the look for the perfect fit. In case you operate into difficulties, double-Verify your shortcode and clear your caches. With a certain amount of follow, including interactive varieties to your site will feel like second character!