Skip to content

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 (such as text boxes, checkboxes, and radio buttons)
  • Gravity Forms input field containers (the area wrapping your fields)
  • Gravity Forms placeholder text

Pre-Requisites

Section titled “Pre-Requisites”

Input General Styling

Section titled “Input General Styling”

Style Gravity Forms Input General

  1. The Input General section groups common visual settings for standard fields (like text boxes and dropdowns).

  2. In the divi module, goto Gravity Forms Settings > Design (Tab) > Input General

  3. Select a Background Color

  4. Set up the Rounded Color, Border Styles, Border Width, Border Color, and Border Style to match your brand.

  5. Customize your input text design by configuring the options 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 card required.

Start Risk-Free Trial

Text/Textarea Styling

Section titled “Text/Textarea Styling”

Style Gravity Forms Text/Textarea

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

  2. Customize the appearance of your standard text boxes and larger text areas.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Select Field Styling

Section titled “Select Field Styling”

Style Gravity Forms Select Field

  1. In the divi module, goto Gravity Forms Settings > Design (Tab) > Select

  2. Control the space around your dropdown fields by adjusting the margin (outer space) and padding (inner space) values.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Checkbox/Radio Field Styling

Section titled “Checkbox/Radio Field Styling”

Style Gravity Checkbox/Radio Field

  1. Control the space around your checkbox and radio fields by adjusting the margin (outer space) and padding (inner space) values.

  2. In the divi module, goto Gravity Forms Settings > Design (Tab) > Checkbox/Radio

  3. Customize your checkbox and radio text design by configuring the options 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 card required.

Start Risk-Free Trial

Input Placeholder Styling

Section titled “Input Placeholder Styling”

Style Gravity Forms Input Placeholder

  1. This applies only to the temporary placeholder text shown inside text boxes, text areas, and dropdowns.

  2. In the divi module, goto Gravity Forms Settings > Design (Tab) > Input Placeholder Text

  3. Customize your placeholder text design by configuring the options 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 card required.

Start Risk-Free Trial