Should you’re seeking to seamlessly combine potent sorts into your Divi-created internet pages, mastering Gravity Kinds shortcodes is critical. You don’t want Superior coding skills—just a clear system. By adhering to some simple ways, you’ll control the two the looks and placement of the forms. But ahead of you can begin gathering entries or customizing the glimpse, There are some essential actions you’ll really need to choose very first…
Comprehension Gravity Types and Divi Compatibility
Despite the fact that Gravity Kinds and Divi are produced by various teams, they work seamlessly alongside one another to assist you to Establish customized sorts and integrate them into your Divi-run Web-site.
Gravity Kinds gives you robust instruments for developing every little thing from very simple Get hold of types to complex, multi-webpage surveys. Divi, Conversely, helps you to structure visually gorgeous web pages with its intuitive builder.
Once you use them with each other, you’re not restricted by Divi’s indigenous modules or essential type choices. Alternatively, you can embed any Gravity Kind right into your layouts using shortcodes, giving you whole Manage around kind placement and styling.
This compatibility indicates you may sustain your web site’s cohesive appear whilst leveraging highly effective variety features, making certain both equally style versatility and State-of-the-art functionality.
Installing and Activating Gravity Sorts
Following, you’ll see a prompt to enter your Gravity Varieties license crucial. Uncover this vital in the Gravity Kinds account, copy it, and paste it in the plugin’s settings.
Help you save your improvements to enable automated updates and access all options.
With Gravity Kinds mounted and activated, you’re prepared to get started creating kinds and integrating them together with your Divi types.
Generating Your Very first Sort in Gravity Kinds
With Gravity Types mounted plus your license essential activated, you can begin making your 1st kind. Head in your WordPress dashboard and obtain “Sorts” while in the remaining-hand menu. Simply click “New Form,” then enter a title and description to organize your variety quickly.
Now, you’ll see the drag-and-drop variety builder. Add fields by clicking or dragging them from the appropriate panel into your sort. You are able to customize Every area by clicking on it and changing its configurations, like labels, expected position, or placeholder textual content.
When you finally’ve extra every one of the fields you'll need, click on “Update” or “Help you save” to store your progress. Give your kind a quick preview to ensure it appears to be like and functions as you wish. You’re now ready for the subsequent action.
Finding the Gravity Varieties Shortcode
Immediately after conserving your sort, you’ll want the Gravity Varieties shortcode to embed it within your Divi format. To discover this shortcode, go in your WordPress dashboard and click on on “Kinds” under the Gravity Kinds menu. You’ll see a listing of your types.
Try to look for the a person you only made. On the correct aspect of the form’s row, you’ll observe a “Shortcode” column exhibiting a thing like [gravityform id="one"].
Duplicate this actual shortcode. When you don’t see the shortcode column, hover around your kind’s title and click “Embed.” A popup will show up displaying the shortcode you would like. Copy it to the clipboard.
This shortcode includes all the mandatory configurations to Display screen your variety anywhere you desire within just your Divi-driven web page.
Incorporating a different Web page or Article With Divi Builder
Able to incorporate your Gravity Type to a fresh site or article? Start by logging into your WordPress dashboard.
Inside the remaining sidebar, click on “Pages” or “Posts” determined by in which you want your variety.
Next, pick “Include New” to produce a contemporary web site or submit.
When the editor loads, you’ll begin to see the purple “Use Divi Builder” button at the top—click it.
Divi will start its builder interface, providing you with solutions to develop from scratch, decide on a pre-produced structure, or clone an existing site.
Choose the option that fits your preferences.
Soon after Divi loads, you’ll have the capacity to include sections, rows, and modules to layout your content.
Now, your new web site or submit is prepared for personalisation in advance of incorporating your Gravity Varieties shortcode.
Inserting Shortcodes Using Divi’s Text Module
When you’ve set up your website page or submit using the Divi Builder, it’s time to position your Gravity Kind just where you want it.
Get started by incorporating a whole new area or row, then insert a Textual content Module inside your picked out locale.
Click on inside the Text Module’s written content place, ensuring that you’re while in the “Text” (not “Visible”) tab.
Now, paste your Gravity Forms shortcode—something like `[gravityform id="1" title="Bogus" description="Bogus"]`.
Save your alterations and exit the module editor.
Divi will procedure the shortcode and Screen your Gravity Variety ideal inside your layout.
You are able to shift or replicate the Text Module as required to regulate placement.
This easy strategy gives you finish Management above in which your form seems over the page.
Customizing Kind Overall look In just Divi
Even though Gravity Types handles the core construction of one's forms, Divi offers you highly effective resources to refine their look and feel. As you’ve placed your Gravity Varieties shortcode within a Divi Textual content module, You may use Divi’s module design configurations to enhance the appearance.
Change margins and padding for far better spacing, modify qualifications colours, or include borders and shadows to help make the shape stand out. You can even personalize fonts, text sizes, and button designs by targeting the module or making use of Divi’s designed-in style and design alternatives.
If you want far more Handle, incorporate custom CSS specifically in the module’s advanced options. This tactic permits you to match your form’s visual appearance to your web site’s branding, guaranteeing a cohesive and Skilled presentation across your webpages.
Changing Sort Settings for Best Performance
Whilst styling draws readers’ attention, good-tuning your Gravity Types configurations guarantees your types do the job smoothly and efficiently within Divi. Get started by examining Each and every variety’s typical configurations. Set very clear form titles and descriptions so end users know What to anticipate. Modify affirmation and notification options to deliver prompt comments and maintain submissions BloggersNeed responsive divi gravity forms layout structured. Help anti-spam functions like reCAPTCHA to lower undesirable entries devoid of disrupting legitimate consumers.
Subsequent, configure conditional logic for fields and sections, streamlining the user working experience by only exhibiting pertinent concerns. Restrict the volume of entries if needed, especially for registrations or Exclusive functions.
Lastly, optimize the form’s efficiency by minimizing using pointless fields and enabling AJAX for smoother submissions. Focus to these settings assists your kinds load swiftly and function reliably.
Troubleshooting Typical Display screen Difficulties
Even with careful set up, you may see your Gravity Varieties aren’t exhibiting correctly in just Divi. In some cases, the form appears misaligned, or styling seems off.
1st, Look at should you’ve put the Gravity Sorts shortcode within a Textual content or Code module. Utilizing the Incorrect module could cause format problems.
Up coming, be certain there aren’t conflicting CSS rules from Divi or other plugins. Try disabling custom made CSS quickly to find out if it resolves the problem.
If the shape isn’t showing in any respect, verify the shortcode is proper and the form is Energetic.
Very clear both your browser and web site cache, as cached data can avoid updates from appearing.
And finally, make certain all plugins, Gravity Forms, and Divi are up-to-date to the newest versions to avoid compatibility concerns.
Boosting Sorts With Further Divi Modules
By combining Gravity Forms with Divi’s wide selection of modules, you are able to develop additional participating and interactive type layouts. Commence by positioning your Gravity Varieties shortcode inside of a Divi Text or Code module.
Then, use Divi’s encompassing modules—like Blurbs, Illustrations or photos, or Call to Steps—to add context, visual cues, or incentives in close proximity to your type. It's also possible to stack modules to Display screen testimonies, FAQs, or rely on badges alongside your variety, building credibility and maximizing consumer expertise.
Greatly enhance visibility with Divi’s Divider and Spacer modules to create respiration home all over your variety. If you want to emphasize your form, area it inside of a Divi Boxed or Shadowed section. Personalized backgrounds, gradients, or animations will help draw awareness, producing your type sense similar to a all-natural, compelling component of your respective web page style and design.
Summary
You’ve now acquired all the things you need to seamlessly combine Gravity Types into your Divi-driven Web site. By subsequent these steps, you could make, personalize, and Show kinds precisely in which you want them—no coding essential. Don’t neglect to preview your site and tweak the look for the perfect fit. If you run into problems, double-Check out your shortcode and very clear your caches. With a certain amount of exercise, introducing interactive kinds to your web site will feel like second mother nature!