If you’re looking to seamlessly integrate potent forms into your Divi-intended web pages, mastering Gravity Sorts shortcodes is crucial. You don’t will need Innovative coding competencies—just a clear method. By pursuing a handful of uncomplicated measures, you’ll Regulate the two the appearance and placement of your varieties. But before you can start collecting entries or customizing the glimpse, There are some critical steps you’ll have to just take first…
Comprehending Gravity Kinds and Divi Compatibility
Even though Gravity Varieties and Divi are made by various teams, they get the job done seamlessly together to assist you Create custom made sorts and combine them into your Divi-run Web page.
Gravity Varieties gives you robust applications for making everything from very simple Get hold of kinds to complex, multi-web site surveys. Divi, On the flip side, permits you to style visually gorgeous internet pages with its intuitive builder.
When you make use of them collectively, you’re not confined by Divi’s indigenous modules or fundamental form selections. Rather, you may embed any Gravity Form instantly into your layouts applying shortcodes, giving you full Manage around type placement and styling.
This compatibility suggests it is possible to keep your web site’s cohesive search even though leveraging potent kind functions, making certain each structure adaptability and Sophisticated operation.
Setting up and Activating Gravity Types
Subsequent, you’ll see a prompt to enter your Gravity Sorts license key. Locate this important inside your Gravity Varieties account, copy it, and paste it to the plugin’s configurations.
Save your modifications to allow computerized updates and accessibility all features.
With Gravity Types put in and activated, you’re willing to commence creating kinds and integrating them using your Divi styles.
Building Your 1st Form in Gravity Types
With Gravity Types mounted and also your license crucial activated, you can start setting up your to start with sort. Head to the WordPress dashboard and discover “Varieties” during the still left-hand menu. Click “New Kind,” then enter a title and outline to prepare your type simply.
Now, you’ll begin to see the drag-and-drop sort builder. Add fields by clicking or dragging them from the best panel into your kind. You could customize Each individual field by clicking on it and modifying its options, like labels, required position, or placeholder textual content.
Once you’ve additional each of the fields you may need, click on “Update” or “Help save” to retail store your progress. Give your kind a quick preview to make certain it seems to be and performs as you need. You’re now ready for another move.
Locating the Gravity Forms Shortcode
Following conserving your kind, you’ll require the Gravity Kinds shortcode to embed it in the Divi format. To find this shortcode, go to the WordPress dashboard and click on on “Kinds” underneath the Gravity Kinds menu. You’ll see a summary of your sorts.
Try to look for the 1 you simply created. On the ideal aspect of the shape’s row, you’ll recognize a “Shortcode” column displaying something like [gravityform id="1"].
Copy this specific shortcode. Should you don’t see the shortcode column, hover above your variety’s title and click on “Embed.” A popup will appear exhibiting the shortcode you'll need. Duplicate it for your clipboard.
This shortcode contains all the mandatory configurations to Display screen your variety where ever you wish in your Divi-powered internet site.
Introducing a New Web page or Write-up With Divi Builder
Ready to include your Gravity Sort to a completely new web page or put up? Get started by logging into your WordPress dashboard.
Within the left sidebar, click “Internet pages” or “Posts” determined by in which you want your kind.
Subsequent, find “Add New” to make a fresh webpage or article.
When the editor masses, you’ll see the purple “Use Divi Builder” button at the highest—click on it.
Divi will start its builder interface, providing you with solutions to make from scratch, decide on a pre-created format, or clone an present webpage.
Decide on the option that suits your needs.
Right after Divi loads, you’ll be capable of add sections, rows, and modules to style and design your information.
Now, your new site or post is ready for customization right before incorporating your Gravity Varieties shortcode.
Inserting Shortcodes Applying Divi’s Text Module
As soon as you’ve build your site or article using the Divi Builder, it’s time to put your Gravity Type accurately where you want it.
Get started by introducing a different section or row, then insert a Textual content Module as part of your picked place.
Simply click In the Text Module’s articles place, making certain you’re in the “Textual content” (not “Visual”) tab.
Now, paste your Gravity Forms shortcode—one thing like `[gravityform id="one" title="Untrue" description="Fake"]`.
Help save your alterations and exit the module editor.
Divi will course of action the shortcode and Screen your Gravity Type correct inside your format.
You may shift or copy the Text Module as required to adjust placement.
This straightforward process offers you complete Handle more than exactly where your kind appears within the webpage.
Customizing Kind Appearance Inside of Divi
While Gravity Varieties handles the Main composition of your varieties, Divi gives you powerful tools to refine their feel and appear. When you’ve placed your Gravity Varieties shortcode within a Divi Text module, You need BloggersNeed gravity forms plugin for divi theme to use Divi’s module design settings to reinforce the looks.
Regulate margins and padding for improved spacing, modify qualifications colors, or increase borders and shadows to create the form stick out. You can also customise fonts, text dimensions, and button designs by focusing on the module or utilizing Divi’s constructed-in style and design choices.
If you need more Manage, insert personalized CSS specifically in the module’s Innovative options. This method permits you to match your form’s physical appearance to your site’s branding, guaranteeing a cohesive and Specialist presentation across your pages.
Adjusting Form Settings for Exceptional Overall performance
Although styling attracts people’ attention, good-tuning your Gravity Types configurations guarantees your varieties function efficiently and efficiently within just Divi. Begin by reviewing Just about every form’s typical options. Set crystal clear form titles and descriptions so users know What to anticipate. Modify affirmation and notification selections to supply prompt comments and retain submissions arranged. Empower anti-spam features like reCAPTCHA to reduce unwanted entries without the need of disrupting genuine users.
Upcoming, configure conditional logic for fields and sections, streamlining the person expertise by only displaying related thoughts. Limit the amount of entries if needed, specifically for registrations or Exclusive activities.
At last, improve the form’s efficiency by minimizing the use of unnecessary fields and enabling AJAX for smoother submissions. Attention to those settings will help your forms load quickly and function reliably.
Troubleshooting Common Show Troubles
Even with mindful setup, you would possibly see your Gravity Sorts aren’t displaying properly in just Divi. Sometimes, the shape appears misaligned, or styling seems to be off.
Initially, Verify should you’ve put the Gravity Types shortcode inside of a Textual content or Code module. Utilizing the wrong module may cause structure problems.
Future, be sure there aren’t conflicting CSS guidelines from Divi or other plugins. Try out disabling personalized CSS temporarily to find out if it resolves the situation.
If the shape isn’t demonstrating in the slightest degree, affirm the shortcode is appropriate and the shape is Lively.
Obvious both your browser and site cache, as cached data can avert updates from appearing.
Lastly, make sure all plugins, Gravity Types, and Divi are up-to-date to the most recent versions to prevent compatibility concerns.
Boosting Kinds With Added Divi Modules
By combining Gravity Kinds with Divi’s wide range of modules, you'll be able to create more engaging and interactive kind layouts. Begin by putting your Gravity Kinds shortcode inside of a Divi Textual content or Code module.
Then, use Divi’s surrounding modules—like Blurbs, Photos, or Call to Actions—to incorporate context, Visible cues, or incentives near your form. You can even stack modules to display testimonies, FAQs, or have faith in badges together with your variety, building reliability and boosting consumer expertise.
Increase visibility with Divi’s Divider and Spacer modules to generate breathing room about your kind. If you need to emphasize your sort, place it inside a Divi Boxed or Shadowed portion. Custom backgrounds, gradients, or animations will help attract consideration, earning your form come to feel like a purely natural, powerful element of your respective web page structure.
Conclusion
You’ve now got anything you need to seamlessly combine Gravity Varieties into your Divi-run Internet site. By next these actions, you'll be able to develop, personalize, and Screen kinds just where you want them—no coding necessary. Don’t overlook to preview your page and tweak the design for the perfect suit. If you operate into concerns, double-Look at your shortcode and apparent your caches. With a little bit of follow, introducing interactive types to your site will really feel like second character!