CSS Targeting Examples

Note: These selectors apply only to forms using the Orbital theme. If you are using the Gravity Forms 2.5 theme, see the Legacy CSS Selectors documentation.

Overview

This article provides examples of how to target Gravity Forms elements in the Orbital theme.

Generally, we illustrate one example that is generic to all Orbital forms, and another that is specific to a unique form ID. If you’re styling a specific form, view the source/inspect the element, find the form ID, and replace the ID in the examples with your own.

You’ll note these examples are more specific (longer) than what you might need, but higher CSS specificity can make overriding other styles easier.

Theme Specificity

These examples are for Orbital theme forms, which include the wrapper class .gform-theme--framework.

Form wrapper IDs (still apply):

  • #gform_wrapper_xx where “xx” is the form ID
  • #field_xx_yyy where “xx” is the form ID and “yyy” is the field ID

Note: this ID pattern applies to standard front-end rendering. Repeater inputs, some multi-input fields, and admin/preview contexts may differ.

Form Wrapper

Contains the entire Gravity Form.

/* example: main form wrapper (div) – applies to all Orbital forms */
.gform-theme--framework { border: 1px solid red; }

/* example: main form wrapper (div) – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 { border: 1px solid red; }

Form Header

Form Heading

Contains the form title and description.

/* example: form heading section (div) – applies to all Orbital forms */
.gform-theme--framework .gform_heading { border: 1px solid red; }

/* example: form heading section (div) – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 .gform_heading { border: 1px solid red; }

Form Title

/* example: form title (h3) – applies to all Orbital forms */
.gform-theme--framework .gform_title { color: red; }

/* example: form title (h3) – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 .gform_title { color: red; }

Form Description

/* example: form description (span) – applies to all Orbital forms */
.gform-theme--framework .gform_description { border: 1px solid red; }

/* example: form description (span) – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 .gform_description { border: 1px solid red; }

Form Body

Form Body

Contains the main form content.

/* example: form body section (div) – applies to all Orbital forms */
.gform-theme--framework .gform_body { border: 1px solid red; }

/* example: form body section (div) – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 .gform_body { border: 1px solid red; }

Form Container

Used to structure all of the form elements.

/* example: form container (div) – applies to all Orbital forms */
.gform-theme--framework .gform_fields { border: 1px solid red; }

/* example: form container (div) – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 .gform_fields { border: 1px solid red; }

Form Items

Individual items containing each form element.

/* example: form item (div | fieldset) – applies to all Orbital forms */
.gform-theme--framework .gform_fields .gfield { border: 1px solid red; }

/* example: form item (div | fieldset) – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 .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 Orbital forms */
.gform-theme--framework .ginput_container { border: 1px solid red; }

/* example: input field container (div) – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 .ginput_container { border: 1px solid red; }

/* example: input field container (div) – applies just to a specific form field (replace "XX_X" with your field ID) */
.gform-theme--framework .gform_fields #field_1_4.gfield .ginput_container { border: 1px solid red; }

Input Field Description Container

Contains the field description inside the containing item.

/* example: field description container (div) – applies to all Orbital forms */
.gform-theme--framework .gfield_description { border: 1px solid red; }

/* example: field description container (div) – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 .gfield_description { border: 1px solid red; }

/* example: field description container (div) – applies just to a specific field (replace "XX_X") */
.gform-theme--framework #field_1_4 .gfield_description { border: 1px solid red; }

Standard Field Label

/* example: standard field label (label) – applies to all Orbital forms */
.gform-theme--framework .gfield_label { color: red; }

/* example: standard field label (label) – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 .gfield_label { color: red; }

/* example: standard field label (label) – applies just to a specific field (replace "XX_X") */
.gform-theme--framework #field_1_4 .gfield_label { color: red; }

Required Field Indicator (Asterisk)

/* example: required indicator (span) – applies to all Orbital forms */
.gform-theme--framework .gfield_required { color: red; }

/* example: required indicator (span) – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 .gfield_required { color: red; }

/* example: required indicator (span) – applies just to a specific field (replace "XX_X") */
.gform-theme--framework .gform_fields #field_1_4 .gfield_required { color: red; }

/* example: form footer (div) – applies to all Orbital forms */
.gform-theme--framework .gform_footer { border: 1px solid red; }

