If you’re wanting to seamlessly combine highly effective types into your Divi-made internet pages, mastering Gravity Kinds shortcodes is essential. You don’t have to have Highly developed coding capabilities—just a transparent approach. By following several easy ways, you’ll Handle both of those the looks and placement of your respective kinds. But in advance of you can start collecting entries or customizing the look, There are some critical steps you’ll need to get to start with…
Comprehension Gravity Types and Divi Compatibility
While Gravity Varieties and Divi are developed by diverse teams, they operate seamlessly with each other to help you Establish custom types and combine them into your Divi-run Web site.
Gravity Sorts provides you with robust tools for creating every little thing from basic Get hold of types to complex, multi-web page surveys. Divi, Conversely, permits you to structure visually beautiful pages with its intuitive builder.
Whenever you rely on them jointly, you’re not constrained by Divi’s indigenous modules or essential sort possibilities. Rather, you are able to embed any Gravity Form specifically into your layouts utilizing shortcodes, giving you complete Handle above sort placement and styling.
This compatibility indicates you'll be able to maintain your website’s cohesive glance whilst leveraging impressive kind options, guaranteeing each layout adaptability and advanced performance.
Installing and Activating Gravity Sorts
Following, you’ll see a prompt to enter your Gravity Types license essential. Come across this essential inside your Gravity Types account, duplicate it, and paste it to the plugin’s settings.
Conserve your modifications to allow automatic updates and access all attributes.
With Gravity Types mounted and activated, you’re all set to get started developing sorts and integrating them with the Divi types.
Building Your Very first Variety in Gravity Forms
With Gravity Forms installed as well as your license critical activated, you can start developing your initially form. Head for your WordPress dashboard and uncover “Forms” while in the still left-hand menu. Click on “New Sort,” then enter a title and outline to organize your form simply.
Now, you’ll see the drag-and-drop sort builder. Insert fields by clicking or dragging them from the best panel into your type. It is possible to personalize Each and every field by clicking on it and altering its options, such as labels, expected standing, or placeholder textual content.
As you’ve additional each of the fields you would like, simply click “Update” or “Help save” to store your progress. Give your type a quick preview to make sure it seems to be and operates as you'd like. You’re now Completely ready for the following step.
Finding the Gravity Forms Shortcode
Soon after saving your sort, you’ll want the Gravity Forms shortcode to embed it within your Divi structure. To search out this shortcode, go for your WordPress dashboard and click on “Kinds” beneath the Gravity Forms menu. You’ll see a summary of all of your kinds.
Search for the a single you just produced. On the best aspect of the form’s row, you’ll notice a “Shortcode” column displaying one thing like [gravityform id="one"].
Duplicate this correct shortcode. When you don’t see the shortcode column, hover in excess of your type’s title and click “Embed.” A popup will show up showing the shortcode you'll need. Duplicate it on your clipboard.
This shortcode has all the required configurations to Screen your type anywhere you wish in your Divi-powered web site.
Adding a brand new Webpage or Write-up With Divi Builder
All set to add your Gravity Variety to a different website page or write-up? Start by logging into your WordPress dashboard.
While in the remaining sidebar, simply click “Web pages” or “Posts” determined by in which you want your kind.
Upcoming, choose “Add New” to create a fresh web page or submit.
After the editor masses, you’ll see the purple “Use Divi Builder” button at the very best—simply click it.
Divi will start its builder interface, supplying you with choices to build from scratch, choose a pre-manufactured best divi gravity forms format, or clone an existing website page.
Decide on the choice that fits your preferences.
Soon after Divi loads, you’ll be capable to increase sections, rows, and modules to layout your content material.
Now, your new web site or publish is ready for personalization in advance of introducing your Gravity Forms shortcode.
Inserting Shortcodes Utilizing Divi’s Text Module
When you finally’ve setup your web site or put up using the Divi Builder, it’s time to put your Gravity Variety particularly where you want it.
Get started by adding a different part or row, then insert a Textual content Module in your preferred area.
Simply click inside the Text Module’s information region, making sure you’re while in the “Text” (not “Visible”) tab.
Now, paste your Gravity Forms shortcode—one thing like `[gravityform id="one" title="false" description="Phony"]`.
Help you save your modifications and exit the module editor.
Divi will process the shortcode and Show your Gravity Form appropriate inside your structure.
You may move or copy the Textual content Module as needed to modify placement.
This easy approach gives you complete Handle around where by your sort appears within the web page.
Customizing Kind Physical appearance Within just Divi
Despite the fact that Gravity Sorts handles the Main composition within your varieties, Divi will give you powerful instruments to refine their look and feel. As soon as you’ve put your Gravity Sorts shortcode within a Divi Textual content module, You should utilize Divi’s module style and design settings to boost the looks.
Alter margins and padding for better spacing, transform history colours, or insert borders and shadows to make the form jump out. You may as well customize fonts, text dimensions, and button models by focusing on the module or working with Divi’s built-in style and design selections.
If you'd like far more Manage, incorporate tailor made CSS instantly throughout the module’s Sophisticated settings. This approach enables you to match your type’s visual appeal to your internet site’s branding, ensuring a cohesive and Experienced presentation throughout your webpages.
Altering Type Settings for Optimal Effectiveness
Although styling draws website visitors’ interest, fantastic-tuning your Gravity Kinds settings ensures your varieties get the job done efficiently and proficiently within Divi. Get started by examining Each and every variety’s common options. Set apparent kind titles and descriptions so buyers know What to anticipate. Modify confirmation and notification possibilities to provide quick feed-back and maintain submissions arranged. Empower anti-spam characteristics like reCAPTCHA to reduce unwelcome entries without having disrupting legitimate consumers.
Next, configure conditional logic for fields and sections, streamlining the consumer knowledge by only displaying suitable inquiries. Restrict the amount of entries if desired, specifically for registrations or special occasions.
Eventually, improve the form’s functionality by minimizing using needless fields and enabling AJAX for smoother submissions. Attention to these settings allows your kinds load speedily and performance reliably.
Troubleshooting Prevalent Display screen Challenges
In spite of mindful setup, you might recognize your Gravity Varieties aren’t exhibiting effectively in Divi. From time to time, the shape appears misaligned, or styling appears off.
To start with, Examine in case you’ve put the Gravity Varieties shortcode inside a Text or Code module. Utilizing the wrong module could potentially cause structure concerns.
Up coming, be sure there aren’t conflicting CSS guidelines from Divi or other plugins. Try out disabling custom CSS quickly to determine if it resolves the trouble.
If the shape isn’t demonstrating in the slightest degree, affirm the shortcode is right and the shape is active.
Clear the two your browser and web page cache, as cached knowledge can reduce updates from showing.
Last of all, be certain all plugins, Gravity Sorts, and Divi are updated to the most recent versions to circumvent compatibility troubles.
Improving Types With Supplemental Divi Modules
By combining Gravity Varieties with Divi’s wide range of modules, you can make extra participating and interactive variety layouts. Start out by putting your Gravity Types shortcode inside a Divi Textual content or Code module.
Then, use Divi’s surrounding modules—like Blurbs, Images, or Phone to Steps—to add context, visual cues, or incentives around your type. You may also stack modules to Display screen testimonies, FAQs, or belief badges together with your type, setting up credibility and boosting consumer working experience.
Enhance visibility with Divi’s Divider and Spacer modules to make respiration area all around your form. In order to highlight your type, area it inside a Divi Boxed or Shadowed portion. Custom made backgrounds, gradients, or animations might help attract attention, producing your variety sense like a pure, compelling aspect of the website page design and style.
Conclusion
You’ve now received anything you must seamlessly combine Gravity Types into your Divi-powered Internet site. By adhering to these methods, you may develop, personalize, and Exhibit sorts just where you want them—no coding needed. Don’t overlook to preview your web page and tweak the look for the perfect fit. For those who run into challenges, double-Check out your shortcode and obvious your caches. With a bit of practice, adding interactive varieties to your site will sense like second character!