Should you’re wanting to seamlessly integrate impressive varieties into your Divi-designed internet pages, mastering Gravity Sorts shortcodes is crucial. You don’t will need Innovative coding techniques—just a transparent system. By following several simple actions, you’ll Handle equally the looks and placement of one's forms. But ahead of you can begin accumulating entries or customizing the seem, Here are a few key actions you’ll really need to take initially…
Comprehension Gravity Varieties and Divi Compatibility
Even though Gravity Kinds and Divi are designed by diverse teams, they get the job done seamlessly jointly to help you Make custom sorts and integrate them into your Divi-powered Web site.
Gravity Types will give you strong resources for generating every little thing from uncomplicated Speak to types to intricate, multi-web site surveys. Divi, on the other hand, lets you style visually amazing webpages with its intuitive builder.
After you use them collectively, you’re not restricted by Divi’s native modules or simple form selections. Rather, you are able to embed any Gravity Variety right into your layouts using shortcodes, supplying you with complete Manage around variety placement and styling.
This compatibility implies you are able to keep your internet site’s cohesive glance though leveraging powerful type characteristics, making certain equally design adaptability and Innovative operation.
Putting in and Activating Gravity Forms
Up coming, you’ll see a prompt to enter your Gravity Forms license vital. Discover this essential in your Gravity Sorts account, duplicate it, and paste it in to the plugin’s configurations.
Conserve your changes to empower computerized updates and access all capabilities.
With Gravity Sorts mounted and activated, you’re prepared to start building forms and integrating them with the Divi designs.
Making Your 1st Form in Gravity Varieties
With Gravity Types mounted and also your license key activated, you can start building your initially kind. Head in your WordPress dashboard and discover “Varieties” in the still left-hand menu. Simply click “New Variety,” then enter a title and outline to arrange your sort easily.
Now, you’ll begin to see the drag-and-fall type builder. Increase fields by clicking or dragging them from the ideal panel into your variety. You can personalize Every single subject by clicking on it and adjusting its options, including labels, necessary position, or placeholder textual content.
After you’ve included all of the fields you'll need, simply click “Update” or “Preserve” to retail outlet your development. Give your form A fast preview to be certain it seems to be and operates as you want. You’re now Completely ready for the next move.
Locating the Gravity Varieties Shortcode
Right after saving your form, you’ll need the Gravity Sorts shortcode to embed it as part of your Divi structure. To discover this shortcode, go in your WordPress dashboard and click on “Forms” under the Gravity Sorts menu. You’ll see a listing of all of your varieties.
Hunt for the one you just designed. On the best aspect of the shape’s row, you’ll see a “Shortcode” column displaying a little something like [gravityform id="1"].
Copy this exact shortcode. Should you don’t begin to see the shortcode column, hover in excess of your form’s title and click “Embed.” A popup will surface demonstrating the shortcode you may need. Copy it to the clipboard.
This shortcode consists of all the required settings to Exhibit your kind wherever you desire within just your Divi-driven web page.
Incorporating a New Web page or Put up With Divi Builder
Able to increase your Gravity Kind to a brand new webpage or write-up? Commence by logging into your WordPress dashboard.
In the still left sidebar, simply click “Internet pages” or “Posts” based on in which you want your form.
Next, select “Increase New” to make a fresh new webpage or article.
When the editor hundreds, you’ll begin to see the purple “Use Divi Builder” button at the very best—simply click it.
Divi will start its builder interface, giving you selections to construct from scratch, select a pre-made format, or clone an existing website page.
Pick the choice that fits your requirements.
Soon after Divi loads, you’ll be able to increase sections, rows, and modules to layout your articles.
Now, your new webpage or submit is ready for personalization right before incorporating your Gravity Sorts shortcode.
Inserting Shortcodes Applying Divi’s Text Module
When you finally’ve set up your web page or write-up using the Divi Builder, it’s time to put your Gravity Kind particularly where you want it.
Start by incorporating a brand new segment or row, then insert a Text Module with your decided on place.
Click inside the Textual content Module’s content region, making certain you’re from the “Textual content” (not “Visible”) tab.
Now, paste your Gravity Sorts shortcode—a thing like `[gravityform id="1" title="Untrue" description="Bogus"]`.
Preserve your modifications and exit the module editor.
Divi will course of BloggersNeed divi gravity forms styling guide action the shortcode and Screen your Gravity Type right within your structure.
You are able to move or replicate the Text Module as needed to adjust placement.
This straightforward process will give you finish Manage about in which your variety appears around the website page.
Customizing Form Visual appearance In just Divi
Whilst Gravity Forms handles the Main framework within your forms, Divi offers you strong equipment to refine their feel and look. Once you’ve positioned your Gravity Forms shortcode within a Divi Text module, You should use Divi’s module style and design options to reinforce the looks.
Regulate margins and padding for greater spacing, adjust history colors, or add borders and shadows for making the shape stick out. You may also customize fonts, text dimensions, and button models by focusing on the module or making use of Divi’s constructed-in design solutions.
In order for you a lot more Handle, insert tailor made CSS directly throughout the module’s Superior configurations. This solution permits you to match your variety’s overall look to your internet site’s branding, guaranteeing a cohesive and professional presentation throughout your internet pages.
Changing Sort Configurations for Exceptional Performance
While styling attracts site visitors’ notice, fantastic-tuning your Gravity Types options ensures your types function effortlessly and successfully in just Divi. Start off by reviewing Each and every form’s typical options. Established very clear form titles and descriptions so buyers know What to anticipate. Change affirmation and notification options to deliver fast feedback and maintain submissions structured. Help anti-spam options like reCAPTCHA to lower unwelcome entries without having disrupting real end users.
Up coming, configure conditional logic for fields and sections, streamlining the person experience by only exhibiting suitable questions. Limit the amount of entries if required, specifically for registrations or Particular gatherings.
Lastly, improve the form’s performance by reducing using unneeded fields and enabling AJAX for smoother submissions. Focus to these configurations helps your kinds load rapidly and function reliably.
Troubleshooting Typical Exhibit Difficulties
In spite of thorough setup, you could see your Gravity Sorts aren’t displaying properly in just Divi. Sometimes, the shape appears misaligned, or styling appears to be like off.
First, Verify in the event you’ve placed the Gravity Forms shortcode inside of a Textual content or Code module. Using the Incorrect module could cause format difficulties.
Future, be sure there aren’t conflicting CSS rules from Divi or other plugins. Consider disabling tailor made CSS temporarily to discover if it resolves the issue.
If the shape isn’t exhibiting at all, verify the shortcode is accurate and the form is Energetic.
Crystal clear each your browser and site cache, as cached details can prevent updates from showing up.
Finally, make certain all plugins, Gravity Varieties, and Divi are current to the most up-to-date variations to prevent compatibility troubles.
Boosting Kinds With Further Divi Modules
By combining Gravity Kinds with Divi’s wide range of modules, you may develop much more partaking and interactive sort layouts. Get started by placing your Gravity Kinds shortcode within a Divi Textual content or Code module.
Then, use Divi’s bordering modules—like Blurbs, Visuals, or Call to Steps—to add context, visual cues, or incentives in close proximity to your type. You can also stack modules to display testimonies, FAQs, or belief badges alongside your sort, developing believability and enhancing consumer encounter.
Greatly enhance visibility with Divi’s Divider and Spacer modules to make breathing space about your type. If you'd like to spotlight your type, put it inside of a Divi Boxed or Shadowed part. Custom made backgrounds, gradients, or animations can help attract attention, building your kind truly feel similar to a purely natural, powerful part of your respective web page design and style.
Conclusion
You’ve now acquired everything you'll want to seamlessly integrate Gravity Forms into your Divi-powered Web-site. By pursuing these techniques, you'll be able to make, customise, and Screen types just where you want them—no coding demanded. Don’t forget about to preview your web page and tweak the look for the proper in shape. When you operate into problems, double-Verify your shortcode and distinct your caches. With a certain amount of apply, incorporating interactive kinds to your internet site will come to feel like second character!