In the event you’re wanting to seamlessly combine powerful forms into your Divi-designed pages, mastering Gravity Varieties shortcodes is important. You don’t need to have advanced coding skills—just a transparent system. By pursuing a handful of clear-cut actions, you’ll Command equally the looks and placement of your respective varieties. But in advance of you can start accumulating entries or customizing the seem, Here are a few critical steps you’ll need to get initially…
Being familiar with Gravity Varieties and Divi Compatibility
Even though Gravity Kinds and Divi are developed by distinctive teams, they get the job done seamlessly with each other to help you Create tailor made types and integrate them into your Divi-powered Web page.
Gravity Types provides strong resources for producing all the things from simple Get in touch with kinds to elaborate, multi-site surveys. Divi, Then again, enables you to design and style visually breathtaking pages with its intuitive builder.
If you utilize them jointly, you’re not limited by Divi’s indigenous modules or basic form possibilities. As a substitute, you may embed any Gravity Variety instantly into your layouts employing shortcodes, supplying you with complete Manage about kind placement and styling.
This compatibility means it is possible to maintain your site’s cohesive appear although leveraging impressive type functions, guaranteeing equally style overall flexibility and advanced performance.
Putting in and Activating Gravity Sorts
Next, you’ll see a prompt to enter your Gravity Varieties license crucial. Obtain this critical inside your Gravity Kinds account, duplicate it, and paste it in the plugin’s options.
Help you save your alterations to help computerized updates and accessibility all characteristics.
With Gravity Types put in and activated, you’re all set to commence developing varieties and integrating them using your Divi models.
Generating Your To start with Type in Gravity Varieties
With Gravity Forms installed and your license essential activated, you can start creating your to start with type. Head for your WordPress dashboard and uncover “Kinds” within the still left-hand menu. Click on “New Kind,” then enter a title and description to organize your sort simply.
Now, you’ll see the drag-and-drop type builder. Increase fields by clicking or dragging them from the right panel into your form. You could personalize Every subject by clicking on it and adjusting its options, including labels, needed position, or placeholder text.
Once you’ve added every one of the fields you may need, click on “Update” or “Help save” to keep your progress. Give your kind A fast preview to ensure it appears to be and works as you want. You’re now ready for the next step.
Locating the Gravity Types Shortcode
Immediately after conserving your form, you’ll have to have the Gravity Forms shortcode to embed it inside your Divi structure. To uncover this shortcode, go to the WordPress dashboard and click on on “Sorts” beneath the Gravity Varieties menu. You’ll see a listing of all of your types.
Try to find the one you only developed. On the best aspect of the shape’s row, you’ll observe a “Shortcode” column displaying a thing like [gravityform id="one"].
Copy this correct shortcode. For those who don’t see the shortcode column, hover in excess of your form’s title and click on “Embed.” A popup will appear exhibiting the shortcode you will need. Duplicate it in your clipboard.
This shortcode consists of all the required settings to Display screen your form where ever you want within your Divi-run site.
Including a New Site or Article With Divi Builder
Wanting to incorporate your Gravity Variety to a new web page or write-up? Start off by logging into your WordPress dashboard.
In the still left sidebar, simply click “Web pages” or “Posts” based on where you want your type.
Up coming, pick “Add New” to create a fresh new page or write-up.
When the editor loads, you’ll see the purple “Use Divi Builder” button at the top—click it.
Divi will launch its builder interface, providing you with possibilities to develop from scratch, select a pre-manufactured layout, or clone an present webpage.
Decide on the choice that suits your preferences.
After Divi loads, you’ll manage to increase sections, rows, and modules to style your content material.
Now, your new site or write-up is prepared for customization in advance of introducing your Gravity Sorts shortcode.
Inserting Shortcodes Employing Divi’s Text Module
When you’ve put in place your web site or write-up using the Divi Builder, it’s time to place your Gravity Variety just in which you want it.
Start off by introducing a whole new area or row, then insert a Textual content Module with your picked location.
Click In the Textual content Module’s written content region, making certain you’re from the “Text” (not “Visual”) tab.
Now, paste your Gravity Types shortcode—anything like `[gravityform id="1" title="Wrong" description="Untrue"]`.
Help you save your modifications and exit the BloggersNeed divi gravity forms compatibility tips module editor.
Divi will procedure the shortcode and Exhibit your Gravity Variety appropriate within just your structure.
You could move or copy the Text Module as needed to adjust placement.
This straightforward method offers you complete Command around where your form appears around the website page.
Customizing Sort Appearance Within Divi
Though Gravity Varieties handles the core framework within your sorts, Divi will give you highly effective tools to refine their feel and appear. Once you’ve put your Gravity Sorts shortcode within a Divi Text module, You may use Divi’s module layout configurations to boost the looks.
Modify margins and padding for better spacing, change track record hues, or increase borders and shadows to help make the form get noticed. You can also customize fonts, text dimensions, and button variations by focusing on the module or making use of Divi’s built-in style possibilities.
If you would like a lot more Management, add custom made CSS right throughout the module’s State-of-the-art settings. This approach enables you to match your kind’s physical appearance to your website’s branding, ensuring a cohesive and Skilled presentation across your web pages.
Altering Kind Settings for Ideal Performance
Although styling attracts people’ notice, fantastic-tuning your Gravity Forms settings makes sure your types do the job smoothly and competently in just Divi. Start by examining Every single sort’s normal settings. Set distinct sort titles and descriptions so consumers know what to expect. Adjust confirmation and notification selections to provide prompt feed-back and continue to keep submissions arranged. Allow anti-spam attributes like reCAPTCHA to reduce undesirable entries devoid of disrupting authentic end users.
Next, configure conditional logic for fields and sections, streamlining the person encounter by only exhibiting related inquiries. Limit the volume of entries if essential, specifically for registrations or Unique gatherings.
Finally, enhance the shape’s effectiveness by minimizing using pointless fields and enabling AJAX for smoother submissions. Focus to those settings can help your kinds load swiftly and performance reliably.
Troubleshooting Widespread Exhibit Concerns
In spite of watchful setup, you would possibly notice your Gravity Types aren’t exhibiting accurately in Divi. Sometimes, the form seems misaligned, or styling seems to be off.
1st, Examine when you’ve put the Gravity Types shortcode within a Textual content or Code module. Utilizing the Completely wrong module can cause format challenges.
Upcoming, make sure there aren’t conflicting CSS procedures from Divi or other plugins. Attempt disabling personalized CSS briefly to discover if it resolves the problem.
If the shape isn’t showing in any respect, ensure the shortcode is accurate and the shape is active.
Distinct the two your browser and internet site cache, as cached knowledge can stop updates from showing up.
Lastly, ensure all plugins, Gravity Kinds, and Divi are up-to-date to the newest variations to circumvent compatibility difficulties.
Boosting Types With Extra Divi Modules
By combining Gravity Forms with Divi’s wide selection of modules, it is possible to build more partaking and interactive form layouts. Start out by placing your Gravity Varieties shortcode within a Divi Text or Code module.
Then, use Divi’s encompassing modules—like Blurbs, Photos, or Contact to Steps—to add context, Visible cues, or incentives around your variety. It's also possible to stack modules to Show testimonies, FAQs, or rely on badges together with your form, building trustworthiness and boosting user encounter.
Greatly enhance visibility with Divi’s Divider and Spacer modules to generate breathing place around your variety. In order to highlight your form, area it inside of a Divi Boxed or Shadowed segment. Custom made backgrounds, gradients, or animations might help attract focus, building your form experience like a normal, persuasive element of the site layout.
Summary
You’ve now bought anything you have to seamlessly combine Gravity Kinds into your Divi-powered Internet site. By adhering to these ways, you can make, customize, and display forms just where you want them—no coding required. Don’t forget about to preview your web site and tweak the design for an ideal in good shape. In the event you run into troubles, double-check your shortcode and crystal clear your caches. With a little bit of follow, incorporating interactive types to your website will feel like 2nd nature!