Should you’re looking to seamlessly integrate highly effective kinds into your Divi-designed web pages, mastering Gravity Kinds shortcodes is essential. You don’t need Innovative coding capabilities—just a transparent course of action. By adhering to a couple of uncomplicated actions, you’ll Handle both of those the appearance and placement of your respective sorts. But ahead of you can start gathering entries or customizing the appear, There are some essential steps you’ll really need to consider first…
Comprehension Gravity Forms and Divi Compatibility
Even though Gravity Types and Divi are developed by different teams, they perform seamlessly jointly that can assist you Create customized varieties and combine them into your Divi-driven Web-site.
Gravity Kinds offers you robust applications for building everything from easy Speak to types to intricate, multi-site surveys. Divi, Then again, helps you to style and design visually breathtaking web pages with its intuitive builder.
When you utilize them jointly, you’re not confined by Divi’s indigenous modules or essential variety selections. As a substitute, you are able to embed any Gravity Form instantly into your layouts employing shortcodes, supplying you with overall Management more than form placement and styling.
This compatibility signifies it is possible to keep your website’s cohesive appear when leveraging effective form capabilities, making sure both of those design and style versatility and Superior performance.
Setting up and Activating Gravity Types
Up coming, you’ll see a prompt to enter your Gravity Types license key. Come across this crucial in the Gravity Kinds account, duplicate it, and paste it into the plugin’s options.
Help save your improvements to enable automatic updates and obtain all functions.
With Gravity Varieties installed and activated, you’re all set to start out building types and integrating them with the Divi types.
Building Your First Type in Gravity Types
With Gravity Kinds installed along with your license crucial activated, you can start building your to start with variety. Head on your WordPress dashboard and obtain “Kinds” inside the left-hand menu. Simply click “New Variety,” then enter a title and description to arrange your form conveniently.
Now, you’ll begin to see the drag-and-fall form builder. Increase fields by clicking or dragging them from the ideal panel into your kind. You'll be able to personalize each industry by clicking on it and changing its settings, such as labels, required standing, or placeholder textual content.
As soon as you’ve additional all of the fields you may need, click “Update” or “Conserve” to retail store your development. Give your variety A fast preview to ensure it appears to be like and functions as you want. You’re now ready for the following move.
Finding the Gravity Types Shortcode
Immediately after saving your variety, you’ll need to have the Gravity Varieties shortcode to embed it in your Divi format. To discover this shortcode, go on your WordPress dashboard and click on “Forms” beneath the Gravity Varieties menu. You’ll see a listing of all your forms.
Search for the just one you simply created. On the right facet of the form’s row, you’ll notice a “Shortcode” column displaying anything like [gravityform id="one"].
Duplicate this exact shortcode. When you don’t see the shortcode column, hover in excess of your kind’s title and click on “Embed.” A popup will look demonstrating the shortcode you will need. Copy it towards your clipboard.
This shortcode has all the mandatory settings to Display screen your sort wherever you'd like in just your Divi-run web site.
Introducing a whole new Website page or Article With Divi Builder
Able to increase your Gravity Form to a new page or put up? Start off by logging into your WordPress dashboard.
In the remaining sidebar, simply click “Internet pages” or “Posts” based upon where you want your variety.
Future, decide on “Increase New” to make a clean site or publish.
Once the editor masses, you’ll see the purple “Use Divi Builder” button at the very best—click it.
Divi will start its builder interface, supplying you with solutions to develop from scratch, opt for a pre-created structure, or clone an present web page.
Decide on the option that fits your requirements.
After Divi hundreds, you’ll be capable to increase sections, rows, and modules to style your material.
Now, your new site or put up is prepared for personalisation just before including your Gravity Sorts shortcode.
Inserting Shortcodes Applying Divi’s Text Module
As soon as you’ve create your site or put up using the Divi Builder, it’s time to position your Gravity Kind exactly where you want it.
Start out by incorporating a whole new segment or row, then insert a Text Module within your chosen location.
Click inside the Textual content Module’s information location, ensuring that you’re inside the “Textual content” (not “Visible”) tab.
Now, paste your Gravity Types shortcode—one thing like `[gravityform id="one" title="false" description="Fake"]`.
Help you save your variations BloggersNeed divi gravity forms alignment fix and exit the module editor.
Divi will process the shortcode and display your Gravity Type correct in just your structure.
You may go or duplicate the Text Module as necessary to adjust placement.
This easy method gives you complete Regulate around exactly where your kind appears within the web page.
Customizing Type Visual appearance Inside Divi
Though Gravity Sorts handles the core structure within your kinds, Divi provides strong resources to refine their feel and appear. After you’ve put your Gravity Sorts shortcode inside of a Divi Textual content module, you can use Divi’s module style settings to boost the appearance.
Alter margins and padding for superior spacing, modify track record colours, or add borders and shadows to generate the shape stand out. You may as well customize fonts, text measurements, and button kinds by targeting the module or employing Divi’s constructed-in structure alternatives.
If you would like a lot more Handle, increase custom made CSS instantly throughout the module’s advanced configurations. This strategy lets you match your form’s physical appearance to your internet site’s branding, guaranteeing a cohesive and Experienced presentation throughout your web pages.
Changing Form Options for Best Effectiveness
Although styling draws guests’ attention, high-quality-tuning your Gravity Types configurations assures your varieties operate smoothly and proficiently in just Divi. Start by examining Each individual form’s common configurations. Established very clear kind titles and descriptions so consumers know What to anticipate. Change confirmation and notification possibilities to offer quick feed-back and retain submissions structured. Help anti-spam capabilities like reCAPTCHA to lower unwelcome entries devoid of disrupting authentic consumers.
Up coming, configure conditional logic for fields and sections, streamlining the person practical experience by only displaying suitable issues. Limit the volume of entries if essential, specifically for registrations or Exclusive situations.
Finally, improve the form’s performance by minimizing the usage of unnecessary fields and enabling AJAX for smoother submissions. Interest to those configurations can help your kinds load immediately and performance reliably.
Troubleshooting Popular Display Troubles
Even with watchful setup, you could possibly see your Gravity Sorts aren’t displaying properly within just Divi. Occasionally, the shape appears misaligned, or styling appears to be like off.
Initial, Check out in case you’ve positioned the Gravity Kinds shortcode within a Textual content or Code module. Utilizing the Improper module could cause structure difficulties.
Upcoming, make sure there aren’t conflicting CSS principles from Divi or other plugins. Check out disabling personalized CSS briefly to see if it resolves the challenge.
If the form isn’t demonstrating in the least, verify the shortcode is proper and the shape is active.
Obvious each your browser and website cache, as cached data can avoid updates from showing.
And finally, be certain all plugins, Gravity Varieties, and Divi are up-to-date to the most up-to-date versions to stop compatibility challenges.
Enhancing Sorts With Added Divi Modules
By combining Gravity Sorts with Divi’s wide selection of modules, you could make a lot more engaging and interactive variety layouts. Commence by inserting your Gravity Varieties shortcode within a Divi Text or Code module.
Then, use Divi’s surrounding modules—like Blurbs, Illustrations or photos, or Contact to Steps—so as to add context, visual cues, or incentives in the vicinity of your kind. You can also stack modules to Screen testimonies, FAQs, or have faith in badges alongside your sort, constructing reliability and enhancing user experience.
Increase visibility with Divi’s Divider and Spacer modules to develop respiratory place close to your sort. If you want to spotlight your variety, place it within a Divi Boxed or Shadowed portion. Tailor made backgrounds, gradients, or animations can assist draw consideration, generating your variety feel similar to a pure, persuasive component of your respective web site layout.
Conclusion
You’ve now obtained anything you'll want to seamlessly combine Gravity Kinds into your Divi-driven Web-site. By subsequent these methods, you'll be able to generate, customize, and Screen varieties precisely in which you want them—no coding needed. Don’t forget about to preview your page and tweak the look for an ideal in good shape. In case you run into troubles, double-check your shortcode and obvious your caches. With a bit of observe, adding interactive sorts to your web site will sense like next mother nature!