For those who’re looking to seamlessly integrate highly effective kinds into your Divi-created webpages, mastering Gravity Types shortcodes is crucial. You don’t need to have Highly developed coding capabilities—just a clear procedure. By pursuing a handful of straightforward steps, you’ll Command equally the appearance and placement of one's sorts. But before you can start accumulating entries or customizing the appear, There are several key actions you’ll should get to start with…
Being familiar with Gravity Forms and Divi Compatibility
Despite the fact that Gravity Kinds and Divi are developed by distinct groups, they do the job seamlessly together to help you Construct tailor made types and combine them into your Divi-powered Web-site.
Gravity Varieties provides strong resources for generating everything from basic Get hold of varieties to complex, multi-website page surveys. Divi, Then again, enables you to design visually gorgeous internet pages with its intuitive builder.
After you utilize them jointly, you’re not limited by Divi’s indigenous modules or simple type alternatives. Rather, you'll be able to embed any Gravity Type right into your layouts utilizing shortcodes, providing you with total Command around variety placement and styling.
This compatibility suggests you could preserve your internet site’s cohesive glance though leveraging impressive form features, ensuring the two style versatility and Innovative operation.
Putting in and Activating Gravity Varieties
Following, you’ll see a prompt to enter your Gravity Sorts license essential. Locate this critical in the Gravity Kinds account, copy it, and paste it to the plugin’s settings.
Help you save your modifications to allow computerized updates and access all attributes.
With Gravity Sorts installed and activated, you’re prepared to begin building varieties and integrating them using your Divi models.
Developing Your First Variety in Gravity Types
With Gravity Forms installed and your license crucial activated, you can start setting up your 1st kind. Head to the WordPress dashboard and locate “Varieties” while in the still left-hand menu. Simply click “New Variety,” then enter a title and outline to organize your variety very easily.
Now, you’ll begin to see the drag-and-drop sort builder. Increase fields by clicking or dragging them from the ideal panel into your variety. You'll be able to customize Just about every industry by clicking on it and modifying its configurations, including labels, expected status, or placeholder textual content.
When you’ve included the many fields you need, click “Update” or “Help you save” to retail store your progress. Give your sort a quick preview to make certain it appears to be and performs as you would like. You’re now Completely ready for the next step.
Locating the Gravity Types Shortcode
Right after saving your sort, you’ll have to have the Gravity Types shortcode to embed it as part of your Divi layout. To find this shortcode, go to the WordPress dashboard and click on “Kinds” beneath the Gravity Kinds menu. You’ll see a list of all your forms.
Hunt for the a single you only designed. On the appropriate aspect of the shape’s row, you’ll recognize a “Shortcode” column exhibiting some thing like [gravityform id="1"].
Copy this exact shortcode. When you don’t see the shortcode column, hover in excess of your variety’s title and click on “Embed.” A popup will seem demonstrating the shortcode you would like. Duplicate it for your clipboard.
This shortcode incorporates all the necessary settings to display your type where ever you would like in just your Divi-powered website.
Including a brand new Website page or Publish With Divi Builder
Wanting to insert your Gravity Sort to a fresh site or article? Commence by logging into your WordPress dashboard.
In the still left sidebar, click “Webpages” or “Posts” determined by where you want your kind.
Next, choose “Increase New” to produce a contemporary webpage or publish.
When the editor masses, you’ll begin to see the purple “Use Divi Builder” button at the top—click on it.
Divi will launch its builder interface, giving you solutions to create from scratch, go with a pre-created structure, or clone an present site.
Select the choice that suits your needs.
Soon after Divi hundreds, you’ll be capable of increase sections, rows, and modules to design your material.
Now, your new page or put up is ready for personalization ahead of adding your Gravity Types shortcode.
Inserting Shortcodes Applying Divi’s Textual content Module
Once you’ve build your web page or write-up using the Divi Builder, it’s time to place your Gravity Form accurately where you want it.
Start off by including a brand new portion or row, then insert a Textual content Module within your selected spot.
Simply click inside the Text Module’s content material space, ensuring you’re inside the “Textual content” (not “Visible”) tab.
Now, paste your Gravity Forms shortcode—some thing like `[gravityform id="one" title="Wrong" description="Wrong"]`.
Save your variations and exit the module editor.
Divi will system the shortcode and Screen your Gravity Sort ideal in your format.
You are able to move or replicate the Text Module as needed to alter placement.
This simple method gives you finish Manage more than wherever your sort appears on the website page.
Customizing Kind Physical appearance Inside Divi
Although Gravity Sorts handles the core composition within your sorts, Divi provides potent instruments to refine their feel and appear. When you finally’ve positioned your Gravity Forms shortcode inside of a Divi Textual content module, You should use Divi’s module design options to reinforce the looks.
Change margins and padding for better spacing, modify background colors, or increase borders and shadows to generate the shape stick out. You can even personalize fonts, text sizes, and button models by concentrating on the module or utilizing Divi’s built-in design and style selections.
If you prefer more control, include customized CSS straight within the module’s State-of-the-art configurations. This method allows you to match your variety’s look to your internet site’s branding, making sure a cohesive and Qualified presentation across your pages.
Changing Kind Settings for Ideal General performance
Though styling draws guests’ consideration, fine-tuning your Gravity Forms options assures your types work efficiently and competently inside of Divi. Start out by examining Each individual form’s general options. Set crystal clear sort titles and descriptions so end users know What to anticipate. Alter affirmation and notification possibilities to supply quick feed-back and keep submissions organized. Permit anti-spam features like reCAPTCHA to scale back undesired entries without having disrupting authentic people.
Upcoming, configure conditional logic for fields and sections, streamlining the person working experience by only exhibiting relevant queries. Limit the amount of entries if desired, specifically for registrations or Unique events.
Eventually, optimize the form’s general performance by minimizing the use of needless fields and enabling AJAX for smoother submissions. Awareness to these configurations can help your varieties load immediately and performance reliably.
Troubleshooting Prevalent Display Problems
Despite having watchful setup, you may perhaps discover your Gravity Sorts aren’t exhibiting correctly inside Divi. Sometimes, the shape seems misaligned, or styling seems off.
1st, Verify should you’ve placed the Gravity Varieties shortcode within a Textual content or Code module. Utilizing the Mistaken module might cause layout difficulties.
Upcoming, ensure there aren’t conflicting CSS guidelines from Divi or other plugins. Consider disabling customized CSS briefly to view if it resolves the issue.
If the form isn’t demonstrating in any respect, validate the shortcode is right and the shape is active.
Very clear both your browser and internet site cache, as cached information can avert updates from showing up.
Lastly, assure all plugins, Gravity Sorts, and Divi are updated to the most up-to-date variations to prevent compatibility difficulties.
Enhancing Varieties With Added Divi Modules
By combining Gravity Kinds with Divi’s big selection of modules, it is possible to develop more engaging and interactive sort layouts. Get started by positioning your Gravity Varieties shortcode inside of a Divi Text or Code module.
Then, use Divi’s bordering modules—like Blurbs, Images, or Simply call to Steps—to include context, Visible cues, or incentives near your form. You can even stack modules to Screen testimonials, FAQs, or believe in badges alongside your sort, setting up trustworthiness and maximizing consumer working experience.
Increase visibility with Divi’s Divider and Spacer modules BloggersNeed embed gravity forms in divi builder to generate respiration home about your kind. If you wish to spotlight your kind, put it inside of a Divi Boxed or Shadowed segment. Personalized backgrounds, gradients, or animations may also help attract interest, creating your type feel like a normal, persuasive aspect of the site layout.
Conclusion
You’ve now got every thing you have to seamlessly combine Gravity Sorts into your Divi-run Web-site. By pursuing these techniques, it is possible to develop, customize, and Show sorts precisely in which you want them—no coding needed. Don’t fail to remember to preview your web page and tweak the design for the best fit. In the event you run into troubles, double-Test your shortcode and crystal clear your caches. With some follow, including interactive forms to your web site will come to feel like 2nd nature!