Skip to content

Gravity Forms Styler

The Gravity Forms Styler module lets you style a Gravity Forms form from the Divi builder. It changes the look of the form. It does not add any features to the Gravity Forms plugin.

Requirement

The Gravity Forms plugin must be installed and active. Without it, the module shows the message "Please install Gravity Forms plugin."

Create a Gravity Form

  1. In the WordPress dashboard, click Forms.
  2. Click Add New.
  3. Choose Use Template or Blank Form and build your form.
  4. Give the form a title.
  5. Customize the form fields if you need to.
  6. Click Save Form.

Add the form to a page

  1. Go to your Divi page and enable the Divi Builder.
  2. Add a new module and search for "Gravity Forms".
  3. Open the module settings. In the Content tab, open the Form group.
  4. Type the numeric form ID into Form ID. If the field is empty, the module shows "Please select a Gravity Form."
  5. Optional: set Enable AJAX Form Submission to Yes to submit the form without a page reload. The default is No.

The module hides the form title. Use a heading module above the form if you want a title.

Style the form

Open the module settings and go to the Design tab.

  • Form Fields: Field Padding, Field Background, Required Mark Color, and the border of the input fields.
  • Form Text: Font styling for the field labels and for the text in the fields.
  • Radio & Checkbox: Radio & Checkbox Size, Background Color, Selected Color, Label Color and the border.
  • Success / Error Message: Padding, background, border and font styling for the success message and for the error message.
  • Button: Divi's standard button options for the submit button, plus box shadow and spacing.