Style Gravity Forms Input Fields, Input Wrapper & Input Placeholder In Divi Theme

Style Gravity Forms Input Fields, Input Wrapper & Input Placeholder In Divi Theme

In this how-to you’ll learn how to style

  • Gravity forms input fields like text, textarea, checkbox and radio
  • Gravity forms input field wrapper
  • Gravity form text and textarea placeholder

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 Input General

Style Gravity Forms Input General
  1. Input General section groups common settings for a input (text, textarea and select) field.
  2. In the divi module, goto Gravity Forms Settings > Design (Tab) > Input General
  3. Select a Background Color
  4. Setup the Rounded Color, Border Styles, Border Width, Border Color and Border Style to your liking.
  5. Style input 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 Text/Textarea

Style Gravity Forms Text/Textarea
  1. In the divi module, goto Gravity Forms Settings > Design (Tab) > Text/Textarea
  2. Style Gravity Forms Text/Textarea
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 4 - Style Gravity Forms Select Field

Style Gravity Forms Select Field
  1. In the divi module, goto Gravity Forms Settings > Design (Tab) > Select
  2. Set select (dropdown) field spacing by setting values for margin and padding.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 5 - Style Gravity Checkbox/Radio Field

Style Gravity Checkbox/Radio Field
  1. Set select (dropdown) field spacing by setting values for margin and padding.
  2. In the divi module, goto Gravity Forms Settings > Design (Tab) > Checkbox/Radio
  3. Style checkbox/radio field option 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 6 - Style Gravity Forms Input Placeholder

Style Gravity Forms Input Placeholder
  1. This applies only to placeholder for text, textarea and select field.
  2. In the divi module, goto Gravity Forms Settings > Design (Tab) > Input Placeholder Text
  3. Style input placeholder 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.