CSS Targeting Examples

Introduction

This article shows usage examples for targeting Gravity Forms elements.

Generally, we illustrate one example that would be generic for all forms, and then one (or two) that would be specific to a unique form ID. If you’re styling a specific form, you would simply view your source, find the form ID and replace the ID in my examples with your own.

You’ll note that these examples are more specific (ie: longer) than what you might need to accomplish the styling, but better CSS specificity makes overriding inherited theme styles much easier.

Version Specificity

These examples have been updated to reflect the changes to markup made in Gravity Forms 2.5. Where an example would be different in different version, it is marked in the text:

  • “legacy markup” — targeting for Gravity Forms versions prior to 2.5, or forms with the enable legacy markup setting turned on.
  • “standard markup” — targeting needed for forms created under Gravity Forms 2.5 and later, or older forms with the enable legacy markup setting turned off.

Form Wrapper

Contains the entire Gravity Form

  • example: the main form wrapper (div) – applies to all forms 
    body .gform_wrapper { border: 1px solid red }
  • example: the main form wrapper (div) – applies just to form ID 
    body #gform_wrapper_1 { border: 1px solid red }

The following classes are applied to the form wrapper based on whether or not legacy mode is enabled for a form.

  • example: the main form wrapper (div) – applies to all standard markup forms 
    body .gform_wrapper.gravity-theme { border: 1px solid red }
  • example: the main form wrapper (div) – applies to all forms using legacy markup. 
    body .gform_wrapper.gform_legacy_markup_wrapper { border: 1px solid red }

Form Header

Form Heading

Contains the form title and description

  • example: the form heading section (div) – applies to all forms 
    body .gform_wrapper .gform_heading { border: 1px solid red }
  • example: the form heading section (div) – applies just to form ID #1 
    body #gform_wrapper_1 .gform_heading { border: 1px solid red }

Form Title

  • example: the form title (h3) – applies to all forms 
    body .gform_wrapper .gform_heading .gform_title { color: red }
  • example: the form title (h3) – applies just to form ID #1 
    body #gform_wrapper_1 .gform_heading .gform_title { color: red }

Form Description

  • example: the form description (span) – applies to all forms 
    body .gform_wrapper .gform_heading .gform_description { border: 1px solid red }
  • example: the form description (span) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_heading .gform_description { border: 1px solid red }

Form Body

Form Body

