Phase-by-Move Tutorial: Working with Gravity Sorts Shortcodes in Divi

In case you’re trying to seamlessly combine highly effective varieties into your Divi-built pages, mastering Gravity Kinds shortcodes is crucial. You don’t need to have Sophisticated coding capabilities—just a transparent procedure. By next a handful of easy techniques, you’ll Management both of those the appearance and placement of your respective varieties. But just before you can start collecting entries or customizing the glimpse, There are several vital actions you’ll need to acquire initially…

Knowledge Gravity Sorts and Divi Compatibility

Though Gravity Forms and Divi are created by diverse teams, they function seamlessly alongside one another to help you Create custom made types and integrate them into your Divi-run Internet site.

Gravity Varieties provides you with sturdy instruments for producing every little thing from straightforward Call varieties to elaborate, multi-site surveys. Divi, However, helps you to style visually breathtaking web pages with its intuitive builder.

If you rely on them alongside one another, you’re not limited by Divi’s native modules or essential sort possibilities. Instead, you may embed any Gravity Variety directly into your layouts making use of shortcodes, providing you with whole Command in excess of sort placement and styling.

This compatibility signifies you'll be able to sustain your internet site’s cohesive seem although leveraging potent sort attributes, making certain both equally design and style adaptability and Highly developed functionality.

Setting up and Activating Gravity Kinds

Next, you’ll see a prompt to enter your Gravity Sorts license crucial. Obtain this critical inside your Gravity Varieties account, duplicate it, and paste it to the plugin’s options.

Help you save your changes to allow computerized updates and accessibility all options.

With Gravity Sorts installed and activated, you’re ready to start making varieties and integrating them along with your Divi types.

Producing Your Very first Sort in Gravity Kinds

With Gravity Kinds set up along with your license critical activated, you can start setting up your first type. Head on your WordPress dashboard and discover “Sorts” within the left-hand menu. Click on “New Sort,” then enter a title and outline to organize your form effortlessly.

Now, you’ll begin to see the drag-and-drop kind builder. Insert fields by clicking or dragging them from the proper panel into your variety. You can customise Each and every industry by clicking on it and changing its configurations, like labels, needed standing, or placeholder textual content.

After you’ve additional all the fields you may need, simply click “Update” or “Save” to store your development. Give your type A fast preview to make certain it seems and is effective as you want. You’re now Completely ready for the following action.

Finding the Gravity Sorts Shortcode

Just after conserving your variety, you’ll want the Gravity Varieties shortcode to embed it with your Divi layout. To search out this shortcode, go in your WordPress dashboard and click on “Sorts” beneath the Gravity Forms menu. You’ll see a listing of your types.

Hunt for the one particular you merely produced. On the right facet of the form’s row, you’ll observe a “Shortcode” column displaying something like [gravityform id="one"].

Copy this specific shortcode. Should you don’t begin to see the shortcode column, hover over your sort’s title and click “Embed.” A popup will surface demonstrating the shortcode you'll need. Duplicate it to your clipboard.

This shortcode consists of all the necessary options to Display screen your kind where ever you wish within your Divi-powered web-site.

Incorporating a completely new Page or Submit With Divi Builder

Able to increase your Gravity Type to a completely new web page or write-up? Start out by logging into your WordPress dashboard.

During the left sidebar, click “Pages” or “Posts” based on where you want your sort.

Upcoming, choose “Insert New” to produce a new web page or put up.

When the editor masses, you’ll begin to see the purple “Use Divi Builder” button at the highest—click on it.

Divi will launch its builder interface, providing you with solutions to develop from scratch, opt for a pre-made structure, or clone an current web site.

Choose the option that satisfies your preferences.

Following Divi loads, you’ll be able to increase sections, rows, and modules to style and design your content material.

Now, your new webpage or article is ready for personalisation BloggersNeed embed gravity forms in divi builder ahead of incorporating your Gravity Forms shortcode.

Inserting Shortcodes Making use of Divi’s Textual content Module

After you’ve setup your webpage or submit utilizing the Divi Builder, it’s time to position your Gravity Kind just where you want it.

