In the event you’re aiming to seamlessly combine strong varieties into your Divi-built pages, mastering Gravity Sorts shortcodes is essential. You don’t have to have advanced coding capabilities—just a transparent method. By following a couple of easy measures, you’ll Manage the two the appearance and placement of the types. But in advance of you can begin collecting entries or customizing the glance, there are a few critical actions you’ll must just take initially…
Understanding Gravity Types and Divi Compatibility
While Gravity Forms and Divi are produced by distinctive groups, they do the job seamlessly collectively to help you Make custom made kinds and combine them into your Divi-driven Web page.
Gravity Sorts gives you strong applications for making almost everything from very simple Call kinds to sophisticated, multi-webpage surveys. Divi, Alternatively, enables you to structure visually gorgeous webpages with its intuitive builder.
Once you rely on them collectively, you’re not confined by Divi’s native modules or essential form possibilities. As a substitute, you may embed any Gravity Type directly into your layouts working with shortcodes, providing you with complete Regulate over variety placement and styling.
This compatibility signifies you can retain your web site’s cohesive glance although leveraging effective form functions, making sure both equally style flexibility and Sophisticated features.
Putting in and Activating Gravity Types
Upcoming, you’ll see a prompt to enter your Gravity Varieties license crucial. Find this important inside your Gravity Types account, duplicate it, and paste it in the plugin’s configurations.
Save your improvements to enable computerized updates and entry all attributes.
With Gravity Sorts installed and activated, you’re prepared to begin setting up forms and integrating them along with your Divi models.
Generating Your To start with Sort in Gravity Kinds
With Gravity Varieties put in plus your license important activated, you can begin building your initially sort. Head in your WordPress dashboard and uncover “Sorts” inside the remaining-hand menu. Click on “New Form,” then enter a title and description to organize your variety simply.
Now, you’ll begin to see the drag-and-fall sort builder. Insert fields by clicking or dragging them from the ideal panel into your variety. You can customize Every single industry by clicking on it and altering its options, including labels, necessary position, or placeholder textual content.
As you’ve additional the many fields you require, click on “Update” or “Conserve” to store your progress. Give your variety A fast preview to be sure it seems to be and performs as you desire. You’re now All set for the next step.
Locating the Gravity Sorts Shortcode
Immediately after saving your kind, you’ll want the Gravity Sorts shortcode to embed it within your Divi layout. To locate this shortcode, go in your WordPress dashboard and click on on “Varieties” under the Gravity Forms menu. You’ll see a list of all of your kinds.
Try to look for the one particular you merely developed. On the appropriate facet of the shape’s row, you’ll discover a “Shortcode” column exhibiting a thing like [gravityform id="one"].
Copy this actual shortcode. When you don’t see the shortcode column, hover about your type’s title and click “Embed.” A popup will appear demonstrating the shortcode you will need. Copy it to the clipboard.
This shortcode is made up of all the required configurations to Show your form anywhere you wish in just your Divi-run site.
Including a whole new Website page or Submit With Divi Builder
Able to incorporate your Gravity Variety to a brand new web site or write-up? Start off by logging into your WordPress dashboard.
Within the left sidebar, click on “Web pages” or “Posts” according to in which you want your sort.
Next, decide on “Increase New” to create a fresh website page or article.
After the editor hundreds, you’ll begin to see the purple “Use Divi Builder” button at the very best—click on it.
Divi will start its builder interface, giving you solutions to build from scratch, opt for a pre-built layout, or clone an present site.
Pick the choice that satisfies your preferences.
Following Divi hundreds, you’ll have the capacity to add sections, rows, and modules to layout your written content.
Now, your new webpage or post is prepared for personalization before including your Gravity Types shortcode.
Inserting Shortcodes Utilizing Divi’s Text Module
After you’ve set up your page or write-up utilizing the Divi Builder, it’s time to put your Gravity Kind precisely where you want it.
Begin by introducing a fresh area or row, then insert a Textual content Module in your picked area.
Click In the Text Module’s content material location, making sure you’re during the “Textual content” (not “Visual”) tab.
Now, paste your Gravity Types shortcode—something like `[gravityform id="one" title="Fake" description="Bogus"]`.
Help you save your modifications and exit the module editor.
Divi will procedure the shortcode and Exhibit your Gravity Type suitable inside your structure.
You may go or copy the Text Module as necessary to alter placement.
This straightforward strategy gives you finish Manage in excess of wherever your sort seems on the website page.
Customizing Kind Visual appeal Inside of Divi
Whilst Gravity Sorts handles the core structure of one's forms, Divi provides impressive tools to refine their feel and appear. As soon as you’ve positioned your Gravity Types shortcode inside of a Divi Textual content module, You should use Divi’s module structure settings to boost the looks.
Change margins and padding for better spacing, modify track record colors, or incorporate borders and shadows for making the shape jump out. You can also personalize fonts, textual content dimensions, and button designs by targeting the module or working with Divi’s developed-in style solutions.
If you would like more Regulate, add custom CSS directly within the module’s Highly developed options. This strategy lets you match your sort’s look to your web site’s branding, making sure a cohesive and Expert presentation throughout your internet pages.
Modifying Form Settings for Optimal Efficiency
Even though styling draws people’ attention, fine-tuning your Gravity Kinds settings ensures your forms work effortlessly and proficiently inside of Divi. Start by examining each form’s standard configurations. Established distinct type titles and descriptions so people know What to anticipate. Regulate confirmation and notification possibilities to offer prompt responses and hold submissions arranged. Allow anti-spam characteristics like reCAPTCHA to scale back unwanted entries devoid of disrupting real users.
Next, configure conditional logic for fields and sections, streamlining the consumer knowledge by only displaying suitable inquiries. Limit the number of entries if desired, specifically for registrations or Specific occasions.
At last, enhance the shape’s efficiency by minimizing the use of unwanted fields and enabling AJAX BloggersNeed divi gravity forms compatibility tips for smoother submissions. Interest to those options assists your sorts load rapidly and performance reliably.
Troubleshooting Prevalent Exhibit Troubles
Even with very careful setup, you may discover your Gravity Kinds aren’t exhibiting correctly inside Divi. From time to time, the shape seems misaligned, or styling appears to be like off.
To start with, Verify if you’ve positioned the Gravity Sorts shortcode within a Text or Code module. Utilizing the Erroneous module could cause format challenges.
Subsequent, make sure there aren’t conflicting CSS guidelines from Divi or other plugins. Try out disabling custom made CSS quickly to determine if it resolves the problem.
If the form isn’t exhibiting whatsoever, ensure the shortcode is proper and the form is Lively.
Very clear both equally your browser and internet site cache, as cached facts can protect against updates from showing.
Last of all, be certain all plugins, Gravity Sorts, and Divi are up to date to the most recent variations to avoid compatibility issues.
Enhancing Kinds With Supplemental Divi Modules
By combining Gravity Varieties with Divi’s big selection of modules, you could produce far more participating and interactive variety layouts. Start off by putting your Gravity Kinds shortcode inside a Divi Textual content or Code module.
Then, use Divi’s surrounding modules—like Blurbs, Images, or Connect with to Actions—to add context, visual cues, or incentives near your sort. You can even stack modules to Show testimonials, FAQs, or trust badges along with your sort, building believability and enhancing person practical experience.
Enhance visibility with Divi’s Divider and Spacer modules to generate respiration home all around your kind. If you wish to spotlight your kind, location it inside a Divi Boxed or Shadowed area. Personalized backgrounds, gradients, or animations may also help draw interest, producing your variety sense similar to a natural, persuasive component of one's web site style and design.
Conclusion
You’ve now obtained every thing you need to seamlessly integrate Gravity Kinds into your Divi-run Internet site. By next these ways, it is possible to produce, customize, and Show sorts precisely where you want them—no coding needed. Don’t ignore to preview your page and tweak the look for the perfect suit. In case you operate into troubles, double-Check out your shortcode and very clear your caches. With a bit of apply, introducing interactive kinds to your website will experience like next character!