Custom CSS Styles For Gravity Form Elements In Divi Theme

In this how-to you’ll learn various elements in gravity form for which you can add custom css styles.

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 : 10 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 - Custom CSS Styles In Gravity Form Divi Module

Custom CSS Styles In Gravity Form Divi Module
  1. In the divi module, goto Gravity Forms Settings > Advanced (Tab) > Custom CSS
  2. You'll find a css code textarea for following gravity form elements
    • Form Title
    • Form Description
    • Label
    • Sub Label
    • Field Description
    • Text Field
    • Textarea Field
    • Select Field
    • Checkbox/Radio Field
    • Checkbox/Radio Options Text
    • Consent Checkbox Label
    • Consent Description
    • Validation Error Heading
    • Field Validation Message
    • Button
    • Button Hover
    • Submitted Form Confirmation Message
    • Progress Bar Title
    • Progress Bar Percentage
FREE DOWNLOAD

Start your FREE trial. No credit cards required.