Start by including a brand new section or row, then insert a Textual content Module as part of your chosen place.

Click on Within the Textual content Module’s content material area, making sure you’re during the “Text” (not “Visible”) tab.

Now, paste your Gravity Kinds shortcode—some thing like `[gravityform id="1" title="Phony" description="Phony"]`.

Conserve your adjustments and exit the module editor.

Divi will method the shortcode and display your Gravity Kind suitable in your layout.

It is possible to move or duplicate the Text Module as needed to alter placement.

This straightforward strategy will give you comprehensive Management around the place your type seems on the webpage.

Customizing Type Visual appeal In Divi

Whilst Gravity Forms handles the core construction of your respective varieties, Divi provides highly effective resources to refine their feel and appear. After you’ve placed your Gravity Types shortcode within a Divi Text module, You need to use Divi’s module layout options to boost the looks.

Change margins and padding for improved spacing, change qualifications shades, or insert borders and shadows to create the shape jump out. It's also possible to customise fonts, textual content measurements, and button kinds by focusing on the module or working with Divi’s crafted-in design and style selections.

If you want all the more Command, incorporate custom made CSS straight in the module’s Highly developed configurations. This method allows you to match your sort’s visual appearance to your site’s branding, ensuring a cohesive and Expert presentation across your internet pages.

Modifying Kind Configurations for Optimal General performance

Whilst styling draws readers’ awareness, wonderful-tuning your Gravity Sorts settings ensures your types perform easily and competently in just Divi. Get started by examining each kind’s general options. Established crystal clear variety titles and descriptions so users know What to anticipate. Adjust affirmation and notification selections to offer prompt comments and preserve submissions arranged. Allow anti-spam characteristics like reCAPTCHA to cut back undesired entries with no disrupting genuine buyers.

Future, configure conditional logic for fields and sections, streamlining the user experience by only exhibiting pertinent concerns. Restrict the amount of entries if required, especially for registrations or Specific activities.

At last, enhance the shape’s performance by reducing the use of needless fields and enabling AJAX for smoother submissions. Interest to those configurations aids your types load swiftly and function reliably.

Troubleshooting Common Screen Concerns

In spite of mindful set up, you may notice your Gravity Types aren’t displaying the right way within just Divi. At times, the form seems misaligned, or styling seems off.

Very first, Test if you’ve placed the Gravity Varieties shortcode inside of a Text or Code module. Utilizing the Mistaken module might cause layout challenges.

Next, be certain there aren’t conflicting CSS guidelines from Divi or other plugins. Try out disabling custom made CSS quickly to see if it resolves the situation.

If the form isn’t demonstrating in any way, confirm the shortcode is proper and the form is active.

Clear both equally your browser and web site cache, as cached info can prevent updates from showing up.

And finally, ensure all plugins, Gravity Varieties, and Divi are up-to-date to the newest variations to prevent compatibility problems.

Improving Forms With Additional Divi Modules

By combining Gravity Forms with Divi’s big selection of modules, you could develop additional engaging and interactive sort layouts. Get started by inserting your Gravity Sorts shortcode inside of a Divi Textual content or Code module.

Then, use Divi’s encompassing modules—like Blurbs, Photographs, or Connect with to Steps—to incorporate context, visual cues, or incentives around your type. You can even stack modules to Show recommendations, FAQs, or have faith in badges together with your form, making believability and maximizing person working experience.

Greatly enhance visibility with Divi’s Divider and Spacer modules to produce respiratory space close to your sort. If you want to highlight your variety, area it inside of a Divi Boxed or Shadowed area. Customized backgrounds, gradients, or animations can help attract consideration, building your variety really feel like a all-natural, powerful section of the web site style.

Summary

You’ve now received every thing you have to seamlessly integrate Gravity Varieties into your Divi-driven website. By next these techniques, you could make, customise, and Display screen forms particularly in which you want them—no coding essential. Don’t overlook to preview your page and tweak the design for the perfect fit. In the event you operate into challenges, double-Test your shortcode and obvious your caches. With a bit of follow, introducing interactive varieties to your internet site will feel like next nature!