In the event you’re aiming to seamlessly combine strong varieties into your Divi-created pages, mastering Gravity Varieties shortcodes is vital. You don’t will need Innovative coding techniques—just a clear method. By following some clear-cut methods, you’ll Management both of those the looks and placement of your types. But before you can begin amassing entries or customizing the glance, there are a few important steps you’ll need to take initial…
Knowing Gravity Kinds and Divi Compatibility
Though Gravity Kinds and Divi are created by distinct teams, they operate seamlessly jointly that can assist you build custom made kinds and integrate them into your Divi-powered website.
Gravity Types will give you sturdy tools for producing every little thing from straightforward Make contact with types to complicated, multi-site surveys. Divi, on the other hand, lets you design visually amazing web pages with its intuitive builder.
Once you make use of them with each other, you’re not constrained by Divi’s indigenous modules or basic form solutions. As a substitute, you could embed any Gravity Sort directly into your layouts utilizing shortcodes, giving you full Regulate over variety placement and styling.
This compatibility usually means you could sustain your site’s cohesive glimpse though leveraging potent type capabilities, making certain each layout overall flexibility and Sophisticated operation.
Installing and Activating Gravity Varieties
Subsequent, you’ll see a prompt to enter your Gravity Types license key. Come across this key in your Gravity Kinds account, duplicate it, and paste it into the plugin’s options.
Help save your improvements to allow computerized updates and obtain all attributes.
With Gravity Kinds mounted and activated, you’re wanting to start out making types and integrating them with your Divi styles.
Producing Your 1st Type in Gravity Sorts
With Gravity Varieties put in along with your license crucial activated, you can begin setting up your initial type. Head towards your WordPress dashboard and obtain “Sorts” from the left-hand menu. Simply click “New Type,” then enter a title and description to organize your kind quickly.
Now, you’ll see the drag-and-drop form builder. Insert fields by clicking or dragging them from the right panel into your kind. You may customize Each individual industry by clicking on it and adjusting its configurations, including labels, required status, or placeholder text.
When you’ve additional every one of the fields you require, click on “Update” or “Help you save” to retail outlet your development. Give your sort A fast preview to make certain it appears to be and functions as you need. You’re now Completely ready for the next move.
Finding the Gravity Varieties Shortcode
Right after preserving your form, you’ll need the Gravity Varieties shortcode to embed it as part of your Divi structure. To uncover this shortcode, go to your WordPress dashboard and click on “Varieties” underneath the Gravity Forms menu. You’ll see a list of all your kinds.
Search for the 1 you just made. On the correct facet of the form’s row, you’ll observe a “Shortcode” column displaying something like [gravityform id="one"].
Copy this actual shortcode. When you don’t see the shortcode column, hover more than your variety’s title and click “Embed.” A popup will surface demonstrating the shortcode you'll need. Copy it to your clipboard.
This shortcode has all the required configurations to Display screen your form anywhere you desire in your Divi-driven web-site.
Adding a fresh Page or Write-up With Divi Builder
Willing to incorporate your Gravity Sort to a different web page or publish? Start by logging into your WordPress dashboard.
While in the left sidebar, simply click “Pages” or “Posts” based on in which you want your type.
Following, pick “Incorporate New” to create a fresh new web page or publish.
Once the editor hundreds, you’ll begin to see the purple “Use Divi Builder” button at the best—click it.
Divi will launch its builder interface, giving you selections to create from scratch, opt for a pre-built structure, or clone an current website page.
Select the option that suits your preferences.
Just after Divi hundreds, you’ll be capable to insert sections, rows, and modules to layout your articles.
Now, your new site or put up is ready for personalisation ahead of incorporating your Gravity Sorts shortcode.
Inserting Shortcodes Applying Divi’s Textual content Module
When you finally’ve setup your website page or submit utilizing the Divi Builder, it’s time to position your Gravity Kind just in which you want it.
Commence by including a brand new segment or row, then insert a Text Module in the chosen site.
Simply click Within the Textual content Module’s information location, ensuring you’re inside the “Text” (not “Visual”) tab.
Now, paste your Gravity Varieties shortcode—anything like `[gravityform id="1" title="Fake" description="Fake"]`.
Help save your alterations and exit the module editor.
Divi will approach the shortcode and display your Gravity Type right inside of your layout.
You'll be able to go or replicate the Textual content Module as required to change placement.
This easy strategy will give you total control more than where your sort appears on the website page.
Customizing Sort Physical appearance In just Divi
Even though Gravity Kinds handles the Main construction of your kinds, Divi provides highly effective applications to refine their appear and feel. As you’ve positioned your Gravity Forms shortcode inside a Divi Textual content module, You should use Divi’s module structure configurations to improve the appearance.
Modify margins and padding for superior spacing, modify background colours, or incorporate borders and shadows to produce the shape stick out. You can also personalize fonts, text measurements, and button styles by focusing on the module or working with Divi’s designed-in style possibilities.
If you want more Manage, increase custom made CSS instantly within the module’s Sophisticated settings. This strategy allows you to match your form’s overall look to your web site’s branding, making certain a cohesive and Expert presentation throughout your web pages.
Modifying Variety Settings for Exceptional Overall performance
Even though styling attracts site visitors’ attention, great-tuning your Gravity Sorts configurations guarantees your sorts perform efficiently and effectively within Divi. Start by reviewing Each individual type’s typical options. Established distinct form titles and descriptions so customers know what to expect. Modify confirmation and notification alternatives to supply prompt responses and keep submissions organized. Allow anti-spam functions like reCAPTCHA to lower unwelcome entries without having disrupting authentic users.
Future, configure conditional logic for fields and sections, streamlining the user experience by only exhibiting pertinent queries. Restrict the volume of entries if desired, specifically for registrations or Distinctive events.
Last but not least, optimize the form’s overall performance by minimizing the use of avoidable fields and enabling AJAX for smoother submissions. Awareness to those configurations assists your types load promptly and performance reliably.
Troubleshooting Widespread Display screen Problems
Despite having thorough set up, you may perhaps notice your Gravity Varieties aren’t exhibiting correctly in just Divi. From time to time, the shape seems misaligned, or styling appears to be off.
Very first, check in case you’ve positioned the Gravity Forms shortcode inside a Text or Code module. Utilizing the Incorrect module can result in structure problems.
Future, be sure there aren’t conflicting CSS guidelines from Divi or other plugins. Try disabling personalized CSS quickly to view if it resolves the problem.
If the form isn’t demonstrating whatsoever, ensure the shortcode is accurate and the form is Energetic.
Obvious both equally your browser and web-site cache, as cached info can avert updates from appearing.
And lastly, assure all plugins, Gravity Sorts, and Divi are up to date to the most up-to-date versions to avoid compatibility concerns.
Boosting Forms With Further Divi Modules
By combining Gravity Varieties with Divi’s big selection of modules, you are able to build much more engaging and interactive form layouts. Begin by positioning your Gravity Sorts shortcode inside a Divi Text or Code module.
Then, use Divi’s surrounding modules—like Blurbs, Visuals, or Get in touch with to Steps—to include context, visual cues, or incentives around your form. You can even stack modules to Screen testimonials, FAQs, or belief badges alongside your sort, creating trustworthiness and boosting person practical experience.
Greatly enhance visibility with Divi’s Divider and Spacer modules to develop respiratory home all around your type. If you'd like to spotlight your kind, position it within a Divi Boxed or Shadowed portion. Customized backgrounds, gradients, or animations can help draw notice, earning your sort experience similar to a purely natural, powerful portion of your webpage style and design.
Summary
You’ve now got every thing you should seamlessly combine Gravity Sorts into your Divi-powered Web best divi gravity forms site. By following these ways, you'll be able to develop, customize, and Show types exactly where you want them—no coding necessary. Don’t forget about to preview your website page and tweak the design for the ideal in shape. When you operate into problems, double-Examine your shortcode and distinct your caches. With a little bit of practice, including interactive kinds to your internet site will truly feel like next character!