Gravity Forms

The Gravity Forms Customizer is a specialized tool designed to bridge the gap between functional form building and high-end web design. While Gravity Forms handles the data, this module gives you pixel-perfect control over the aesthetics. Every element—from the main title to the smallest sub-label—can be styled using the familiar Divi Essential design framework, eliminating the need for complex CSS overrides.

Content Tab

The Content Tab is the engine room of the module. It allows you to select your data source and manage the fundamental visibility of your form elements.

Gravity Forms Settings

• Select Form: Choose the specific form you want to display from a dropdown list of all active Gravity Forms on your site.
• Show Title: Toggle this option to display or hide the form’s main title.
• Show Description: Control the visibility of the form’s description or instructional text.
• Use Ajax: Enable this to allow the form to submit asynchronously, preventing the page from refreshing and providing a smoother user experience.

Design Tab

The Universal Styling Framework

In the Design Tab, the module uses a consistent, high-powered styling framework for every textual element—including the Title, Description, Label, and Sub Label. Each of these sections contains three core sub-groups to ensure total design harmony:

Background

• Customization: Apply solid colors, linear or radial gradients, or even background images to the specific container of that text element.
• Styling: Useful for creating high-contrast headers or subtly shaded backgrounds for field labels to improve readability.

Border

• Edge Control: Define the border width, color, and style (solid, dashed, dotted) for each element independently.
• Rounded Corners: Use the Corner Radius controls to soften the look of your form, applying rounded edges to everything from the title box to individual label containers.

Font Style (Typography)

• Font Family & Weight: Select from your site’s full font library and adjust weights from Thin to Ultra Bold.
• Text Transformation: Quickly apply Uppercase, Lowercase, or Capitalize settings to maintain a consistent typographic hierarchy.

Color & Size: Precisely tune the text color, font size, and letter spacing to ensure your form is accessible and beautiful on all devices.

Form-Specific Design Sections

Beyond text styling, the module provides specialized tools for the functional parts of the form:

Inputs, Textareas, & Select Menus

• Field Styling: Customize the background, borders, and typography of the actual input fields where users enter data.
• Focus State: Define how a field looks when it is active or clicked (e.g., changing the border color) to guide the user through the form.
• Placeholder Text: Specifically style the hint text that appears inside empty fields to make it distinct from user-inputted text.

Submit Button

• Full Button Customization: Access the standard Divi button suite to style the submit button with custom colors, hover effects, icons, and box shadows.

Validation & Feedback

• Error Messages: Design the look of validation errors (e.g., “This field is required”) so they are clear and catch the user’s attention.
• Success Message: Style the confirmation text that appears after a successful submission to celebrate the user’s action.

Why Use the Gravity Forms Customizer?

Professional Finish: By using the Universal Styling Framework (Background, Border, Font) across all labels and titles, you ensure that your form doesn’t just look like a plugin—it looks like a native, professionally designed part of your website.