When you’re aiming to seamlessly integrate impressive kinds into your Divi-made web pages, mastering Gravity Varieties shortcodes is important. You don’t need to have Superior coding capabilities—just a clear course of action. By subsequent a number of uncomplicated measures, you’ll Handle both the appearance and placement of one's sorts. But ahead of you can begin amassing entries or customizing the glance, There are several important actions you’ll should get first…
Being familiar with Gravity Kinds and Divi Compatibility
Though Gravity Forms and Divi are formulated by diverse groups, they perform seamlessly jointly that can assist you build custom made types and integrate them into your Divi-run Web-site.
Gravity Types provides you with strong instruments for making all the things from straightforward Get in touch with types to complex, multi-webpage surveys. Divi, However, allows you to design and style visually stunning webpages with its intuitive builder.
Once you use them collectively, you’re not confined by Divi’s indigenous modules or basic type alternatives. In its place, you'll be able to embed any Gravity Sort specifically into your layouts using shortcodes, giving you overall control more than type placement and styling.
This compatibility means you can maintain your site’s cohesive glimpse while leveraging strong type attributes, ensuring the two style and design adaptability and Superior operation.
Installing and Activating Gravity Kinds
Future, you’ll see a prompt to enter your Gravity Types license vital. Obtain this key in the Gravity Varieties account, copy it, and paste it into the plugin’s configurations.
Help you save your adjustments to help computerized updates and accessibility all features.
With Gravity Sorts put in and activated, you’re able to get started constructing forms and integrating them together with your Divi patterns.
Developing Your 1st Variety in Gravity Kinds
With Gravity Types put in and also your license key activated, you can begin setting up your to start with form. Head in your WordPress dashboard and find “Forms” inside the remaining-hand menu. Click “New Kind,” then enter a title and outline to organize your form quickly.
Now, you’ll begin to see the drag-and-drop form builder. Add fields by clicking or dragging them from the correct panel into your kind. You'll be able to personalize Each individual field by clicking on it and changing its settings, for instance labels, demanded status, or placeholder textual content.
As soon as you’ve added each of the fields you'll need, click “Update” or “Help save” to store your development. Give your variety A fast preview to make sure it appears and functions as you wish. You’re now Completely ready for the subsequent action.
Locating the Gravity Varieties Shortcode
Following conserving your kind, you’ll need to have the Gravity Sorts shortcode to embed it inside your Divi format. To uncover this shortcode, go to your WordPress dashboard and click on on “Varieties” underneath the Gravity Forms menu. You’ll see a listing of your sorts.
Look for the one you simply developed. On the correct side of the form’s row, you’ll notice a “Shortcode” column exhibiting one thing like [gravityform id="1"].
Duplicate this precise shortcode. For those who don’t begin to see the shortcode column, hover in excess of your form’s title and click on “Embed.” A popup will show up showing the shortcode you will need. Copy it towards your clipboard.
This shortcode is made up of all the mandatory settings to Screen your sort anywhere you want in your Divi-run site.
Incorporating a completely new Webpage or Post With Divi Builder
All set to insert your Gravity Form to a different web page or publish? Start by logging into your WordPress dashboard.
Inside the left sidebar, click on “Internet pages” or “Posts” determined by where you want your sort.
Up coming, decide on “Insert New” to make a refreshing page or write-up.
As soon as the editor masses, you’ll begin to see the purple “Use Divi Builder” button at the best—click it.
Divi will start its builder interface, providing you with alternatives to develop from scratch, opt for a pre-manufactured structure, or clone an present page.
Choose the choice that satisfies your requirements.
After Divi hundreds, you’ll be capable to insert sections, rows, and modules to design your information.
Now, your new page or publish is ready for customization ahead of incorporating your Gravity Types shortcode.
Inserting Shortcodes Using Divi’s Textual content Module
After you’ve set up your web site or article using the Divi Builder, it’s time to place your Gravity Variety exactly where you want it.
Start by including a whole new part or row, then insert a Text Module inside your picked area.
Simply click Within the Text Module’s material area, making certain you’re while in the “Textual content” (not “Visual”) tab.
Now, paste your Gravity Forms shortcode—a thing like `[gravityform id="1" title="Untrue" description="Wrong"]`.
Save your variations and exit the module editor.
Divi will procedure the shortcode and display your Gravity Sort suitable within your structure.
You'll be able to transfer or copy the Text Module as required to adjust placement.
This simple process gives you full Command around the place your form appears to the web page.
Customizing Form Overall look Within Divi
Even though Gravity Forms handles the Main structure within your sorts, Divi offers you powerful instruments to refine their look and feel. As soon as you’ve put your Gravity Forms shortcode within a Divi Textual content module, You can utilize Divi’s module style configurations to enhance the appearance.
Regulate margins and padding for improved spacing, change qualifications hues, or include borders and shadows to make the shape stick out. You can also customize fonts, textual content sizes, and button kinds by concentrating on the module or making use of Divi’s developed-in style and design possibilities.
If you'd like far more Manage, add custom CSS directly inside the module’s State-of-the-art options. This approach helps you to match your form’s look to your web site’s branding, ensuring a cohesive and Expert presentation across your internet pages.
Changing Variety Options for Ideal Efficiency
Although styling attracts site visitors’ interest, fine-tuning your Gravity Types options ensures your forms get the job done efficiently and efficiently within just Divi. Commence by reviewing Every single type’s general configurations. Established clear sort titles and descriptions so customers know what to expect. Alter affirmation and notification alternatives to supply immediate suggestions and continue to keep submissions structured. Allow anti-spam characteristics like reCAPTCHA to reduce undesired entries devoid of disrupting real end users.
Future, configure conditional logic for fields and sections, streamlining the person knowledge by only exhibiting BloggersNeed embed gravity forms in divi builder appropriate queries. Limit the volume of entries if needed, especially for registrations or Unique events.
Eventually, improve the form’s functionality by reducing the usage of unneeded fields and enabling AJAX for smoother submissions. Attention to these options will help your sorts load swiftly and performance reliably.
Troubleshooting Popular Screen Difficulties
In spite of careful set up, you would possibly see your Gravity Types aren’t exhibiting accurately in just Divi. Often, the form seems misaligned, or styling appears to be like off.
Very first, Check out if you’ve positioned the Gravity Kinds shortcode within a Textual content or Code module. Using the Incorrect module can cause structure difficulties.
Following, make certain there aren’t conflicting CSS rules from Divi or other plugins. Test disabling custom made CSS briefly to see if it resolves the challenge.
If the form isn’t displaying in the least, validate the shortcode is appropriate and the form is active.
Distinct both of those your browser and site cache, as cached data can reduce updates from showing.
And finally, assure all plugins, Gravity Varieties, and Divi are updated to the most recent versions to stop compatibility concerns.
Enhancing Varieties With Extra Divi Modules
By combining Gravity Types with Divi’s big selection of modules, it is possible to create more participating and interactive variety layouts. Start off by inserting your Gravity Varieties shortcode within a Divi Text or Code module.
Then, use Divi’s bordering modules—like Blurbs, Pictures, or Simply call to Steps—to incorporate context, Visible cues, or incentives close to your type. You can also stack modules to Display screen testimonies, FAQs, or believe in badges together with your variety, setting up reliability and enhancing person experience.
Enhance visibility with Divi’s Divider and Spacer modules to make respiration space close to your sort. If you'd like to highlight your kind, position it within a Divi Boxed or Shadowed section. Customized backgrounds, gradients, or animations can help attract interest, making your variety really feel just like a normal, compelling portion of your web page style and design.
Conclusion
You’ve now received everything you should seamlessly combine Gravity Varieties into your Divi-run Site. By following these actions, you may make, customise, and Show kinds particularly in which you want them—no coding necessary. Don’t forget about to preview your web page and tweak the look for the best in shape. When you run into troubles, double-Look at your shortcode and crystal clear your caches. With a little observe, incorporating interactive forms to your web site will truly feel like next nature!