Step-by-Phase Guideline: Employing Gravity Types Shortcodes in Divi

In the event you’re looking to seamlessly integrate impressive sorts into your Divi-intended webpages, mastering Gravity Kinds shortcodes is important. You don’t need to have Innovative coding skills—just a clear approach. By pursuing a couple of clear-cut techniques, you’ll Regulate both of those the looks and placement of your respective kinds. But ahead of you can begin amassing entries or customizing the glimpse, There are several key steps you’ll ought to just take very first…

Comprehending Gravity Sorts and Divi Compatibility

While Gravity Varieties and Divi are produced by unique groups, they function seamlessly alongside one another to assist you to Create tailor made varieties and combine them into your Divi-powered Site.

Gravity Sorts gives you strong tools for creating everything from very simple Get in touch with types to sophisticated, multi-website page surveys. Divi, However, permits you to structure visually beautiful pages with its intuitive builder.

If you make use of them collectively, you’re not restricted by Divi’s native modules or fundamental type alternatives. Instead, you could embed any Gravity Form directly into your layouts employing shortcodes, supplying you with total Management more than sort placement and styling.

This compatibility usually means it is possible to manage your website’s cohesive glance whilst leveraging powerful variety options, making certain both equally design and style overall flexibility and Innovative functionality.

Setting up and Activating Gravity Kinds

Following, you’ll see a prompt to enter your Gravity Varieties license key. Obtain this vital in the Gravity Forms account, copy it, and paste it in the plugin’s options.

Help save your improvements to empower automated updates and entry all features.

With Gravity Kinds mounted and activated, you’re ready to start out constructing kinds and integrating them with your Divi layouts.

Generating Your First Form in Gravity Forms

With Gravity Sorts mounted plus your license important activated, you can start constructing your initially form. Head on your WordPress dashboard and locate “Kinds” inside the remaining-hand menu. Click on “New Kind,” then enter a title and outline to arrange your variety easily.

Now, you’ll begin to see the drag-and-drop sort builder. Incorporate fields by clicking or dragging them from the correct panel into your kind. It is possible to customise Just about every field by clicking on it and adjusting its configurations, like labels, necessary position, or placeholder textual content.

When you finally’ve added many of the fields you require, click “Update” or “Help you save” to store your development. Give your variety A fast preview to make certain it seems and will work as you desire. You’re now Prepared for the following action.

Finding the Gravity Varieties Shortcode

Immediately after preserving your form, you’ll want the Gravity Forms shortcode to embed it inside your Divi layout. To search out this shortcode, go to your WordPress dashboard and click on “Types” beneath the Gravity Sorts menu. You’ll see a list of your forms.

Search for the a single you merely created. On the best side of the shape’s row, you’ll recognize a “Shortcode” column displaying one thing like [gravityform id="1"].

Duplicate this specific shortcode. In the event you don’t begin to see the shortcode column, hover over your type’s title and click on “Embed.” A popup will appear showing the shortcode you will need. Duplicate it on your clipboard.

This shortcode has all the necessary settings to Display screen your type wherever you wish within your Divi-driven site.

Introducing a New Web site or Publish With Divi Builder

All set to include your Gravity Sort to a new website page or submit? Start by logging into your WordPress dashboard.

In the left sidebar, simply click “Internet pages” or “Posts” dependant upon where you want your variety.

Upcoming, pick “Increase New” to make a fresh web site or publish.

As soon BloggersNeed divi gravity forms styling guide as the editor masses, you’ll begin to see the purple “Use Divi Builder” button at the top—click it.

Divi will launch its builder interface, giving you possibilities to construct from scratch, pick a pre-made structure, or clone an present web site.

Select the option that fits your preferences.

Immediately after Divi masses, you’ll manage to add sections, rows, and modules to style and design your material.

Now, your new web page or write-up is prepared for personalisation prior to introducing your Gravity Forms shortcode.

Inserting Shortcodes Employing Divi’s Textual content Module

When you’ve set up your page or post utilizing the Divi Builder, it’s time to place your Gravity Variety precisely where you want it.