/* example: form footer (div) – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 .gform_footer { border: 1px solid red; }

Submit Button

/* example: submit button – applies to all Orbital forms */
.gform-theme--framework .gform_footer input[type="submit"].gform_button { --gf-ctrl-btn-bg-color-primary: #0096d6; }

/* example: submit button – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1  input[type="submit"] { --gf-ctrl-btn-bg-color-primary: #0096d6; }

Submit Button (Image)

/* example: image submit button – applies to all Orbital forms */
.gform-theme--framework .gform_footer input[type="image"].gform_image_button{ border: 1px solid red; }

/* example: image submit button – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 input[type="image"].gform_image_button { border: 1px solid red; }

Form Confirmation

Inline Confirmation Message

/* example: inline confirmation message – applies to all Orbital forms */
.gform-theme--framework .gform_confirmation_message { border: 1px solid red; }

Note: this assumes an inline confirmation rendered inside the Orbital wrapper, which is the default. If the confirmation isn’t inheriting Orbital scoping, target #gform_confirmation_wrapper_X instead.

Validation Errors

Validation Error Message

/* example: validation error message – applies to all Orbital forms */
.gform-theme--framework .gform_validation_errors { border: 1px solid red; }

Validation – Error Container

/* example: field error container – applies to all Orbital forms */
.gform-theme--framework .gfield_error { border: 1px solid red; }

/* example: field error container – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 .gfield_error { border: 1px solid red; }

Validation – Error Description Message

/* example: field error message – applies to all Orbital forms */
.gform-theme--framework .gfield_validation_message { border: 1px solid red; }

/* example: field error message – applies just to form ID 1 */
.gform-theme--framework#gform_wrapper_1 .gfield_validation_message { border: 1px solid red; }

Multi-Page Form Fields

Multi-Page Form Progress Bar Container

/* example: progress bar container – applies to all Orbital forms */
.gform-theme--framework .gf_progressbar_wrapper { border: 1px solid red; }

/* example: progress bar container – applies just to form ID #1 */
.gform-theme--framework#gform_wrapper_1 .gf_progressbar_wrapper { border: 1px solid red; }

Multi-Page Form Progress Bar Title

/* example: progress bar title – applies to all Orbital forms */
.gform-theme--framework .gf_progressbar_title { color: red; }

/* example: progress bar title – applies just to form ID #1 */
.gform-theme--framework#gform_wrapper_1 .gf_progressbar_title { color: red; }

Multi-Page Form Progress Bar

/* example: progress bar track – applies to all Orbital forms */
.gform-theme--framework .gf_progressbar { border: 1px solid red; }

/* example: progress bar track – applies just to form ID #1 */
.gform-theme--framework#gform_wrapper_1 .gf_progressbar { border: 1px solid red; }

Multi-Page Form Progress Bar – Percentage Completed

/* example: progress bar fill (blue theme class) – applies to all Orbital forms */
.gform-theme--framework .gf_progressbar .gf_progressbar_percentage.percentbar_blue { --gf-field-pg-prog-bar-bg-color-blue: #2563eb; }

/* example: progress bar fill (blue theme class) – form ID #1 */
.gform-theme--framework#gform_wrapper_1 .gf_progressbar .gf_progressbar_percentage.percentbar_blue { --gf-field-pg-prog-bar-bg-color-blue: #1d4ed8; }

Multi-Page Form Steps Container

/* example: steps container – applies to all Orbital forms */
.gform-theme--framework .gf_page_steps { border: 1px solid red; }

/* example: steps container – applies just to form ID #1 */
.gform-theme--framework#gform_wrapper_1 .gf_page_steps { border: 1px solid red; }

Multi-Page Form Step

/* example: step labels – applies to all Orbital forms */
.gform-theme--framework .gf_step_label { color: red; }

/* example: step labels – applies just to form ID #1 */
.gform-theme--framework#gform_wrapper_1 .gf_step_label { color: red; }

Multi-Page Form Active Step

/* example: active step number – applies to all Orbital forms */
.gform-theme--framework .gf_step_active .gf_step_number { color: red; }

/* example: active step number – applies just to form ID #1 */
.gform-theme--framework#gform_wrapper_1 .gf_step_active .gf_step_number { color: red; }

Multi-Page Form Page

/* example: page wrapper – applies to all Orbital forms */
.gform-theme--framework .gform_page { border: 1px solid red; }

/* example: page wrapper – applies just to form ID #1 */
.gform-theme--framework#gform_wrapper_1 .gform_page { border: 1px solid red; }

Multi-Page Form Footer

/* example: page footer – applies to all Orbital forms */
.gform-theme--framework .gform_page_footer  { border: 1px solid red; }

/* example: page footer – applies just to form ID #1 */
.gform-theme--framework#gform_wrapper_1 .gform_page_footer{ border: 1px solid red; }

Multi-Page Form – Next Button

/* example: Next button – applies to all Orbital forms */
.gform-theme--framework .gform_next_button { border: 1px solid red; }

/* example: Next button – applies just to form ID #1 */
.gform-theme--framework#gform_wrapper_1 .gform_next_button { --gf-ctrl-btn-bg-color-primary: #1a365d; }

Multi-Page Form – Previous Button

/* example: Previous button – applies to all Orbital forms */
.gform-theme--framework .gform_previous_button { --gf-ctrl-btn-bg-color-secondary: #f3f4f6; }

/* example: Previous button – applies just to form ID #1 */
.gform-theme--framework#gform_wrapper_1 .gform_previous_button { --gf-ctrl-btn-bg-color-secondary: #eef2ff; }

Multi-Page Form – Submit Button

/* example: Submit on last page – applies to all Orbital forms */
.gform-theme--framework .input[type="submit"] { --gf-ctrl-btn-bg-color-primary: #0096d6; }

/* example: Submit on last page – applies just to form ID #1 */
.gform-theme--framework#gform_wrapper_1 input[type="submit"] { --gf-ctrl-btn-bg-color-primary: #059669; }

More Information

We’ve put together a help guide and a visual CSS diagram to illustrate the structure of a form and the CSS class relationships in a related article.

Additionally, review our CSS targeting examples article for an expanded list of elements.