If you’re planning to seamlessly integrate powerful kinds into your Divi-created internet pages, mastering Gravity Sorts shortcodes is crucial. You don’t will need Highly developed coding expertise—just a transparent course of action. By following a number of simple methods, you’ll Command both equally the looks and placement of your varieties. But before you can begin gathering entries or customizing the search, There are many key steps you’ll have to consider first…
Knowledge Gravity Kinds and Divi Compatibility
Despite the fact that Gravity Varieties and Divi are created by different teams, they get the job done seamlessly collectively to assist you to Make custom kinds and combine them into your Divi-run Web-site.
Gravity Varieties offers you robust equipment for developing every little thing from straightforward contact varieties to elaborate, multi-page surveys. Divi, Alternatively, allows you to style visually breathtaking pages with its intuitive builder.
After you use them alongside one another, you’re not minimal by Divi’s native modules or standard form selections. As a substitute, it is possible to embed any Gravity Type straight into your layouts using shortcodes, supplying you with whole Regulate over form placement and styling.
This compatibility indicates you are able to sustain your website’s cohesive look while leveraging effective variety characteristics, making sure both of those style versatility and State-of-the-art operation.
Setting up and Activating Gravity Kinds
Next, you’ll see a prompt to enter your Gravity Types license essential. Locate this key inside your Gravity Kinds account, duplicate it, and paste it into the plugin’s settings.
Conserve your adjustments to empower computerized updates and access all capabilities.
With Gravity Kinds set up and activated, you’re prepared to start off developing forms and integrating them using your Divi types.
Producing Your Very first Type in Gravity Kinds
With Gravity Types mounted as well as your license key activated, you can start creating your initial variety. Head towards your WordPress dashboard and uncover “Varieties” in the still left-hand menu. Click “New Form,” then enter a title and outline to prepare your type very easily.
Now, you’ll begin to see the drag-and-fall form builder. Increase fields by clicking or dragging them from the best panel into your sort. You may customise Each individual field by clicking on it and modifying its options, for instance labels, demanded standing, or placeholder text.
As soon as you’ve additional the many fields you need, click on “Update” or “Preserve” to retailer your development. Give your variety A fast preview to be sure it looks and is effective as you would like. You’re now ready for the next action.
Finding the Gravity Kinds Shortcode
Immediately after saving your form, you’ll have to have the Gravity Kinds shortcode to embed it in your Divi layout. To find this shortcode, go in your WordPress dashboard and click on “Sorts” underneath the Gravity Kinds menu. You’ll see a listing of all your forms.
Try to look for the just one you just produced. On the best side of the form’s row, you’ll recognize a “Shortcode” column displaying a thing like [gravityform id="1"].
Copy this specific shortcode. When you don’t begin to see the shortcode column, hover above your variety’s title and click on “Embed.” A popup will appear displaying the shortcode you would like. Copy it towards your clipboard.
This shortcode includes all the required configurations to Screen your type wherever you would like within just your Divi-run site.
Introducing a New Web site or Submit With Divi Builder
Prepared to add your Gravity Kind to a whole new web site or publish? Get started by logging into your WordPress dashboard.
From the remaining sidebar, click “Pages” or “Posts” determined by in which you want your form.
Next, pick out “Increase New” to create a clean website page or write-up.
As soon as the editor masses, you’ll see the purple “Use Divi Builder” button at the highest—simply click it.
Divi will start its builder interface, giving you options to make from scratch, opt for a pre-made structure, or clone an present website page.
Choose the option that fits your requirements.
Following Divi hundreds, you’ll be capable of increase sections, rows, and modules to design your information.
Now, your new web page or submit is prepared for customization just before including your Gravity Types shortcode.
Inserting Shortcodes Utilizing Divi’s Text Module
When you finally’ve setup your web site or article utilizing the Divi Builder, it’s time to position your Gravity Type specifically in which you want it.
Get started by including a completely new part or row, then insert a Textual content Module as part of your picked out location.
Simply click Within the Text Module’s articles place, ensuring you’re inside the “Textual content” (not “Visual”) tab.
Now, paste your Gravity Types shortcode—a thing like `[gravityform id="1" title="Bogus" description="Fake"]`.
Help you save your improvements and exit the module editor.
Divi will approach the shortcode and Screen your Gravity Type ideal inside your format.
You are able to move or copy the Textual content Module as needed to modify placement.
This straightforward system offers you entire Manage over in which your sort appears over the site.
Customizing Form Visual appeal Within Divi
Although Gravity Kinds handles the Main composition within your sorts, Divi gives you strong applications to refine their look and feel. When you’ve placed your Gravity Sorts shortcode within a Divi Text module, You should use Divi’s module structure options to reinforce the looks.
Adjust margins and padding for improved spacing, modify background shades, or add borders and shadows to generate the form jump out. You may also customize fonts, textual content dimensions, and button models by focusing on the module or working with Divi’s designed-in layout selections.
In order for you more Handle, incorporate personalized CSS instantly within the module’s advanced options. This strategy permits you to match your kind’s look to your web site’s branding, making certain a cohesive and professional presentation across your internet pages.
Adjusting Variety Options for Best Functionality
Whilst styling draws website visitors’ consideration, good-tuning your Gravity Forms options ensures your varieties operate efficiently and effectively within Divi. Get started by examining Every single type’s BloggersNeed design custom forms in divi with gravity forms basic configurations. Established apparent variety titles and descriptions so buyers know What to anticipate. Regulate confirmation and notification options to deliver instantaneous feed-back and keep submissions organized. Allow anti-spam options like reCAPTCHA to lessen undesired entries devoid of disrupting real users.
Future, configure conditional logic for fields and sections, streamlining the person working experience by only exhibiting relevant inquiries. Restrict the quantity of entries if necessary, specifically for registrations or Particular functions.
At last, enhance the shape’s general performance by reducing using unwanted fields and enabling AJAX for smoother submissions. Consideration to these configurations aids your sorts load rapidly and function reliably.
Troubleshooting Frequent Show Challenges
Despite careful set up, you might observe your Gravity Varieties aren’t exhibiting appropriately in just Divi. Occasionally, the shape appears misaligned, or styling appears to be like off.
First, Verify when you’ve positioned the Gravity Varieties shortcode inside a Text or Code module. Using the Improper module can cause structure difficulties.
Following, make sure there aren’t conflicting CSS principles from Divi or other plugins. Try out disabling customized CSS briefly to determine if it resolves the situation.
If the form isn’t showing at all, ensure the shortcode is proper and the form is active.
Crystal clear the two your browser and web site cache, as cached details can prevent updates from appearing.
And lastly, make certain all plugins, Gravity Forms, and Divi are up to date to the newest variations to stop compatibility troubles.
Maximizing Forms With Additional Divi Modules
By combining Gravity Sorts with Divi’s big selection of modules, you'll be able to develop extra participating and interactive kind layouts. Commence by inserting your Gravity Forms shortcode inside of a Divi Textual content or Code module.
Then, use Divi’s surrounding modules—like Blurbs, Visuals, or Simply call to Steps—to incorporate context, Visible cues, or incentives around your variety. It's also possible to stack modules to display recommendations, FAQs, or trust badges along with your type, constructing believability and improving consumer experience.
Improve visibility with Divi’s Divider and Spacer modules to build respiratory place around your kind. If you wish to highlight your type, put it within a Divi Boxed or Shadowed section. Custom backgrounds, gradients, or animations will help draw awareness, building your variety come to feel just like a all-natural, powerful component of your website page layout.
Conclusion
You’ve now bought all the things you have to seamlessly combine Gravity Types into your Divi-driven Internet site. By next these steps, you'll be able to generate, customise, and Show varieties specifically in which you want them—no coding demanded. Don’t forget about to preview your page and tweak the design for the proper healthy. In case you operate into troubles, double-Test your shortcode and very clear your caches. With a little bit of follow, adding interactive sorts to your website will experience like 2nd mother nature!