Contains the main form content

  • example: the form body section (div) – applies to all forms 
        body .gform_wrapper .gform_body {border: 1px solid red}
  • example: the form body section (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body {border: 1px solid red}

Form Container

Used to structure all of the form elements

  • example: the form container (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields {border: 1px solid red}
  • example: the form container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields {border: 1px solid red}

Form Items

Individual items containing each form element

  • example: the form item (div | fieldset) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield {border: 1px solid red}
  • example: the form item (div | fieldset) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield {border: 1px solid red}

Input Field Container

Wraps the actual form element inside the containing item

  • example: input field container (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container {border: 1px solid red}
  • example: input field container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container {border: 1px solid red}
  • example: input field container (div) – applies just to specific form field (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields  #field_XX_X.gfield .ginput_container {border: 1px solid red}

Input Field Description Container

Contains the field description inside the containing list item

  • example: input field description container (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_description {border: 1px solid red}
  • example: input field description container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_description {border: 1px solid red}
  • example: input field description container (div) – applies just to specific field description (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields  #field_XX_X.gfield .gfield_description {border: 1px solid red}

Standard Field Label

  • example: standard field label (label) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {color: red}
  • example: standard field label (label) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label {color: red}
  • example: standard field label (label) – applies just to specific field label (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields  #field_XX_X.gfield .gfield_label {color: red}

Required Field Indicator (Asterisk)

  • example: required field indicator (span) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {color: red}
  • example: required field indicator (span) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label .gfield_required {color: red}
  • example: required field indicator (span) – applies just to specific indicator (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields  #field_XX_X.gfield .gfield_label .gfield_required {color: red}

Standard Fields

Text Field

  • example: standard text field (input) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield input[type=text] {border: 1px solid red}
  • example: standard text field (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text] {border: 1px solid red}
  • example: standard text field (input) – applies just to specific text field (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield input[type=text] {border: 1px solid red}

Drop-Down (Select) Field

  • example: standard drop-down field (select) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield select {border: 1px solid red}
  • example: standard drop-down field (select) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield select {border: 1px solid red}
  • example: standard drop-down field (select) – applies just to specific drop-down field (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield select {border: 1px solid red}

Paragraph (Textarea) Field

  • example: standard paragraph field (textarea) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield textarea {border: 1px solid red}
  • example: standard paragraph field (textarea) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea {border: 1px solid red}
  • example: standard paragraph field (textarea) – applies just to specific paragraph field (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield textarea {border: 1px solid red}

Multiple-Choice (Radio) List

Used to structure all of the individual list choices

  • example: standard multiple-choice list (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio {border: 1px solid red}
  • example: standard multiple-choice list (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_radio {border: 1px solid red}
  • example: standard multiple-choice list (div) – applies just to specific multiple-choice list (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_radio {border: 1px solid red}

Multiple-Choice (Radio) List Items

Individual list choices

  • example: standard multiple-choice list item (div) – applies to all standard markup forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio .gchoice {border: 1px solid red}
  • legacy example: standard multiple-choice list item (li) – applies to all forms using legacy markup. 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio li {border: 1px solid red}
  • example: standard multiple-choice list item (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_radio .gchoice {border: 1px solid red}
  • example: standard multiple-choice list item (div) – applies just to specific multiple-choice list item (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_radio .gchoice {border: 1px solid red}

Multiple-Choice (Radio) Inputs

  • example: standard multiple-choice input (radio) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio input[type=radio] {border: 1px solid red}
  • example: standard checkbox input (radio) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_radio input[type=radio] {border: 1px solid red}
  • example: standard checkbox input (radio) – applies just to specific multiple-choice inputs (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_radio input[type=radio] {border: 1px solid red}

Checkbox List

Used to structure all of the individual list choices

  • example: standard checkbox list (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox {border: 1px solid red}
  • example: standard checkbox list (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox {border: 1px solid red}
  • example: standard checkbox list (div) – applies just to specific checkbox list (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_checkbox {border: 1px solid red}

Checkbox List Items

Individual list choices

  • example: standard checkbox list item (div) – applies to all standard markup forms 
         body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox .gchoice {border: 1px solid red}
  • legacy example: standard checkbox list item (li) – applies to all forms using legacy markup. 
         body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox li {border: 1px solid red}
  • example: standard checkbox list item (div) – applies just to form ID #1 
         body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox .gchoice {border: 1px solid red}
  • example: standard checkbox list item (div) – applies just to specific checkbox list item (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
         body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_checkbox .gchoice {border: 1px solid red}

Checkbox Inputs

  • example: standard checkbox input (checkbox) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox input[type=checkbox] {border: 1px solid red}
  • example: standard checkbox input (checkbox) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox input[type=checkbox] {border: 1px solid red}
  • example: standard checkbox input (checkbox) – applies just to specific checkbox list inputs (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_checkbox input[type=checkbox] {border: 1px solid red}

Advanced Fields

Advanced Field (multi-field) Container

Wraps the different fields in multi-field sections like the name fields, address fields, etc.*

  • example: advanced field container (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex {border: 1px solid red}
  • example: advanced field container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex {border: 1px solid red}
  • example: advanced field container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex {border: 1px solid red}

Advanced Field – Left Container

Contains the left-positioned inputs and sub-labels in the advanced fields

  • example: advanced field – left container (span) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_left {border: 1px solid red}
  • example: advanced field – left container (span) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_left {border: 1px solid red}
  • example: advanced field – left container (span) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_left {border: 1px solid red}

Sub-Label: Advanced Field – Left Container

The sub-label beneath the left-positioned elements in the advanced fields

  • example: advanced field – left container sub-label (label) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_left label {color: red}
  • example: advanced field – left container sub-label (label) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_left label {color: red}
  • example: advanced field – left container sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_left label {color: red}

Advanced Field – Right Container

Contains the right-positioned inputs and sub-labels in the advanced fields

  • example: advanced field – right container (span) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_right {border: 1px solid red}
  • example: advanced field – right container (span) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_right {border: 1px solid red}
  • example: advanced field – right container (span) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_right {border: 1px solid red}

Sub-Label: Advanced Field – Right Container

The sub-label beneath the right-positioned elements in the advanced fields

  • example: advanced field – right container sub-label (label) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_right label {color: red}
  • example: advanced field – right container sub-label (label) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_right label {color: red}
  • example: advanced field – right container sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_right label {color: red}

Advanced Fields – Full Container

Contains the full width inputs and sub-labels in the advanced fields

  • example: advanced field – full container (span) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_full {border: 1px solid red}
  • example: advanced field – full container (span) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_full {border: 1px solid red}
  • example: advanced field – full container (span) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_full {border: 1px solid red}

Sub-Label: Advanced Field – Full Container

The sub-label beneath the full width elements in the advanced fields

  • example: advanced field – full container sub-label (label) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_full label {color: red}
  • example: advanced field – full container sub-label (label) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_complex .ginput_full label {color: red}
  • example: advanced field – full container sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_complex .ginput_full label {color: red}

Time – Hours Container

Contains the hours input field and sub-label

  • example: time – hours container (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour {border: 1px solid red}
  • example: time – hours container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_hour {border: 1px solid red}
  • example: time – hours container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_hour {border: 1px solid red}

Time – Hours Input Field

  • example: time – hours input field (input) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour input {border: 1px solid red}
  • example: time – hours input field (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_hour input {border: 1px solid red}
  • example: time – hours input field (input) – applies just to specific form field (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_hour input {border: 1px solid red}

Sub-Label: Time – Hours

  • example: time – hours sub-label (label) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour label {color: red}
  • example: time – hours sub-label (label) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_hour label {color: red}
  • example: time – hours sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_hour label {color: red}

Time – Minutes Container

Contains the minutes input field and sub-label

  • example: time – minutes container (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute {border: 1px solid red}
  • example: time – minutes container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_minute {border: 1px solid red}
  • example: time – minutes container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_minute {border: 1px solid red}

Time – Minutes Input Field

  • example: time – minutes input field (input) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute input {border: 1px solid red}
  • example: time – minutes input field (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_minute input {border: 1px solid red}
  • example: tim – minutes input field (input) – applies just to specific form field (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_minute input {border: 1px solid red}

Sub-Label: Time – Minutes

  • example: time – minutes sub-label (label) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute label {color: red}
  • example: time – minutes sub-label (label) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_minute label {color: red}
  • example: time – minutes sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_minute label {color: red}

Time – AM/PM Container

Contains the minutes input field and sub-label

  • example: time – AM/PM container (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_ampm {border: 1px solid red}
  • example: time – AM/PM container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_ampm {border: 1px solid red}
  • example: time – AM/PM container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_ampm {border: 1px solid red}

Time – AM/PM Selector

  • example: time – AM/PM selector (select) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_ampm select {border: 1px solid red}
  • example: time – AM/PM selector (select) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_time_ampm select {border: 1px solid red}
  • example: time – AM/PM selector (select) – applies just to specific drop-down field (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_time_ampm select {border: 1px solid red}

Date – Input Field (Datepicker Option)

  • example: date – input field (input) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .datepicker {border: 1px solid red}
  • example: date – input field (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .datepicker {border: 1px solid red}
  • example: date – input field (input) – applies just to specific date field input (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .datepicker {border: 1px solid red}

Date – Icon Image (Datepicker Option)

  • example: date – icon image (img) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield img {border: 1px solid red}
  • example: date – icon image (img) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield img {border: 1px solid red}
  • example: date – icon image (img) – applies just to specific date field input (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield img {border: 1px solid red}

Date – Month Container

Contains the month input field and sub-label

  • example: date – month container (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month {border: 1px solid red}
  • example: date – month container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_month {border: 1px solid red}
  • example: date – month container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_month {border: 1px solid red}

Date – Month Input Field

  • example: date – month input field (input) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month input {border: 1px solid red}
  • example: date – month input field (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_month input {border: 1px solid red}
  • example: date – month input field (input) – applies just to specific form field (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_month input {border: 1px solid red}

Sub-Label: Date – Month

  • example: date – month sub-label (label) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month label {color: red}
  • example: date – month sub-label (label) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_month label {color: red}
  • example: date – month sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_month label {color: red}

Date – Day Container

Contains the day input field and sub-label

  • example: date – day container (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day {border: 1px solid red}
  • example: date – day container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_day {border: 1px solid red}
  • example: date – day container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_day {border: 1px solid red}

Date – Day Field Input

  • example: date – day input field (input) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day input {border: 1px solid red}
  • example: date – day input field (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_day input {border: 1px solid red}
  • example: date – day input field (input) – applies just to specific form field (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_day input {border: 1px solid red}

Sub-Label: Date – Day

  • example: date – day sub-label (label) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day label {color: red}
  • example: date – sub-label (label) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_day label {color: red}
  • example: date – sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_day label {color: red}

Date – Year Container

Contains the month input field and sub-label

  • example: date – year container (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year {border: 1px solid red}
  • example: date – year container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_year {border: 1px solid red}
  • example: date – year container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_year {border: 1px solid red}

Date – Year Input Field

  • example: date – year input field (input) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year input {border: 1px solid red}
  • example: date – year input field (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_year input {border: 1px solid red}
  • example: date – year input field (input) – applies just to specific form field (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_year input {border: 1px solid red}

Sub-Label: Date – Year

  • example: date – year sub-label (label) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year label {color: red}
  • example: date – year sub-label (label) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_year label {color: red}
  • example: date – year sub-label (label) – applies just to specific sub-label (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_date_year label {color: red}

HTML 5 Fields

Email Input Field (HTML 5 Option)

  • example: HTML 5 email field (input) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield input[type=email] {border: 1px solid red}
  • example: HTML 5 email field (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email] {border: 1px solid red}
  • example: HTML 5 email field (input) – applies just to specific email field (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield input[type=email] {border: 1px solid red}

Telephone Input Field (HTML 5 Option)

  • example: HTML 5 telephone field (input) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel] {border: 1px solid red}
  • example: HTML 5 telephone field (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel] {border: 1px solid red}
  • example: HTML 5 telephone field (input) – applies just to specific telephone field (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield input[type=tel] {border: 1px solid red}

Website Input Field (HTML 5 Option)

  • example: HTML 5 website field (input) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield input[type=url] {border: 1px solid red}
  • example: HTML 5 website field (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=url] {border: 1px solid red}
  • example: HTML 5 website field (input) – applies just to specific website field (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield input[type=url] {border: 1px solid red}

Section Breaks

Section Break Container

Wraps the section break elements inside the containing list item

  • example: section break container (li) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gsection {border: 1px solid red}
  • example: section break container (li) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gsection {border: 1px solid red}
  • example: section break container (li) – applies just to specific section break container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields  #field_XX_X.gsection {border: 1px solid red}

Section Break Title

  • example: section break title (h2) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gsection .gsection_title {color: red}
  • example: section break container (li) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gsection .gsection_title {color: red}
  • example: section break container (li) – applies just to specific section break title (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields  #field_XX_X.gsection .gsection_title {color: red}

Section Break Description

  • example: section break description (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gsection .gsection_description {border: 1px solid red}
  • example: section break description (li) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gsection .gsection_description {border: 1px solid red}
  • example: section break description (li) – applies just to specific section break description (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields  #field_XX_X.gsection .gsection_description {border: 1px solid red}

Captcha Fields

ReCaptcha Container

Third party markup inserted dynamically – contains the ReCaptcha form fields

  • example: ReCaptcha container (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_recaptcha {border: 1px solid red}
  • example: ReCaptcha container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_recaptcha {border: 1px solid red}

Captcha Container (Really Simple Captcha Option)

Wraps the captcha images and form elements

  • example: captcha container (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container {border: 1px solid red}
  • example: captcha container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_captcha_container {border: 1px solid red}

Captcha Image (Really Simple Captcha Option)

  • example: captcha image (img) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha {border: 1px solid red}
  • example: captcha image (img) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha {border: 1px solid red}

Captcha Input Field (Really Simple Captcha Option)

  • example: captcha input field (input) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha_input_container input {border: 1px solid red}
  • example: captcha input field (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha_input_container input {border: 1px solid red}

Contains the submit button and admin edit link

  • example: the form footer section (div) – applies to all forms 
        body .gform_wrapper .gform_footer {border: 1px solid red}
  • example: the form footer section (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_footer {border: 1px solid red}

Submit Button

  • example: the form submit button (input) – applies to all forms 
        body .gform_wrapper .gform_footer input[type=submit] {border: 1px solid red}
  • example: the form submit button (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_footer input[type=submit] {border: 1px solid red}

Submit Button (image)

  • example: the form submit button (image) – applies to all forms 
        body .gform_wrapper .gform_footer input[type=image] {border: 1px solid red}
  • example: the form submit button (image) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_footer input[type=image] {border: 1px solid red}

Form Confirmation

Inline Confirmation Message

Displays on same page upon successful completion of the form

  • example: inline confirmation message (div) – applies to all forms 
        body .gform_confirmation_message  {border: 1px solid red}

Validation Errors

Validation Error Message

  • example: validation error message (div) – applies to all standard markup forms 
        body .gform_wrapper .gform_validation_error {border: 1px solid red}
  • legacy example: validation error message (div) – applies to all forms using legacy markup. 
        body .gform_wrapper .validation_error {border: 1px solid red}
  • example: validation error message (div) – applies just to form ID #1 
        body #gform_wrapper_1 .validation_error {border: 1px solid red}

Validation – Error Container

Container for fields with invalid values

  • example: validation – error container (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield_error {border: 1px solid red}
  • example: validation – error container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield_error {border: 1px solid red}

Validation – Error Description Message

Description/error message below inputs with invalid values

  • example: validation – error description message (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message {border: 1px solid red}
  • example: validation – error description message (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield_error .validation_message {border: 1px solid red}

Multi-Page Form Fields

Multi-Page Form Progress Bar Container

  • example: multi-page form progress bar container (div) – applies to all forms 
        body .gform_wrapper .gf_progressbar_wrapper {border: 1px solid red}
  • example: multi-page form progress bar container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gf_progressbar_wrapper {border: 1px solid red}

Multi-Page Form Progress Bar Title

  • example: multi-page form progress bar title (h3) – applies to all forms 
        body .gform_wrapper .gf_progressbar_wrapper .gf_progressbar_title {color: red}
  • example: multi-page form progress bar title (h3) – applies just to form ID #1 
        body #gform_wrapper_1 .gf_progressbar_wrapper .gf_progressbar_title {color: red}

Multi-Page Form Progress Bar

  • example: multi-page form progress bar (div) – applies to all forms 
        body .gform_wrapper .gf_progressbar_wrapper .gf_progressbar {border: 1px solid red}
  • example: multi-page form progress bar (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gf_progressbar_wrapper .gf_progressbar {border: 1px solid red}

Multi-Page Form Progress Bar – Percentage Completed

  • example: multi-page form progress bar – percentage completed (div) – applies to all forms 
        body .gform_wrapper .gf_progressbar .gf_progressbar_percentage {border: 1px solid red}
  • example: multi-page form progress bar – percentage completed (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gf_progressbar .gf_progressbar_percentage {border: 1px solid red}

Multi-Page Form Steps Container

Contains the user-defined steps text

  • example: multi-page form steps container (div) – applies to all forms 
        body .gform_wrapper .gf_page_steps {border: 1px solid red}
  • example: multi-page form steps container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gf_page_steps {border: 1px solid red}

Multi-Page Form Step

  • example: multi-page form step (div) – applies to all forms 
        body .gform_wrapper .gf_page_steps .gf_step {color: red}
  • example: multi-page form step (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gf_page_steps .gf_step {color: red}

Multi-Page Form Active Step

  • example: multi-page form active step (div) – applies to all forms 
        body .gform_wrapper .gf_page_steps .gf_step_active {color: red}
  • example: multi-page form active step (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gf_page_steps .gf_step_active {color: red}

Multi-Page Form Page

Wraps each “paged” set of fields

  • example: multi-page form page (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_page {border: 1px solid red}
  • example: multi-page form page (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_page {border: 1px solid red}

Multi-Page Form Footer

Contains previous and next paging buttons

  • example: multi-page form footer (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_page_footer {border: 1px solid red}
  • example: multi-page form footer (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_page_footer {border: 1px solid red}

Multi-Page Form – Next Button

  • example: multi-page form – next button (input) – applies to all forms 
        body .gform_wrapper .gform_body .gform_page_footer .gform_next_button {border: 1px solid red}
  • example: multi-page form – next button (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_page_footer .gform_next_button {border: 1px solid red}

Multi-Page Form – Previous Button

  • example: multi-page form – previous button (input) – applies to all forms 
        body .gform_wrapper .gform_body .gform_page_footer .gform_previous_button {border: 1px solid red}
  • example: multi-page form – previous button (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_page_footer .gform_previous_button {border: 1px solid red}

Multi-Page Form – Submit Button

  • example: multi-page form – submit button (input) – applies to all forms 
        body .gform_wrapper .gform_body .gform_page_footer .gform_button {border: 1px solid red}
  • example: multi-page form – submit button (input) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_page_footer .gform_button {border: 1px solid red}

List Fields

List Field Container

(div) wraps the list field

  • example: list field container (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list {border: 1px solid red}
  • example: list field container (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list {border: 1px solid red}
  • example: list field container (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_list {border: 1px solid red}

List Field

List field structure that contains the list field inputs

  • example: list field (div) – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list .gfield_list {border: 1px solid red}
  • example: list field (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list .gfield_list {border: 1px solid red}
  • example: list field (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_list .gfield_list {border: 1px solid red}

List Field Table Headers

Targets the individual column headers (labels)

  • example: column header (div) – applies to all standard markup forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list .gfield_list_header {color: red}
  • legacy example: column header (th) – applies to all forms using legacy markup. 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list thead th {color: red}
  • example: column header (div) – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list .gfield_list_header {color:red}
  • example: column header (div) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list .gfield_list_header {color: red}

List Field Table Rows

Targets the individual HTML table rows – useful for specifying sizes or creating alternating-color row styles

  • example: odd-numbered row – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list .gfield_list .gfield_list_row_odd {border: 1px solid red}
  • example: odd-numbered row – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list .gfield_list .gfield_list_row_odd {border: 1px solid red}
  • example: odd-numbered row – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list .gfield_list .gfield_list_row_odd {border: 1px solid red}
  • example: even-numbered row – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list .gfield_list .gfield_list_row_even {border: 1px solid red}
  • example: even-numbered row – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list .gfield_list .gfield_list_row_even {border: 1px solid red}
  • example: even-numbered row – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list .gfield_list .gfield_list_row_even {border: 1px solid red}

List Field Table Cells

Targets the list field cells

  • example: list cell – applies to all forms 
        body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list .gfield_list .gfield_list_cell {border: 1px solid red}
  • example: list cell – applies just to form ID #1 
        body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list .gfield_list .gfield_list_cell {border: 1px solid red}
  • example: list cell – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID) 
        body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list .gfield_list .gfield_list_cell {border: 1px solid red}