For those who’re trying to seamlessly combine strong kinds into your Divi-created pages, mastering Gravity Types shortcodes is vital. You don’t want Highly developed coding competencies—just a clear approach. By adhering to a number of easy methods, you’ll control each the appearance and placement of one's types. But ahead of you can start collecting entries or customizing the look, Here are a few critical actions you’ll ought to take to start with…
Being familiar with Gravity Types and Divi Compatibility
Though Gravity Varieties and Divi are produced by diverse groups, they work seamlessly jointly to assist you to Establish tailor made types and integrate them into your Divi-driven Site.
Gravity Forms provides you with robust tools for developing anything from uncomplicated Get in touch with forms to complex, multi-website page surveys. Divi, on the other hand, helps you to design visually gorgeous internet pages with its intuitive builder.
After you rely on them together, you’re not restricted by Divi’s indigenous modules or fundamental form alternatives. Instead, you may embed any Gravity Type directly into your layouts utilizing shortcodes, supplying you with overall Management more than variety placement and styling.
This compatibility suggests it is possible to manage your web site’s cohesive glimpse whilst leveraging highly effective variety options, making certain both of those structure versatility and advanced performance.
Installing and Activating Gravity Types
Following, you’ll see a prompt to enter your Gravity Sorts license crucial. Locate this critical within your Gravity Varieties account, copy it, and paste it into the plugin’s options.
Conserve your modifications to allow computerized updates and entry all options.
With Gravity Varieties mounted and activated, you’re prepared to get started making varieties and integrating them together with your Divi designs.
Creating Your To start with Variety in Gravity Varieties
With Gravity Varieties installed and also your license important activated, you can start setting up your 1st sort. Head in your WordPress dashboard and discover “Varieties” inside the left-hand menu. Click on “New Variety,” then enter a title and outline to organize your sort effortlessly.
Now, you’ll see the drag-and-drop type builder. Incorporate fields by clicking or dragging them from the ideal panel into your sort. You can personalize Just about every discipline by clicking on it and modifying its settings, such as labels, needed standing, or placeholder textual content.
When you finally’ve added each of the fields you may need, click on “Update” or “Help save” to retail store your progress. Give your type A fast preview to ensure it seems and is effective as you'd like. You’re now Completely ready for the subsequent stage.
Finding the Gravity Forms Shortcode
Immediately after preserving your variety, you’ll will need the Gravity Kinds shortcode to embed it inside your Divi structure. To search out this shortcode, go on your WordPress dashboard and click on on “Varieties” underneath the Gravity Sorts menu. You’ll see a listing of all of your types.
Try to look for the 1 you simply made. On the correct facet of the form’s row, you’ll see a “Shortcode” column exhibiting something like [gravityform id="one"].
Duplicate this actual shortcode. In case you don’t begin to see the shortcode column, hover in excess of your variety’s title and click on “Embed.” A popup will look showing the shortcode you will need. Copy it to the clipboard.
This shortcode includes all the mandatory configurations to Screen your type wherever you need in your Divi-run internet site.
Incorporating a whole new Webpage or Post With Divi Builder
All set to insert your Gravity Type to a different web page or publish? Start by logging into your WordPress dashboard.
From the still left sidebar, simply click “Web pages” or “Posts” determined by in which you want your type.
Up coming, pick out “Increase New” to produce a fresh web page or article.
As soon as the editor hundreds, you’ll begin to see the purple “Use Divi Builder” button at the very best—click it.
Divi will launch its builder interface, providing you with options to make from scratch, choose a pre-created structure, or clone an present website page.
Decide on the choice that satisfies your requirements.
Soon after Divi masses, you’ll be able to include sections, rows, and modules to design your material.
Now, your new page or put up is ready for personalisation prior to introducing your Gravity Kinds shortcode.
Inserting Shortcodes Applying Divi’s Text Module
When you’ve setup your page or article using the Divi Builder, it’s time to place your Gravity Form specifically in which you want it.
Start out by including a completely new segment or row, then insert a Text Module with your chosen site.
Click Within the Textual content Module’s content material location, ensuring you’re within the “Textual content” (not “Visible”) tab.
Now, paste your Gravity Varieties shortcode—a little something like `[gravityform id="1" title="Bogus" description="Untrue"]`.
Preserve your alterations and exit the module editor.
Divi will process the shortcode and Screen your Gravity Variety suitable within just your format.
You are able to go or duplicate the Textual content Module as necessary to modify placement.
This simple system will give you finish Management over wherever your form seems to the website page.
Customizing Variety Look Inside of Divi
Though Gravity Sorts handles the core construction of your respective sorts, Divi provides you with powerful tools to refine their feel and look. When you finally’ve positioned your Gravity Varieties shortcode within a Divi Text module, you can use Divi’s module style configurations to improve the looks.
Adjust margins and padding for far better spacing, alter history colors, or incorporate borders and shadows to help make the shape stand out. You can also customize fonts, text measurements, and button styles by concentrating on the module or working with Divi’s built-in design and style choices.
In order for you a lot more Regulate, insert custom made CSS right throughout the module’s advanced configurations. This method permits you to match your form’s overall look to your site’s branding, making certain a cohesive and Expert presentation throughout your pages.
Changing Kind Configurations for Optimum General performance
Even though styling attracts guests’ interest, fantastic-tuning your Gravity Types settings ensures your varieties get the job done efficiently and competently within Divi. Get started by examining each form’s general options. Established clear sort titles and descriptions so end users know what to expect. Regulate confirmation and notification solutions to supply instant suggestions and keep submissions structured. Empower anti-spam functions like reCAPTCHA to cut back undesired entries without having disrupting genuine consumers.
Up coming, configure conditional logic for fields and sections, streamlining the consumer experience by only exhibiting related inquiries. Restrict the number of entries if necessary, specifically for registrations or Exclusive events.
At last, improve the shape’s efficiency by reducing the use of avoidable fields and enabling AJAX for smoother submissions. Consideration to those configurations aids your varieties load immediately and function reliably.
Troubleshooting Frequent Display Issues
In spite of mindful setup, you may discover your Gravity Types aren’t exhibiting the right way inside of Divi. Occasionally, the shape appears misaligned, or styling appears off.
Initially, Look at if you’ve positioned the Gravity Types shortcode within a Text or Code module. Utilizing the Completely wrong module could potentially cause format troubles.
Future, be sure there aren’t conflicting CSS principles from Divi or other plugins. Attempt disabling tailor made CSS quickly to discover if it resolves the problem.
If the shape isn’t displaying at all, validate the shortcode is accurate and the form is Energetic.
Apparent the two your browser and web page cache, as cached information can protect against updates from appearing.
And lastly, ensure all plugins, Gravity Forms, and Divi are up-to-date to the newest variations to prevent compatibility troubles.
Enhancing Sorts With More Divi Modules
By combining Gravity Varieties with Divi’s wide range of modules, you may produce more partaking and interactive sort layouts. Begin by putting your Gravity Forms shortcode inside a Divi Text or Code module.
Then, BloggersNeed how to use gravity forms with divi use Divi’s encompassing modules—like Blurbs, Illustrations or photos, or Connect with to Actions—to incorporate context, Visible cues, or incentives in the vicinity of your type. You can even stack modules to Show testimonies, FAQs, or belief badges together with your variety, making trustworthiness and maximizing person working experience.
Greatly enhance visibility with Divi’s Divider and Spacer modules to generate respiratory home about your form. If you need to emphasize your type, put it inside a Divi Boxed or Shadowed part. Personalized backgrounds, gradients, or animations might help attract attention, producing your variety feel just like a organic, compelling part of the webpage style and design.
Summary
You’ve now bought almost everything you should seamlessly integrate Gravity Forms into your Divi-powered Internet site. By next these steps, you may build, customise, and display kinds particularly in which you want them—no coding expected. Don’t neglect to preview your web site and tweak the look for the perfect match. In case you run into challenges, double-Look at your shortcode and very clear your caches. With a certain amount of exercise, adding interactive kinds to your website will sense like second mother nature!