In case you’re aiming to seamlessly integrate impressive types into your Divi-created internet pages, mastering Gravity Kinds shortcodes is critical. You don’t require advanced coding abilities—just a clear approach. By adhering to several simple methods, you’ll Management the two the looks and placement of one's varieties. But ahead of you can begin collecting entries or customizing the seem, there are a few vital steps you’ll have to acquire 1st…
Being familiar with Gravity Forms and Divi Compatibility
Though Gravity Sorts and Divi are made by different teams, they operate seamlessly jointly to assist you Develop customized types and integrate them into your Divi-run Web page.
Gravity Varieties offers you strong resources for building anything from straightforward Speak to sorts to complicated, multi-web page surveys. Divi, Conversely, enables you to style and design visually gorgeous webpages with its intuitive builder.
Once you utilize them jointly, you’re not constrained by Divi’s indigenous modules or primary sort choices. As a substitute, it is possible to embed any Gravity Variety instantly into your layouts utilizing shortcodes, providing you with overall Handle above sort placement and styling.
This compatibility indicates you are able to retain your web site’s cohesive appear while leveraging highly effective form characteristics, guaranteeing both design versatility and Innovative performance.
Setting up and Activating Gravity Kinds
Up coming, you’ll see a prompt to enter your Gravity Kinds license essential. Locate this key inside your Gravity Varieties account, copy it, and paste it into your plugin’s options.
Help you save your modifications to enable automatic updates and entry all features.
With Gravity Kinds set up and activated, you’re all set to start constructing forms and integrating them together with your Divi types.
Generating Your 1st Variety in Gravity Sorts
With Gravity Varieties installed and also your license critical activated, you can begin developing your very first form. Head to the WordPress dashboard and find “Sorts” during the still left-hand menu. Simply click “New Variety,” then enter a title and description to prepare your type very easily.
Now, you’ll begin to see the drag-and-fall kind builder. Include fields by clicking or dragging them from the ideal panel into your form. You may customise Just about every field by clicking on it and changing its configurations, such as labels, essential standing, or placeholder textual content.
When you finally’ve added all of the fields you may need, click “Update” or “Help save” to store your progress. Give your sort a quick preview to make sure it seems and works as you wish. You’re now ready for the subsequent step.
Finding the Gravity Types Shortcode
After saving your variety, you’ll will need the Gravity Types shortcode to embed it inside your Divi layout. To locate this shortcode, go to your WordPress dashboard and click on on “Sorts” beneath the Gravity Forms menu. You’ll see a summary of all of your varieties.
Hunt for the one particular you simply made. On the appropriate side of the shape’s row, you’ll see a “Shortcode” column displaying a thing like [gravityform id="1"].
Duplicate this exact shortcode. In the event you don’t see the shortcode column, hover more than your variety’s title and click on “Embed.” A popup will appear demonstrating the shortcode you will need. Copy it on your clipboard.
This shortcode includes all the required options to display your kind anywhere you wish in just your Divi-run web page.
Introducing a whole new Website page or Article With Divi Builder
Willing to increase your Gravity Variety to a new page or submit? Commence by logging into your WordPress dashboard.
While in the left sidebar, simply click “Pages” or “Posts” according to where you want your type.
Subsequent, decide on “Incorporate New” to create a clean webpage or publish.
Once the editor loads, you’ll see the purple “Use Divi Builder” button at the highest—simply click it.
Divi will launch its builder interface, giving you options to construct from scratch, decide on a pre-built structure, or clone an existing web page.
Pick the choice that fits your preferences.
Following Divi loads, you’ll have the capacity to incorporate sections, rows, and modules to style your information.
Now, your new page or article is ready for personalization right before adding your Gravity Forms shortcode.
Inserting Shortcodes Working with Divi’s Textual content Module
As soon as you’ve arrange your website page or submit using the Divi Builder, it’s time to place your Gravity Type particularly where you want it.
Begin by adding a fresh segment or row, then insert a Textual content Module within your picked place.
Click on inside the Textual content Module’s content region, ensuring you’re while in the “Text” (not “Visual”) tab.
Now, paste your Gravity Varieties shortcode—something like `[gravityform id="one" title="Untrue" description="Fake"]`.
Conserve your improvements and exit the module editor.
Divi will system the shortcode and Exhibit your Gravity Variety proper within just your format.
You could transfer or copy the Textual content Module as needed to change placement.
This easy process provides full Management BloggersNeed responsive divi gravity forms layout about in which your kind appears on the website page.
Customizing Kind Appearance Within Divi
Even though Gravity Forms handles the Main construction of your respective varieties, Divi gives you potent tools to refine their appear and feel. As soon as you’ve put your Gravity Kinds shortcode inside a Divi Textual content module, You need to use Divi’s module design and style configurations to enhance the looks.
Adjust margins and padding for much better spacing, adjust history colours, or insert borders and shadows to make the form stick out. You can even customise fonts, text sizes, and button styles by concentrating on the module or using Divi’s crafted-in style options.
If you need even more Command, insert custom made CSS immediately in the module’s Highly developed settings. This solution permits you to match your variety’s visual appeal to your web site’s branding, ensuring a cohesive and Qualified presentation throughout your internet pages.
Altering Form Settings for Exceptional Performance
When styling attracts guests’ awareness, wonderful-tuning your Gravity Varieties configurations guarantees your types perform easily and effectively within Divi. Start off by examining Each individual variety’s normal options. Set distinct kind titles and descriptions so customers know what to expect. Change affirmation and notification possibilities to offer quick responses and preserve submissions arranged. Help anti-spam functions like reCAPTCHA to cut back unwelcome entries without having disrupting genuine buyers.
Future, configure conditional logic for fields and sections, streamlining the person working experience by only displaying suitable issues. Restrict the quantity of entries if needed, especially for registrations or special functions.
At last, optimize the shape’s effectiveness by minimizing using pointless fields and enabling AJAX for smoother submissions. Consideration to those settings aids your kinds load swiftly and function reliably.
Troubleshooting Widespread Show Difficulties
Even with cautious set up, you might observe your Gravity Sorts aren’t exhibiting properly inside of Divi. Occasionally, the form appears misaligned, or styling appears off.
To start with, Verify in case you’ve placed the Gravity Forms shortcode inside a Textual content or Code module. Utilizing the Incorrect module could cause format challenges.
Future, be certain there aren’t conflicting CSS rules from Divi or other plugins. Attempt disabling personalized CSS quickly to determine if it resolves the problem.
If the form isn’t displaying in the least, validate the shortcode is correct and the form is Lively.
Obvious both equally your browser and web site cache, as cached data can protect against updates from appearing.
And finally, guarantee all plugins, Gravity Varieties, and Divi are up to date to the most up-to-date versions to forestall compatibility challenges.
Enhancing Types With More Divi Modules
By combining Gravity Sorts with Divi’s big selection of modules, you may build more engaging and interactive sort layouts. Start off by inserting your Gravity Varieties shortcode inside a Divi Text or Code module.
Then, use Divi’s surrounding modules—like Blurbs, Photos, or Call to Steps—to include context, visual cues, or incentives in the vicinity of your form. You may also stack modules to display recommendations, FAQs, or believe in badges along with your kind, building trustworthiness and boosting user practical experience.
Increase visibility with Divi’s Divider and Spacer modules to make respiration home close to your type. If you would like spotlight your type, spot it inside a Divi Boxed or Shadowed segment. Tailor made backgrounds, gradients, or animations will help attract consideration, producing your type come to feel just like a all-natural, persuasive portion of one's web page structure.
Conclusion
You’ve now got almost everything you might want to seamlessly integrate Gravity Kinds into your Divi-powered Web-site. By subsequent these techniques, you are able to build, personalize, and display kinds exactly where you want them—no coding required. Don’t forget about to preview your web site and tweak the design for an ideal suit. For those who operate into issues, double-Test your shortcode and very clear your caches. With a little exercise, including interactive varieties to your web site will experience like 2nd nature!