Get started by introducing a fresh section or row, then insert a Textual content Module in your picked location.

Click In the Text Module’s articles region, making certain you’re within the “Textual content” (not “Visual”) tab.

Now, paste your Gravity Forms shortcode—a thing like `[gravityform id="1" title="Wrong" description="Wrong"]`.

Preserve your alterations and exit the module editor.

Divi will course of action the shortcode and Display screen your Gravity Type right inside of your format.

You may shift or duplicate the Text Module as required to adjust placement.

This straightforward technique will give you entire Handle above in which your kind seems around the website page.

Customizing Type Look In just Divi

Whilst Gravity Forms handles the Main framework of your kinds, Divi provides potent tools to refine their feel and look. As you’ve positioned your Gravity Kinds shortcode inside a Divi Textual content module, You should utilize Divi’s module style options to reinforce the looks.

Regulate margins and padding for far better spacing, change track record hues, or increase borders and shadows for making the form stand out. You can also customise fonts, textual content sizes, and button variations by targeting the module or making use of Divi’s constructed-in design and style possibilities.

If you'd like much more Manage, add custom made CSS directly in the module’s advanced configurations. This technique helps you to match your variety’s visual appeal to your internet site’s branding, guaranteeing a cohesive and professional presentation throughout your internet pages.

Adjusting Form Options for Optimal General performance

Whilst styling draws website visitors’ interest, fantastic-tuning your Gravity Sorts options makes certain your sorts operate smoothly and effectively within just Divi. Get started by reviewing Each individual type’s common configurations. Set apparent variety titles and descriptions so end users know what to expect. Regulate confirmation and notification choices to supply instantaneous responses and maintain submissions structured. Empower anti-spam features like reCAPTCHA to lower unwanted entries with no disrupting real buyers.

Following, configure conditional logic for fields and sections, streamlining the user knowledge by only exhibiting pertinent questions. Limit the number of entries if needed, specifically for registrations or special events.

At last, improve the shape’s overall performance by minimizing the usage of unneeded fields and enabling AJAX for smoother submissions. Attention to those settings assists your forms load speedily and performance reliably.

Troubleshooting Prevalent Screen Problems

Despite very careful setup, you may detect your Gravity Kinds aren’t exhibiting properly in Divi. At times, the shape seems misaligned, or styling appears to be off.

Initially, Test in case you’ve positioned the Gravity Types shortcode inside of a Textual content or Code module. Utilizing the Erroneous module can result in format concerns.

Following, be sure there aren’t conflicting CSS policies from Divi or other plugins. Check out disabling tailor made CSS quickly to find out if it resolves the situation.

If the form isn’t demonstrating in the least, affirm the shortcode is suitable and the shape is Energetic.

Apparent both your browser and site cache, as cached information can stop updates from appearing.

Lastly, be certain all plugins, Gravity Forms, and Divi are updated to the latest versions to avoid compatibility troubles.

Improving Varieties With Additional Divi Modules

By combining Gravity Varieties with Divi’s wide range of modules, you are able to generate extra participating and interactive form layouts. Start out by putting your Gravity Sorts shortcode inside of a Divi Text or Code module.

Then, use Divi’s surrounding modules—like Blurbs, Images, or Get in touch with to Steps—to incorporate context, Visible cues, or incentives close to your type. You can also stack modules to Show recommendations, FAQs, or have confidence in badges along with your variety, setting up believability and boosting person working experience.

Boost visibility with Divi’s Divider and Spacer modules to build respiration room all over your type. If you would like emphasize your form, location it inside of a Divi Boxed or Shadowed section. Custom backgrounds, gradients, or animations can help draw consideration, creating your sort experience just like a normal, persuasive element of one's site layout.

Summary

You’ve now obtained every little thing you must seamlessly combine Gravity Kinds into your Divi-powered Web-site. By next these actions, you could create, personalize, and Show kinds exactly where you want them—no coding essential. Don’t forget about to preview your site and tweak the look for the right suit. In case you run into difficulties, double-Look at your shortcode and apparent your caches. With a little follow, including interactive varieties to your web site will feel like 2nd character!