In case you’re wanting to seamlessly integrate powerful varieties into your Divi-made webpages, mastering Gravity Kinds shortcodes is important. You don’t will need advanced coding abilities—just a transparent approach. By following a couple of simple ways, you’ll Management both equally the appearance and placement of your forms. But in advance of you can start collecting entries or customizing the appear, Here are a few vital steps you’ll should consider very first…
Comprehending Gravity Kinds and Divi Compatibility
Despite the fact that Gravity Types and Divi are formulated by unique teams, they operate seamlessly alongside one another that may help you Make customized forms and combine them into your Divi-run Web site.
Gravity Varieties gives you strong applications for developing every little thing from very simple Speak to varieties to sophisticated, multi-site surveys. Divi, Alternatively, helps you to layout visually gorgeous pages with its intuitive builder.
Whenever you utilize them collectively, you’re not restricted by Divi’s indigenous modules or simple kind options. Alternatively, you are able to embed any Gravity Form right into your layouts utilizing shortcodes, supplying you with total control over type placement and styling.
This compatibility usually means it is possible to preserve your web site’s cohesive look whilst leveraging potent sort characteristics, making sure both of those design and style adaptability and Sophisticated functionality.
Installing and Activating Gravity Kinds
Next, you’ll see a prompt to enter your Gravity Varieties license vital. Come across this crucial within your Gravity Forms account, copy it, and paste it to the plugin’s settings.
Save your improvements to enable automated updates and entry all attributes.
With Gravity Kinds installed and activated, you’re willing to start out making sorts and integrating them using your Divi types.
Making Your 1st Type in Gravity Types
With Gravity Forms installed as well as your license important activated, you can begin developing your initial form. Head in your WordPress dashboard and locate “Types” within the remaining-hand menu. Simply click “New Variety,” then enter a title and description to organize your type easily.
Now, you’ll see the drag-and-fall kind builder. Increase fields by clicking or dragging them from the ideal panel into your kind. It is possible to customize Just about every industry by clicking on it and adjusting its settings, including labels, expected standing, or placeholder text.
When you’ve extra the many fields you require, click on “Update” or “Save” to shop your development. Give your sort a quick preview to verify it appears and is effective as you need. You’re now All set for the subsequent action.
Finding the Gravity Kinds Shortcode
Just after preserving your form, you’ll will need the Gravity Forms shortcode to embed it with your Divi format. To find this shortcode, go to your WordPress dashboard and click on on “Types” under the Gravity Forms menu. You’ll see an index of all of your types.
Search for the 1 you only designed. On the best facet of the form’s row, you’ll discover a “Shortcode” column exhibiting a little something like [gravityform id="one"].
Copy this exact shortcode. In the event you don’t see the shortcode column, hover in excess of your form’s title and click “Embed.” A popup will look showing the shortcode you'll need. Duplicate it to the clipboard.
This shortcode has all the necessary options to Display screen your sort anywhere you'd like within your Divi-powered site.
Introducing a different Web page or Post With Divi Builder
Wanting to increase your Gravity Form to a different website page or write-up? Start out by logging into your WordPress dashboard.
Inside the remaining sidebar, simply click “Pages” or “Posts” based upon where you want your variety.
Upcoming, choose “Insert New” to produce a contemporary page or post.
When the editor loads, you’ll see the purple “Use Divi Builder” button at the highest—click it.
Divi will start its builder interface, supplying you with possibilities to develop from scratch, go with a pre-built layout, or clone an present page.
Decide the option that satisfies your requirements.
Following Divi masses, you’ll have the capacity to add sections, rows, and modules to design your articles.
Now, your new site or publish is prepared for personalisation ahead of including your Gravity Sorts shortcode.
Inserting Shortcodes Using Divi’s Text Module
Once you’ve set up your web site or article using the Divi Builder, it’s time to position your Gravity Variety precisely in which you want it.
Begin by incorporating a completely new portion or row, then insert a Textual content BloggersNeed design custom forms in divi with gravity forms Module as part of your decided on site.
Simply click Within the Textual content Module’s content material place, ensuring you’re during the “Textual content” (not “Visual”) tab.
Now, paste your Gravity Sorts shortcode—some thing like `[gravityform id="1" title="Bogus" description="Phony"]`.
Help save your modifications and exit the module editor.
Divi will method the shortcode and Exhibit your Gravity Sort correct within just your layout.
You can shift or copy the Textual content Module as necessary to change placement.
This easy technique provides you with full Handle above exactly where your variety seems within the page.
Customizing Form Physical appearance In Divi
Though Gravity Kinds handles the core structure of the varieties, Divi provides you with effective instruments to refine their feel and look. When you’ve put your Gravity Forms shortcode inside of a Divi Text module, you can use Divi’s module design and style options to improve the appearance.
Regulate margins and padding for much better spacing, improve history hues, or increase borders and shadows to make the shape get noticed. You may as well personalize fonts, textual content measurements, and button models by concentrating on the module or applying Divi’s developed-in style and design possibilities.
In order for you all the more Command, insert custom CSS specifically in the module’s advanced configurations. This technique helps you to match your type’s appearance to your web site’s branding, guaranteeing a cohesive and Qualified presentation throughout your web pages.
Modifying Type Configurations for Exceptional Efficiency
Although styling draws readers’ consideration, great-tuning your Gravity Kinds settings makes certain your types do the job smoothly and proficiently inside Divi. Start off by reviewing Each individual sort’s normal options. Set distinct variety titles and descriptions so people know what to expect. Regulate confirmation and notification choices to supply immediate opinions and continue to keep submissions arranged. Enable anti-spam characteristics like reCAPTCHA to reduce unwelcome entries with out disrupting genuine users.
Following, configure conditional logic for fields and sections, streamlining the person practical experience by only displaying pertinent queries. Limit the number of entries if needed, especially for registrations or Exclusive functions.
Eventually, optimize the shape’s effectiveness by minimizing the usage of unwanted fields and enabling AJAX for smoother submissions. Attention to these configurations aids your forms load quickly and function reliably.
Troubleshooting Widespread Display screen Concerns
Despite watchful setup, you might recognize your Gravity Types aren’t exhibiting correctly in Divi. At times, the form appears misaligned, or styling appears off.
1st, Check out when you’ve positioned the Gravity Types shortcode inside a Textual content or Code module. Utilizing the wrong module might cause structure issues.
Following, make certain there aren’t conflicting CSS principles from Divi or other plugins. Try disabling custom CSS temporarily to see if it resolves the trouble.
If the shape isn’t demonstrating whatsoever, confirm the shortcode is accurate and the form is Lively.
Distinct both of those your browser and web page cache, as cached info can stop updates from appearing.
Last of all, ensure all plugins, Gravity Sorts, and Divi are current to the newest variations to prevent compatibility problems.
Maximizing Varieties With Added Divi Modules
By combining Gravity Varieties with Divi’s wide selection of modules, it is possible to produce far more engaging and interactive type layouts. Begin by putting your Gravity Types shortcode inside a Divi Textual content or Code module.
Then, use Divi’s bordering modules—like Blurbs, Photos, or Call to Steps—to include context, Visible cues, or incentives close to your form. You may as well stack modules to Exhibit recommendations, FAQs, or believe in badges alongside your variety, setting up credibility and maximizing user expertise.
Greatly enhance visibility with Divi’s Divider and Spacer modules to produce respiration space close to your type. If you want to highlight your form, area it inside a Divi Boxed or Shadowed area. Custom backgrounds, gradients, or animations might help draw interest, making your form truly feel like a pure, powerful component of one's web page style and design.
Conclusion
You’ve now received every thing you should seamlessly combine Gravity Forms into your Divi-powered Web-site. By following these methods, you may create, customize, and Exhibit kinds just where you want them—no coding required. Don’t ignore to preview your web page and tweak the look for the ideal fit. For those who operate into challenges, double-check your shortcode and crystal clear your caches. With a little practice, adding interactive types to your website will experience like 2nd nature!