For those who’re aiming to seamlessly integrate impressive varieties into your Divi-built pages, mastering Gravity Varieties shortcodes is important. You don’t need to have Sophisticated coding techniques—just a transparent system. By pursuing a number of clear-cut measures, you’ll Command equally the appearance and placement of your kinds. But just before you can start collecting entries or customizing the seem, Here are a few critical steps you’ll have to choose first…
Comprehending Gravity Kinds and Divi Compatibility
Whilst Gravity Sorts and Divi are made by distinct groups, they do the job seamlessly together to assist you Make custom varieties and integrate them into your Divi-run Internet site.
Gravity Forms provides strong resources for producing all the things from basic Speak to varieties to advanced, multi-web page surveys. Divi, Alternatively, allows you to design visually gorgeous web pages with its intuitive builder.
Whenever you make use of them collectively, you’re not limited by Divi’s native modules or primary variety solutions. Alternatively, you could embed any Gravity Form right into your layouts using shortcodes, providing you with full Manage about type placement and styling.
This compatibility indicates you may retain your internet site’s cohesive glance even though leveraging impressive form characteristics, guaranteeing both equally design and style flexibility and Innovative operation.
Setting up and Activating Gravity Varieties
Future, you’ll see a prompt to enter your Gravity Kinds license crucial. Find this essential with your Gravity Varieties account, duplicate it, and paste it in to the plugin’s settings.
Save your changes to permit computerized updates and accessibility all functions.
With Gravity Kinds installed and activated, you’re willing to begin constructing sorts and integrating them together with your Divi layouts.
Developing Your First Kind in Gravity Forms
With Gravity Forms mounted and also your license vital activated, you can begin setting up your to start with sort. Head towards your WordPress dashboard and come across “Sorts” from the left-hand menu. Click on “New Sort,” then enter a title and description to arrange your type very easily.
Now, you’ll begin to see the drag-and-drop type builder. Include fields by clicking or dragging them from the proper panel into your type. You are able to customize Each and every industry by clicking on it and altering its options, which include labels, required position, or placeholder textual content.
When you finally’ve extra every one of the fields you would like, simply click “Update” or “Conserve” to shop your development. Give your variety a quick preview to be sure it appears to be like and is effective as you wish. You’re now Completely ready for the subsequent phase.
Locating the Gravity Kinds Shortcode
Soon after conserving your type, you’ll need to have the Gravity Sorts shortcode to embed it as part of your Divi format. To uncover this shortcode, go to your WordPress dashboard and click on “Kinds” underneath the Gravity Forms menu. You’ll see a listing of all of your kinds.
Look for the 1 you just established. On the correct facet of the shape’s row, you’ll recognize a “Shortcode” column exhibiting one thing like [gravityform id="one"].
Duplicate this precise shortcode. In case you don’t begin to see the shortcode column, hover above your kind’s title and click on “Embed.” A popup will show up exhibiting the shortcode you need. Duplicate it in your clipboard.
This shortcode consists of all the mandatory options to Screen your variety anywhere you'd like within your Divi-driven web page.
Introducing a different Web site or Post With Divi Builder
Willing to include your Gravity Type to a brand new web site or post? Commence by logging into your WordPress dashboard.
Inside the remaining sidebar, simply click “Internet pages” or “Posts” determined by in which you want your form.
Upcoming, find “Increase New” to make a clean page or submit.
As soon as the editor loads, you’ll see the purple “Use Divi Builder” button at the top—click it.
Divi will start its builder interface, giving you alternatives to make from scratch, pick a pre-produced layout, or clone an current page.
Decide the option that satisfies your preferences.
Following Divi hundreds, you’ll be able to add sections, rows, and modules to design your articles.
Now, your new page or article is prepared for customization right before including your Gravity Sorts shortcode.
Inserting Shortcodes Employing Divi’s Text Module
After you’ve setup your web site or submit using the Divi Builder, it’s time to put your Gravity Kind just where you want it.
Commence by including a brand new segment or row, then insert a Text Module inside your picked out location.
Click on Within the Text Module’s content place, ensuring you’re in the “Textual content” (not “Visual”) tab.
Now, paste your Gravity Types shortcode—anything like `[gravityform id="1" title="Untrue" description="false"]`.
Conserve your changes and exit the module editor.
Divi will procedure the shortcode and Display screen your Gravity Sort right inside your structure.
It is possible to move or copy the Textual content Module as needed to regulate placement.
This simple process provides entire Command more than in which your form seems about the web site.
Customizing Form Appearance In just Divi
Even though Gravity Forms handles the Main construction within your kinds, Divi gives you impressive tools to refine their feel and appear. As soon as you’ve positioned your Gravity Varieties shortcode inside a Divi Text module, You should utilize Divi’s module style and design configurations to boost the appearance.
Modify margins and padding for better spacing, adjust qualifications shades, or incorporate borders and shadows to generate the form stick out. You may as well customise fonts, text measurements, and button styles by focusing on the module or making use of Divi’s constructed-in design selections.
If you'd like more Manage, add custom made CSS specifically within the module’s Sophisticated settings. This tactic helps you to match your variety’s visual appearance to your web site’s branding, making certain a cohesive and Skilled presentation across your web pages.
Adjusting Form Options for Ideal General performance
Even though styling draws visitors’ focus, fine-tuning your Gravity Kinds configurations ensures your sorts get the job done efficiently and competently within Divi. Commence by examining each type’s common options. Established distinct sort titles and descriptions so people know What to anticipate. Change affirmation and notification choices to offer immediate opinions and maintain submissions arranged. Enable anti-spam attributes like reCAPTCHA to reduce unwanted entries with out disrupting authentic people.
Following, configure conditional logic for fields and sections, streamlining the user experience by only exhibiting appropriate questions. Limit the volume of entries if essential, specifically for registrations or Specific situations.
Ultimately, optimize the form’s general performance by reducing the usage of pointless fields and enabling AJAX for smoother submissions. Attention to those options can help your types load quickly and performance reliably.
Troubleshooting Widespread Screen Difficulties
Despite cautious setup, you might discover your Gravity Kinds aren’t exhibiting effectively inside Divi. Occasionally, the form seems misaligned, or styling seems off.
1st, Examine when you’ve put the Gravity Sorts shortcode within a Text or Code module. Utilizing the Mistaken module could cause layout challenges.
Subsequent, ensure there aren’t conflicting CSS procedures from Divi or other plugins. Consider disabling custom made CSS quickly to view if it resolves the problem.
If the form isn’t demonstrating in the slightest degree, ensure the shortcode is proper and the form is Energetic.
Distinct each your browser and web site cache, as cached info can reduce updates from showing.
Last of all, make sure all plugins, Gravity Forms, and Divi are current to the latest versions to avoid compatibility challenges.
Boosting Sorts With Extra Divi Modules
By combining Gravity Kinds with Divi’s wide selection of modules, you may generate much more engaging and interactive kind layouts. Begin by putting your Gravity Kinds shortcode inside of a Divi Textual content or Code module.
Then, use Divi’s bordering modules—like Blurbs, Photos, or Call to Steps—to incorporate context, visual BloggersNeed design custom forms in divi with gravity forms cues, or incentives in the vicinity of your form. You may also stack modules to display testimonials, FAQs, or rely on badges along with your variety, constructing reliability and enhancing consumer practical experience.
Increase visibility with Divi’s Divider and Spacer modules to develop respiratory place around your form. If you would like highlight your kind, put it inside of a Divi Boxed or Shadowed segment. Custom backgrounds, gradients, or animations may help draw consideration, generating your type experience similar to a purely natural, persuasive section of one's web page style.
Conclusion
You’ve now acquired all the things you might want to seamlessly combine Gravity Varieties into your Divi-powered website. By following these measures, you are able to create, customise, and Screen types precisely in which you want them—no coding demanded. Don’t forget about to preview your page and tweak the look for an ideal in good shape. Should you operate into challenges, double-Check out your shortcode and very clear your caches. With a little bit of observe, including interactive varieties to your internet site will experience like 2nd character!