Should you’re trying to seamlessly combine impressive kinds into your Divi-built pages, mastering Gravity Types shortcodes is vital. You don’t need Highly developed coding capabilities—just a clear procedure. By pursuing a handful of straightforward steps, you’ll Handle both of those the looks and placement of your respective forms. But before you can begin amassing entries or customizing the seem, There are several key actions you’ll should take to start with…
Knowing Gravity Forms and Divi Compatibility
Even though Gravity Types and Divi are formulated by diverse groups, they work seamlessly alongside one another that can assist you Establish custom made types and integrate them into your Divi-driven Web site.
Gravity Varieties provides you with sturdy tools for producing all the things from uncomplicated Get in touch with types to elaborate, multi-web page surveys. Divi, on the other hand, allows you to layout visually spectacular web pages with its intuitive builder.
After you utilize them alongside one another, you’re not restricted by Divi’s indigenous modules or basic form selections. As an alternative, you'll be able to embed any Gravity Variety immediately into your layouts using shortcodes, supplying you with complete Command over sort placement and styling.
This compatibility suggests you may preserve your site’s cohesive search even though leveraging impressive sort characteristics, making certain both equally style and design flexibility and Innovative operation.
Setting up and Activating Gravity Types
Upcoming, you’ll see a prompt to enter your Gravity Forms license critical. Uncover this key with your Gravity Kinds account, duplicate it, and paste it into the plugin’s settings.
Help save your changes to empower automated updates and access all characteristics.
With Gravity Varieties mounted and activated, you’re wanting to begin making kinds and integrating them using your Divi types.
Producing Your Very first Variety in Gravity Varieties
With Gravity Varieties installed and your license vital activated, you can start making your first type. Head towards your WordPress dashboard and find “Kinds” while in the left-hand menu. Simply click “New Kind,” then enter a title and outline to prepare your form conveniently.
Now, you’ll see the drag-and-fall kind builder. Incorporate fields by clicking or dragging them from the appropriate panel into your sort. You could customize Just about every subject by clicking on it and modifying its options, which include labels, expected position, or placeholder text.
As soon as you’ve extra every one of the fields you require, click on “Update” or “Help you save” to retail outlet your development. Give your form a quick preview to be certain it appears to be like and operates as you need. You’re now Prepared for another phase.
Locating the Gravity Kinds Shortcode
After saving your sort, you’ll have to have the Gravity Types shortcode to embed it with your Divi layout. To search out this shortcode, go towards your WordPress dashboard and click on on “Types” beneath the Gravity Kinds menu. You’ll see a summary of all your sorts.
Try to find the a person you merely created. On the ideal aspect of the form’s row, you’ll observe a “Shortcode” column exhibiting a little something like [gravityform id="1"].
Copy this correct shortcode. Should you don’t begin to see the shortcode column, hover about your sort’s title and click “Embed.” A popup will look displaying the shortcode you may need. Duplicate it in your clipboard.
This shortcode incorporates all the required options to Exhibit your form where ever you want in just your Divi-driven web site.
Incorporating a completely new Webpage or Article With Divi Builder
Prepared to include your Gravity Form to a whole new web site or submit? Start out by logging into your WordPress dashboard.
Inside the remaining sidebar, click on “Web pages” or “Posts” dependant upon where you want your variety.
Following, select “Insert New” to make a new website page or article.
As soon as the editor masses, 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 solutions to build from scratch, choose a pre-manufactured structure, or clone an current site.
Select the option that satisfies your needs.
Following Divi hundreds, you’ll be capable of increase sections, rows, and modules to style your information.
Now, your new site or publish is ready for personalization right before introducing your Gravity Kinds shortcode.
Inserting Shortcodes Applying Divi’s Text Module
When you’ve arrange your website page or submit using the Divi Builder, it’s time to put your Gravity Form precisely in which you want it.
Start out by introducing a completely new segment or row, then insert a Text Module inside your picked place.
Click on inside the Text Module’s content place, ensuring you’re in the “Text” (not “Visual”) tab.
Now, paste your Gravity Varieties shortcode—one thing like `[gravityform id="1" title="Fake" description="Bogus"]`.
Preserve your improvements and exit the module editor.
Divi will system the shortcode and Exhibit your Gravity Variety suitable inside your structure.
You may shift or duplicate the Text Module as necessary to change placement.
This simple system offers you full Regulate over where by your form appears over the site.
Customizing Sort Visual appearance In Divi
While Gravity Sorts handles the core framework within your varieties, Divi offers you highly effective equipment to refine their feel and look. As soon as you’ve put your Gravity Sorts shortcode inside of a Divi Textual content module, You should utilize Divi’s module design options to enhance the appearance.
Regulate margins and padding for better spacing, transform background hues, or include borders and shadows to make the form jump out. It's also possible to customize fonts, textual content measurements, and button types by targeting the module or making use of Divi’s crafted-in design and style options.
If you want all the more Regulate, increase personalized CSS immediately inside the module’s advanced settings. This approach helps you to match your type’s look to your internet site’s branding, making certain a cohesive and Qualified presentation across your internet pages.
Adjusting Variety Options for Ideal General performance
Whilst styling attracts website visitors’ awareness, great-tuning your Gravity Sorts configurations makes sure your varieties get the job done efficiently and efficiently inside Divi. Commence by reviewing Each individual type’s normal settings. Set crystal clear sort titles and descriptions so consumers know What to anticipate. Alter confirmation and notification selections to offer instant suggestions and retain submissions organized. Help anti-spam characteristics like reCAPTCHA to reduce undesirable entries with no disrupting legitimate people.
Next, configure conditional logic for fields and sections, streamlining the user encounter by only exhibiting relevant inquiries. Limit the quantity of entries if necessary, especially for registrations or special occasions.
Eventually, enhance the shape’s functionality by minimizing the usage of unnecessary fields and enabling AJAX for smoother submissions. Focus to those settings allows your forms load speedily and performance reliably.
Troubleshooting Widespread Screen Concerns
Even with mindful setup, you may perhaps see your Gravity Kinds aren’t displaying properly within just Divi. Often, the shape appears misaligned, or styling appears to be like off.
Initially, Check out when you’ve put the Gravity Forms shortcode inside of a Text or Code module. Utilizing the Completely wrong module may cause structure problems.
Subsequent, ensure that there aren’t conflicting CSS regulations from Divi or other plugins. Try disabling custom CSS temporarily to discover if it resolves the trouble.
If the shape isn’t displaying at all, confirm the shortcode is accurate and the form is active.
Clear the two your browser and web page cache, as cached knowledge can avoid updates from showing up.
Finally, assure all plugins, Gravity Kinds, and Divi are up-to-date to the most up-to-date versions to avoid compatibility concerns.
Improving Varieties With Extra Divi Modules
By combining Gravity Sorts with Divi’s wide selection of modules, you are able to build more partaking and interactive variety layouts. Get started by positioning your Gravity Kinds shortcode inside a Divi Text or Code module.
Then, use Divi’s encompassing modules—like Blurbs, Pictures, or Call to Actions—to incorporate context, visual cues, or incentives in the vicinity of your kind. It's also possible BloggersNeed design custom forms in divi with gravity forms to stack modules to Show testimonials, FAQs, or rely on badges together with your type, developing trustworthiness and boosting user encounter.
Greatly enhance visibility with Divi’s Divider and Spacer modules to build respiration home around your type. If you wish to highlight your type, area it within a Divi Boxed or Shadowed area. Customized backgrounds, gradients, or animations can assist draw awareness, generating your kind feel just like a purely natural, persuasive aspect within your webpage design and style.
Conclusion
You’ve now obtained every little thing you have to seamlessly combine Gravity Sorts into your Divi-powered Web-site. By pursuing these steps, you are able to build, customise, and Show types exactly where you want them—no coding necessary. Don’t overlook to preview your website page and tweak the look for the right in good shape. In the event you operate into concerns, double-Test your shortcode and crystal clear your caches. With a little apply, adding interactive forms to your site will come to feel like second mother nature!