If you’re trying to seamlessly integrate effective sorts into your Divi-made webpages, mastering Gravity Varieties shortcodes is vital. You don’t will need Sophisticated coding skills—just a clear course of action. By following several simple methods, you’ll Manage equally the appearance and placement of one's forms. But before you can start gathering entries or customizing the seem, There are some key actions you’ll really need to get to start with…
Comprehension Gravity Varieties and Divi Compatibility
Whilst Gravity Forms and Divi are developed by different groups, they do the job seamlessly together to help you Develop customized types and combine them into your Divi-run website.
Gravity Varieties offers you sturdy applications for building all the things from uncomplicated Get hold of kinds to complicated, multi-webpage surveys. Divi, However, helps you to design and style visually stunning webpages with its intuitive builder.
After you use them with each other, you’re not minimal by Divi’s native modules or basic sort selections. Rather, it is possible to embed any Gravity Type immediately into your layouts employing shortcodes, giving you whole control in excess of variety placement and styling.
This compatibility signifies you can sustain your site’s cohesive seem even though leveraging strong variety options, guaranteeing both structure versatility and Superior features.
Putting in and Activating Gravity Varieties
Up coming, you’ll see a prompt to enter your Gravity Kinds license important. Find this vital with your Gravity Forms account, copy it, and paste it in to the plugin’s options.
Help save your variations to permit automatic updates and accessibility all capabilities.
With Gravity Kinds set up and activated, you’re able to start out creating types and integrating them together with your Divi types.
Making Your Initially Kind in Gravity Types
With Gravity Types mounted along with your license vital activated, you can start setting up your 1st sort. Head in your WordPress dashboard and discover “Kinds” from the still left-hand menu. Click on “New Kind,” then enter a title and description to prepare your kind very easily.
Now, you’ll begin to see the drag-and-fall kind builder. Incorporate fields by clicking or dragging them from the best panel into your kind. It is possible to personalize Every single discipline by clicking on it and altering its settings, for example labels, necessary standing, or placeholder text.
Once you’ve included all the fields you require, click “Update” or “Help you save” to shop your development. Give your variety a quick preview to make certain it appears to be and is effective as you want. You’re now Prepared for the subsequent step.
Locating the Gravity Types Shortcode
Immediately after preserving your variety, you’ll want the Gravity Sorts shortcode to embed it with your Divi layout. To seek out this shortcode, go for your WordPress dashboard and click on “Forms” beneath the Gravity Forms menu. You’ll see an index of your varieties.
Look for the just one you merely produced. On the best side of the shape’s row, you’ll discover a “Shortcode” column exhibiting anything like [gravityform id="one"].
Copy this specific shortcode. In the event you don’t begin to see the shortcode column, hover in excess of your form’s title and click “Embed.” A popup will show up exhibiting the shortcode you may need. Duplicate it for your clipboard.
This shortcode is made up of all the mandatory configurations to Screen your type anywhere you want within just your Divi-driven web site.
Introducing a New Site or Submit With Divi Builder
Willing to insert your Gravity Sort to a new site or publish? Commence by logging into your WordPress dashboard.
While in the still left sidebar, click “Internet pages” or “Posts” determined by in which you want your form.
Future, select “Add New” to produce a contemporary web site or put up.
When the editor masses, you’ll see the purple “Use Divi Builder” button at the very best—click it.
Divi will start its builder interface, supplying you with options to construct from scratch, opt for a pre-built format, or clone an existing web page.
Decide the option that satisfies your needs.
Following Divi hundreds, you’ll be able to include sections, rows, and modules to design your written content.
Now, your new web page or put up is ready for personalisation prior to adding your Gravity Forms shortcode.
Inserting Shortcodes Applying Divi’s Textual content Module
As you’ve create your site or submit utilizing the Divi Builder, it’s time to place your Gravity Form exactly where you want it.
Begin by including a brand new area or row, then insert a Textual content Module inside your selected spot.
Click on inside the Textual content Module’s information space, ensuring you’re from the “Textual content” (not “Visible”) tab.
Now, paste your Gravity Sorts shortcode—a thing like `[gravityform id="one" title="Untrue" description="Wrong"]`.
Conserve your modifications and exit the module editor.
Divi will approach the shortcode and Exhibit your Gravity Sort right within just your structure.
You could shift or replicate the Textual content Module as required to change placement.
This straightforward strategy offers you entire Handle above the place your form seems to the webpage.
Customizing Sort Look In Divi
Whilst Gravity Kinds handles the core composition within your forms, Divi gives you impressive tools to refine their appear and feel. After you’ve put your Gravity Varieties shortcode within a Divi Textual content module, You should use Divi’s module layout settings to improve the looks.
Alter margins and padding for superior spacing, alter background colours, or incorporate borders and shadows to help make the shape stick out. It's also possible to customize fonts, textual content sizes, and button styles by targeting the module or working with Divi’s crafted-in design and style options.
If you need a lot more Manage, insert custom made CSS instantly in the module’s Highly developed settings. This strategy allows you to match your kind’s overall look to your site’s branding, ensuring a cohesive and Qualified presentation throughout your webpages.
Changing Variety Settings for Optimum Functionality
While styling attracts guests’ consideration, great-tuning your Gravity Kinds options makes sure your forms perform efficiently and effectively within Divi. Start out by reviewing Every single kind’s common settings. Set clear sort titles and descriptions so end users know What to anticipate. Adjust confirmation and notification choices to offer fast opinions and keep submissions organized. Enable anti-spam features like reCAPTCHA to lower undesirable entries with out disrupting genuine consumers.
Upcoming, configure conditional logic for fields and sections, streamlining the consumer working experience by only exhibiting related issues. Limit the number of entries if wanted, especially for registrations or Exclusive situations.
Eventually, enhance the shape’s efficiency by minimizing the usage of needless fields and enabling AJAX for smoother submissions. Awareness to those options helps your sorts load immediately and function reliably.
Troubleshooting Common Show Issues
In spite of mindful set up, you could detect your Gravity Sorts aren’t displaying accurately in just Divi. At times, the shape seems misaligned, or styling appears off.
Initial, Verify in case you’ve put the Gravity Types shortcode inside a Text or Code module. Using the Mistaken module may cause structure concerns.
Future, be sure there aren’t conflicting CSS principles from Divi or other plugins. Attempt disabling customized CSS temporarily to discover if it resolves the problem.
If the shape isn’t displaying in the slightest degree, verify the shortcode is correct and the form is Energetic.
Crystal BloggersNeed design custom forms in divi with gravity forms clear each your browser and web site cache, as cached knowledge can avoid updates from showing up.
Finally, assure all plugins, Gravity Forms, and Divi are current to the most up-to-date variations to circumvent compatibility troubles.
Enhancing Kinds With Further Divi Modules
By combining Gravity Types with Divi’s big selection of modules, you are able to create far more engaging and interactive type layouts. Get started by positioning your Gravity Sorts shortcode inside of a Divi Textual content or Code module.
Then, use Divi’s bordering modules—like Blurbs, Photographs, or Phone to Actions—so as to add context, visual cues, or incentives in close proximity to your kind. You may also stack modules to Screen testimonies, FAQs, or have confidence in badges alongside your sort, creating trustworthiness and boosting user expertise.
Increase visibility with Divi’s Divider and Spacer modules to build respiratory place about your variety. If you wish to spotlight your sort, place it inside of a Divi Boxed or Shadowed area. Custom made backgrounds, gradients, or animations can assist draw consideration, producing your type experience just like a organic, compelling aspect of your respective web site style.
Summary
You’ve now acquired anything you must seamlessly integrate Gravity Sorts into your Divi-driven Web-site. By next these ways, it is possible to generate, customize, and Exhibit types accurately in which you want them—no coding expected. Don’t overlook to preview your web site and tweak the design for the perfect in good shape. Should you run into challenges, double-Examine your shortcode and clear your caches. With a certain amount of follow, including interactive sorts to your internet site will feel like second character!