Style Gravity Forms Field Validation Error & Form Error In Divi Theme

In this how-to you’ll learn how to style gravity forms field validation error and form error

  • Field Validation Error is the error shown next to a single input field. It represents an error message specific to the input field
  • Form Error is the error shown at the top of a form. It represents the general error message for the form.

Pre-requisites

  1. A WordPress website
  2. Divi Theme by Elegant Themes
  3. Gravity Forms plugin
  4. WP Tools Gravity Forms Divi Module plugin

Tools

  1. Computer

Total Duration : 4 minutes

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 1 - Setup Gravity Forms Module On Divi Builder

Setup Gravity Forms Module On Divi Builder
  1. Install all the pre-requisite plugins/theme.
  2. Setup a gravity form.
  3. Embed the form on divi page builder.
  4. Follow this guide for details
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 2 - Style Gravity Forms Field Validation Error

Style Gravity Forms Field Validation Error
  1. In the divi module, goto Gravity Forms Settings > Design (Tab) > Field Validation Error
  2. Set border color for the error message.
  3. Set background color for the error message.
  4. Set error container spacing by setting values for margin and padding.
  5. Style error text typography by setting values for font, font weight, font style, text alignment, text color, text size, letter spacing, line height and text shadow.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 3 - Style Gravity Forms Validation Error Heading

Style Gravity Forms Validation Error Heading
  1. In the divi module, goto Gravity Forms Settings > Design (Tab) > Validation Error Heading
  2. Set validation error heading container spacing by setting values for margin and padding.
  3. Style validation error heading text typography by setting values for font, font weight, font style, text alignment, text color, text size, letter spacing, line height and text shadow.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.