Should you’re seeking to seamlessly integrate strong forms into your Divi-made webpages, mastering Gravity Sorts shortcodes is critical. You don’t will need Sophisticated coding techniques—just a transparent approach. By pursuing a couple of clear-cut measures, you’ll Handle the two the looks and placement of your respective varieties. But just before you can start accumulating entries or customizing the glance, there are a few vital actions you’ll ought to acquire very first…
Understanding Gravity Kinds and Divi Compatibility
Whilst Gravity Types and Divi are produced by diverse groups, they perform seamlessly alongside one another to assist you Establish custom made kinds and combine them into your Divi-run Web-site.
Gravity Sorts provides you with robust tools for making everything from basic Speak to varieties to sophisticated, multi-page surveys. Divi, Alternatively, helps you to style visually gorgeous pages with its intuitive builder.
When you make use of them collectively, you’re not minimal by Divi’s indigenous modules or simple sort solutions. As a substitute, you are able to embed any Gravity Kind right into your layouts utilizing shortcodes, supplying you with complete Command about kind placement and styling.
This compatibility usually means you are able to maintain your internet site’s cohesive glimpse though leveraging potent type characteristics, making sure the two design and style versatility and Highly developed performance.
Installing and Activating Gravity Types
Next, you’ll see a prompt to enter your Gravity Varieties license critical. Uncover this vital inside your Gravity Sorts account, duplicate it, and paste it to the plugin’s configurations.
Help save your changes to enable automated updates and access all functions.
With Gravity Kinds installed and activated, you’re wanting to start off developing sorts and integrating them with the Divi types.
Generating Your To start with Variety in Gravity Types
With Gravity Types installed plus your license important activated, you can begin developing your initial kind. Head on your WordPress dashboard and come across “Varieties” in the still left-hand menu. Simply click “New Variety,” then enter a title and description to arrange your variety effortlessly.
Now, you’ll begin to see the drag-and-drop variety builder. Add fields by clicking or dragging them from the right panel into your type. You can customise Every single field by clicking on it and adjusting its options, including labels, necessary position, or placeholder text.
Once you’ve extra each of the fields you will need, click “Update” or “Save” to retail store your progress. Give your kind a quick preview to be sure it appears and operates as you'd like. You’re now Completely ready for another stage.
Finding the Gravity Forms Shortcode
Following preserving your form, you’ll will need the Gravity Forms shortcode to embed it inside your Divi format. To seek out this shortcode, go on your WordPress dashboard and click on on “Types” under the Gravity Kinds menu. You’ll see an index of all of your kinds.
Look for the a person you just made. On the correct aspect of the shape’s row, you’ll see a “Shortcode” column displaying one thing like [gravityform id="1"].
Duplicate this precise shortcode. In case you don’t begin to see the shortcode column, hover around your type’s title and click on “Embed.” A popup will look displaying the shortcode you will need. Copy it to your clipboard.
This shortcode includes all the mandatory options to Display screen your variety where ever you desire inside of your Divi-powered site.
Adding a different Site or Put up With Divi Builder
Willing to include your Gravity Form to a brand new website page or post? Start by logging into your WordPress dashboard.
Inside the still left sidebar, click on “Pages” or “Posts” based on where you want your sort.
Following, choose “Increase New” to make a fresh new webpage or put up.
After the editor loads, you’ll begin to see the purple “Use Divi Builder” button at the top—simply click it.
Divi will launch its builder interface, providing you with alternatives to make from scratch, go with a pre-created layout, or clone an existing website page.
Decide on the choice that satisfies your requirements.
Just after Divi masses, you’ll be capable to incorporate sections, rows, and modules to design and style your content.
Now, your new page or article is prepared for personalization just before incorporating your Gravity Types shortcode.
Inserting Shortcodes Using Divi’s Text Module
After you’ve build your page or put up utilizing the Divi Builder, it’s time to put your Gravity Variety accurately in which you want it.
Get started by adding a fresh segment or row, then insert a Textual content Module in your preferred location.
Click Within the Text Module’s content area, ensuring you’re from the “Textual content” (not “Visible”) tab.
Now, paste your Gravity Kinds shortcode—anything like `[gravityform id="1" title="Wrong" description="Bogus"]`.
Conserve your variations and exit the module editor.
Divi will process the shortcode and Screen your Gravity Variety right within your layout.
You could shift or copy the Textual content Module as needed to adjust placement.
This straightforward method will give you finish Command over in which your kind seems on the website page.
Customizing Form Visual appeal Within just Divi
Though Gravity Types handles the Main construction of one's forms, Divi gives you impressive instruments to refine their look and feel. Once you’ve positioned your Gravity Varieties shortcode within a Divi Text module, You should utilize Divi’s module structure settings to boost the appearance.
Change margins and padding for far better spacing, improve background hues, or incorporate borders and shadows to make the shape get noticed. You may also customize fonts, text sizes, and button styles by targeting the module or making use of Divi’s designed-in style and design selections.
In order for you all the more Regulate, include custom made CSS right throughout the module’s advanced settings. This strategy allows you to match your sort’s visual appearance to your site’s branding, making certain a cohesive and Qualified presentation across your pages.
Changing Kind Settings for Optimum Overall performance
When styling attracts guests’ notice, great-tuning your Gravity Forms configurations guarantees your forms operate efficiently and effectively in just Divi. Start by examining Every type’s basic configurations. Established distinct variety titles and descriptions so end users know what to expect. Change affirmation and notification solutions to offer instant feedback and retain submissions organized. Allow anti-spam features like reCAPTCHA to lower undesired entries with no disrupting authentic consumers.
Future, configure conditional logic for fields and sections, streamlining the user encounter by only displaying related thoughts. Limit the amount of entries if needed, especially for registrations or Particular occasions.
Last but not least, enhance the form’s general performance by minimizing the usage of pointless fields and enabling AJAX for smoother submissions. Notice to those options aids your kinds load immediately and function reliably.
Troubleshooting Frequent Display screen Issues
Despite cautious setup, you could possibly detect your Gravity Types aren’t displaying correctly inside of Divi. Sometimes, the form seems misaligned, or styling appears to be off.
1st, Look at when you’ve placed the Gravity Varieties shortcode within a Textual content or Code module. Utilizing the Improper module might cause layout troubles.
Upcoming, ensure there aren’t conflicting CSS regulations from Divi or other plugins. Attempt disabling custom CSS temporarily to view if it resolves the problem.
If the shape isn’t showing in any way, validate the shortcode is BloggersNeed design custom forms in divi with gravity forms correct and the shape is active.
Crystal clear each your browser and internet site cache, as cached details can reduce updates from showing up.
And finally, make sure all plugins, Gravity Types, and Divi are updated to the latest versions to avoid compatibility concerns.
Enhancing Varieties With Additional Divi Modules
By combining Gravity Kinds with Divi’s wide range of modules, you may build additional engaging and interactive kind layouts. Start by positioning your Gravity Forms shortcode within a Divi Textual content or Code module.
Then, use Divi’s bordering modules—like Blurbs, Visuals, or Phone to Steps—to include context, visual cues, or incentives in the vicinity of your sort. It's also possible to stack modules to Show recommendations, FAQs, or trust badges together with your kind, building reliability and maximizing user experience.
Enrich visibility with Divi’s Divider and Spacer modules to make respiration area all around your type. If you would like highlight your form, spot it inside a Divi Boxed or Shadowed segment. Tailor made backgrounds, gradients, or animations may also help attract focus, producing your kind truly feel similar to a organic, persuasive section of one's web site design.
Conclusion
You’ve now obtained almost everything you need to seamlessly integrate Gravity Varieties into your Divi-powered Web page. By subsequent these measures, you are able to develop, customize, and Show types specifically in which you want them—no coding expected. Don’t forget to preview your page and tweak the look for the right suit. Should you run into issues, double-Verify your shortcode and distinct your caches. With a little follow, introducing interactive types to your site will come to feel like next mother nature!