For those who’re wanting to seamlessly integrate strong kinds into your Divi-made internet pages, mastering Gravity Varieties shortcodes is important. You don’t want advanced coding techniques—just a clear procedure. By adhering to a couple of easy steps, you’ll Manage equally the looks and placement of one's sorts. But right before you can start amassing entries or customizing the search, There are several critical steps you’ll need to choose initial…
Knowing Gravity Types and Divi Compatibility
Though Gravity Varieties and Divi are formulated by various teams, they work seamlessly alongside one another that will help you build personalized sorts and integrate them into your Divi-driven Site.
Gravity Varieties provides strong equipment for generating every thing from easy Call sorts to advanced, multi-website page surveys. Divi, on the other hand, permits you to structure visually breathtaking web pages with its intuitive builder.
After you utilize them with each other, you’re not restricted by Divi’s native modules or fundamental type alternatives. Instead, you could embed any Gravity Type instantly into your layouts employing shortcodes, supplying you with overall Command over type placement and styling.
This compatibility suggests it is possible to retain your website’s cohesive glance though leveraging highly effective form features, making certain equally design adaptability and Superior functionality.
Putting in and Activating Gravity Sorts
Subsequent, you’ll see a prompt to enter your Gravity Forms license important. Find this important within your Gravity Kinds account, duplicate it, and paste it to the plugin’s settings.
Help you save your modifications to allow computerized updates and access all capabilities.
With Gravity Varieties installed and activated, you’re wanting to start out constructing forms and integrating them with your Divi styles.
Creating Your First Sort in Gravity Kinds
With Gravity Types installed and also your license important activated, you can begin setting up your very first variety. Head towards your WordPress dashboard and locate “Forms” within the left-hand menu. Click “New Kind,” then enter a title and outline to organize your sort conveniently.
Now, you’ll begin to see the drag-and-drop form builder. Insert fields by clicking or dragging them from the ideal panel into your variety. You are able to personalize Just about every area by clicking on it and altering its settings, for example labels, essential position, or placeholder textual content.
Once you’ve additional all of the fields you may need, click on “Update” or “Preserve” to keep your development. Give your variety A fast preview to be certain it appears to be and is effective as you'd like. You’re now All set for the subsequent phase.
Finding the Gravity Sorts Shortcode
Right after preserving your variety, you’ll will need the Gravity Varieties shortcode to embed it in the Divi layout. To discover this shortcode, go towards your WordPress dashboard and click on on “Sorts” under the Gravity Kinds menu. You’ll see an index of all of your sorts.
Hunt for the a person you only established. On the ideal facet of the shape’s row, you’ll discover a “Shortcode” column exhibiting a little something like [gravityform id="one"].
Copy this exact shortcode. In the event you don’t begin to see the shortcode column, hover over your sort’s title and click “Embed.” A popup will seem demonstrating the shortcode you need. Duplicate it for your clipboard.
This shortcode includes all the mandatory options to display your kind anywhere you want in your Divi-run website.
Adding a New Website page or Put up With Divi Builder
Willing to insert your Gravity Kind to a fresh page or post? Start by logging into your WordPress dashboard.
From the still left sidebar, simply click “Web pages” or “Posts” based upon where you want your kind.
Up coming, select “Add New” to produce a new site or submit.
After the editor masses, you’ll see the purple “Use Divi Builder” button at the best—simply click it.
Divi will launch its builder interface, providing you with choices to develop from scratch, select a pre-manufactured structure, or clone an current web site.
Pick the option that suits your requirements.
Soon after Divi loads, you’ll be capable of increase sections, rows, and modules to layout your material.
Now, your new web page or post is prepared for personalization in advance of incorporating your Gravity Varieties shortcode.
Inserting Shortcodes Employing Divi’s Textual content Module
As soon as you’ve build your site or publish utilizing the Divi Builder, it’s time to position your Gravity Kind exactly where you want it.
Begin by including a whole new segment or row, then insert a Textual content Module within your chosen location.
Simply click Within the Textual content Module’s content material spot, making sure you’re from the “Text” (not “Visual”) tab.
Now, paste your Gravity Varieties shortcode—anything like `[gravityform id="1" title="Bogus" description="Bogus"]`.
Conserve your adjustments and exit the module editor.
Divi will procedure the shortcode best divi gravity forms and Screen your Gravity Form proper inside your layout.
You are able to shift or duplicate the Textual content Module as necessary to change placement.
This straightforward method gives you total Manage over exactly where your sort appears around the website page.
Customizing Type Overall look Inside Divi
While Gravity Sorts handles the Main structure of your respective sorts, Divi offers you powerful instruments to refine their feel and look. As you’ve placed your Gravity Forms shortcode inside of a Divi Textual content module, You need to use Divi’s module design configurations to boost the appearance.
Adjust margins and padding for better spacing, improve history shades, or insert borders and shadows to create the shape get noticed. You may also customize fonts, text dimensions, and button designs by targeting the module or working with Divi’s built-in design options.
If you'd like even more Command, increase customized CSS immediately within the module’s Innovative options. This approach permits you to match your sort’s overall look to your web site’s branding, making certain a cohesive and Skilled presentation throughout your web pages.
Altering Variety Settings for Ideal General performance
Even though styling attracts readers’ awareness, fine-tuning your Gravity Varieties settings makes certain your kinds do the job efficiently and proficiently in Divi. Begin by reviewing each kind’s basic configurations. Set clear kind titles and descriptions so users know what to expect. Modify affirmation and notification alternatives to supply instantaneous suggestions and keep submissions arranged. Permit anti-spam functions like reCAPTCHA to scale back unwanted entries without disrupting authentic customers.
Future, configure conditional logic for fields and sections, streamlining the user expertise by only exhibiting applicable inquiries. Limit the volume of entries if necessary, especially for registrations or Unique gatherings.
Last but not least, optimize the form’s effectiveness by minimizing using unwanted fields and enabling AJAX for smoother submissions. Focus to those settings helps your kinds load quickly and performance reliably.
Troubleshooting Typical Display Issues
Despite having watchful set up, you could observe your Gravity Sorts aren’t exhibiting correctly within just Divi. At times, the form appears misaligned, or styling seems off.
First, Check out if you’ve positioned the Gravity Kinds shortcode inside a Text or Code module. Using the wrong module might cause structure problems.
Subsequent, make certain there aren’t conflicting CSS regulations from Divi or other plugins. Attempt disabling custom made CSS quickly to discover if it resolves the challenge.
If the shape isn’t displaying in the slightest degree, verify the shortcode is correct and the shape is active.
Clear both of those your browser and web site cache, as cached knowledge can protect against updates from showing up.
And lastly, make sure all plugins, Gravity Types, and Divi are up-to-date to the newest variations to avoid compatibility concerns.
Maximizing Kinds With Further Divi Modules
By combining Gravity Sorts with Divi’s big selection of modules, you could create more engaging and interactive kind layouts. Start out by placing your Gravity Kinds shortcode inside a Divi Text or Code module.
Then, use Divi’s encompassing modules—like Blurbs, Photos, or Simply call to Actions—to include context, Visible cues, or incentives close to your variety. It's also possible to stack modules to Screen recommendations, FAQs, or trust badges together with your variety, building trustworthiness and boosting consumer practical experience.
Boost visibility with Divi’s Divider and Spacer modules to make respiratory place all over your variety. If you would like emphasize your sort, position it inside a Divi Boxed or Shadowed segment. Custom backgrounds, gradients, or animations can assist draw focus, building your variety come to feel similar to a natural, persuasive portion of your web site style and design.
Summary
You’ve now bought all the things you might want to seamlessly combine Gravity Kinds into your Divi-run Web page. By following these measures, you may build, personalize, and Show forms specifically where you want them—no coding expected. Don’t forget to preview your webpage and tweak the design for the right suit. In case you operate into problems, double-Verify your shortcode and clear your caches. With a bit of apply, adding interactive kinds to your internet site will really feel like 2nd character!