When you’re seeking to seamlessly integrate highly effective types into your Divi-intended web pages, mastering Gravity Forms shortcodes is critical. You don’t need advanced coding techniques—just a transparent method. By next several easy measures, you’ll Regulate both equally the appearance and placement of your respective types. But ahead of you can begin collecting entries or customizing the appear, There are several essential steps you’ll must choose initially…
Knowledge Gravity Types and Divi Compatibility
Whilst Gravity Forms and Divi are developed by various teams, they function seamlessly with each other to assist you to Create custom made sorts and combine them into your Divi-run Internet site.
Gravity Varieties will give you sturdy applications for creating almost everything from very simple Get hold of sorts to complex, multi-webpage surveys. Divi, Then again, lets you layout visually gorgeous pages with its intuitive builder.
Once you make use of them jointly, you’re not constrained by Divi’s native modules or simple sort possibilities. As a substitute, you'll be able to embed any Gravity Type instantly into your layouts using shortcodes, supplying you with complete Manage about variety placement and styling.
This compatibility means you could sustain your website’s cohesive look whilst leveraging highly effective type functions, ensuring both design versatility and Highly developed functionality.
Setting up and Activating Gravity Forms
Up coming, you’ll see a prompt to enter your Gravity Types license vital. Come across this key within your Gravity Sorts account, duplicate it, and paste it into the plugin’s configurations.
Conserve your adjustments to permit automatic updates and accessibility all features.
With Gravity Sorts installed and activated, you’re able to start off making forms and integrating them with your Divi models.
Creating Your First Variety in Gravity Kinds
With Gravity Kinds set up plus your license important activated, you can start making your very first type. Head to your WordPress dashboard and uncover “Forms” inside the left-hand menu. Click on “New Kind,” then enter a title and description to arrange your sort easily.
Now, you’ll see the drag-and-fall form builder. Increase fields by clicking or dragging them from the proper panel into your variety. You are able to customise each industry by clicking on it and changing its options, which include labels, necessary status, or placeholder textual content.
When you finally’ve additional all of the fields you'll need, click on “Update” or “Save” to retail outlet your development. Give your type a quick preview to be sure it appears to be like and functions as you need. You’re now ready for the subsequent action.
Finding the Gravity Forms Shortcode
Right after saving your form, you’ll will need the Gravity Types shortcode to embed it inside your Divi format. To locate this shortcode, go in your WordPress dashboard and click on “Forms” beneath the Gravity Forms menu. You’ll see a list of all of your types.
Hunt for the one particular you just developed. On the right aspect of the shape’s row, you’ll recognize a “Shortcode” column exhibiting some thing like [gravityform id="1"].
Duplicate this specific shortcode. In the event you don’t begin to see the shortcode column, hover over your kind’s title and click on “Embed.” A popup will show up displaying the shortcode you would like. Duplicate it to the clipboard.
This shortcode incorporates all the necessary configurations to display your variety wherever you desire in just your Divi-run internet site.
Incorporating a completely new Site or Write-up With Divi Builder
Wanting to incorporate your Gravity Variety to a brand new site or write-up? Commence by logging into your WordPress dashboard.
While in the remaining sidebar, click “Pages” or “Posts” determined by in which you want your type.
Following, pick “Add New” to make a new page or post.
After the editor hundreds, you’ll begin to see the purple “Use Divi Builder” button at the top—simply click it.
Divi will launch its builder interface, providing you with alternatives to make from scratch, select a pre-created layout, or clone an present web site.
Decide the option that suits your preferences.
Following Divi loads, you’ll have the capacity to include sections, rows, and modules to layout your information.
Now, your new page or article is ready for personalization just before including your Gravity Sorts shortcode.
Inserting Shortcodes Applying Divi’s Textual content Module
When you’ve arrange your page or write-up utilizing the Divi Builder, it’s time to put your Gravity Type exactly where you want it.
Start off by incorporating a different segment or row, then insert a Text Module in your decided on spot.
Click Within the Text Module’s articles location, ensuring that you’re in the “Text” (not “Visual”) tab.
Now, paste your Gravity Kinds shortcode—one thing like BloggersNeed divi gravity forms styling guide `[gravityform id="one" title="false" description="Phony"]`.
Help save your changes and exit the module editor.
Divi will approach the shortcode and Exhibit your Gravity Type suitable within just your format.
You may transfer or duplicate the Textual content Module as needed to alter placement.
This easy system gives you entire Command more than exactly where your sort seems around the webpage.
Customizing Form Overall look Inside of Divi
While Gravity Forms handles the core construction of the types, Divi provides impressive equipment to refine their feel and appear. When you finally’ve put your Gravity Forms shortcode inside a Divi Text module, You should utilize Divi’s module structure settings to enhance the looks.
Alter margins and padding for improved spacing, transform qualifications colors, or increase borders and shadows to help make the shape stand out. You may also customise fonts, text dimensions, and button models by targeting the module or working with Divi’s constructed-in layout choices.
If you need even more Management, include custom CSS directly inside the module’s Highly developed configurations. This approach permits you to match your sort’s look to your web site’s branding, making certain a cohesive and Skilled presentation across your webpages.
Altering Kind Configurations for Exceptional Overall performance
Even though styling attracts people’ attention, fine-tuning your Gravity Sorts options makes certain your sorts get the job done easily and proficiently inside Divi. Begin by reviewing Each individual type’s common settings. Set apparent type titles and descriptions so people know What to anticipate. Regulate confirmation and notification selections to supply immediate suggestions and keep submissions organized. Allow anti-spam functions like reCAPTCHA to cut back undesired entries devoid of disrupting authentic people.
Upcoming, configure conditional logic for fields and sections, streamlining the user encounter by only exhibiting relevant queries. Limit the quantity of entries if necessary, specifically for registrations or Specific situations.
At last, enhance the form’s general performance by reducing using unwanted fields and enabling AJAX for smoother submissions. Notice to these settings can help your varieties load speedily and function reliably.
Troubleshooting Popular Show Issues
In spite of careful set up, you may perhaps recognize your Gravity Types aren’t exhibiting the right way within Divi. Occasionally, the form appears misaligned, or styling seems to be off.
1st, Look at for those who’ve placed the Gravity Forms shortcode inside a Textual content or Code module. Using the Incorrect module may cause layout difficulties.
Upcoming, be sure there aren’t conflicting CSS regulations from Divi or other plugins. Try disabling customized CSS briefly to find out if it resolves the trouble.
If the shape isn’t demonstrating at all, confirm the shortcode is right and the form is Energetic.
Apparent each your browser and website cache, as cached data can avert updates from appearing.
And finally, ensure all plugins, Gravity Varieties, and Divi are current to the newest versions to prevent compatibility problems.
Improving Types With Supplemental Divi Modules
By combining Gravity Types with Divi’s big selection of modules, you'll be able to generate additional partaking and interactive kind layouts. Start off by inserting your Gravity Forms shortcode inside of a Divi Textual content or Code module.
Then, use Divi’s surrounding modules—like Blurbs, Pictures, or Phone to Steps—to include context, Visible cues, or incentives around your variety. You can even stack modules to Screen testimonies, FAQs, or rely on badges alongside your form, making believability and maximizing person expertise.
Greatly enhance visibility with Divi’s Divider and Spacer modules to develop respiratory home close to your sort. If you need to highlight your type, spot it inside of a Divi Boxed or Shadowed section. Customized backgrounds, gradients, or animations might help draw awareness, generating your type come to feel like a all-natural, persuasive part of your respective website page design and style.
Summary
You’ve now acquired anything you need to seamlessly combine Gravity Types into your Divi-run Internet site. By next these methods, you are able to develop, personalize, and Display screen kinds particularly in which you want them—no coding expected. Don’t ignore to preview your page and tweak the design for the perfect suit. In the event you run into troubles, double-Verify your shortcode and very clear your caches. With some observe, incorporating interactive varieties to your website will sense like second nature!