CSS Visual Guide and Design Overview

• Element Relationships
• Element Naming
• Theme and Markup Classes
• Orbital (Default)
• Legacy Mode
• Configurable Classes
• Label Position Classes
• Field Type Classes
• Field Size (via CSS API)
• Custom Classes
• Theme Framework and CSS API
• Overview
• Primary Approach: Override Variables on the Wrapper
• Utility Classes
• CSS Ready Classes (Legacy)
• CSS Targeting Examples
• Scope Patterns
• Example: Form Color Theme
• Example: Control Styling
• Example: Form Layout and Spacing
• CSS API Reference

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.

The Orbital theme is built on the Gravity Forms theme framework. Styling is driven primarily by the CSS API — custom properties (--gf-*) that you override on the form wrapper or appropriate scope. The framework provides consistent defaults for controls, labels, descriptions, buttons, and layout; you customize by overriding these variables rather than targeting raw elements.

For full CSS API variable definitions, see the separate CSS API documentation.

Element Relationships

We’ve put together a visual guide to the Gravity Forms CSS hierarchy to illustrate the structure of a form and the class relationship.

You can access it in a few formats:

• View Orbital Visual CSS Guide (HTML Version) — Orbital/theme framework structure with class and ID annotations
• View Legacy Visual CSS Guide (HTML Version)
• Download Legacy Guide (PNG)

Note: The Orbital guide shows the theme framework structure with div-based markup. The form wrapper receives gform-theme, gform-theme--foundation, gform-theme--framework, and gform-theme--orbital. The ID structure (#gform_wrapper_{form_id}, #field_{form_id}_{field_id}) remains the same as legacy.

Element Naming

Gravity Forms are structured so that every element can be targeted and manipulated via CSS. Most elements share reusable class names for styling, and many have unique IDs for targeting specific elements.

All element IDs follow this pattern:

• #gform_wrapper_{form_id} — where {form_id} is the form ID (e.g. #gform_wrapper_1 for form 1)
• #field_{form_id}_{field_id} — where {form_id} is the form ID and {field_id} is the field ID (e.g. #field_1_4 for field 4 in form 1)

By using CSS inheritance, you can effectively style every element in your form. In Orbital, variable overrides cascade from the form wrapper to child elements.

Theme and Markup Classes

Orbital (Default)

Forms using the Orbital theme receive these classes on the form wrapper (div.gform_wrapper):

• gform-theme — Base theme class
• gform-theme--foundation — Foundation layer (layout, reset, base variables)
• gform-theme--framework — Framework layer (control styles, CSS API)
• gform-theme--orbital — Orbital theme (visual look and feel)

The form wrapper also has the data-form-theme attribute (e.g. data-form-theme="orbital"). Use .gform-theme--framework as the primary selector for styling Orbital forms; it is the scope where CSS API variables are consumed and overridden.

Legacy Mode

When legacy mode is enabled for a form, the wrapper receives gform_legacy_markup_wrapper instead of the Orbital theme classes. Legacy forms use different markup (e.g. ul/li for choice fields) and do not use the theme framework CSS API. Use the legacy CSS selector documentation for those forms.

Configurable Classes

Label Position Classes

Three label placement classes are applied based on Form Settings → Form Layout:

• .top_label — Label above the field (default)
• .left_label — Label to the left of the field
• .right_label — Label to the right of the field

These are applied to the form body and footer. Other elements (e.g. field layout, input container width) adjust based on inheritance. The theme framework uses --gf-label-width for left/right label layouts.

Field Type Classes

Each field has a .gfield--type-{type} class (e.g. .gfield--type-text, .gfield--type-checkbox, .gfield--type-email). Use these to target fields by type:

/* example: all text fields – applies to all Orbital forms */
.gform-theme--framework .gfield--type-text {
	--gf-ctrl-label-font-size-primary: 18px;
}

/* example: checkboxes only – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-checkbox {
	--gf-field-choice-gap: 16px;
}

Field Size (via CSS API)

Orbital uses the theme framework CSS API for field control sizing rather than .small, .medium, and .large classes. Override variables such as --gf-ctrl-border-size, --gf-ctrl-padding-block, --gf-ctrl-padding-inline, and type-specific variables (e.g. --gf-ctrl-choice-size for radio/checkbox) on the form wrapper or field scope.

Custom Classes

You can add custom CSS classes in Form Settings → Form Layout → CSS Class Name (e.g. my_form). Gravity Forms appends _wrapper and applies it to the form wrapper (e.g. my_form_wrapper). Use this for form-specific styling:

/* example: custom class – applies to form with class "my_form" */
.gform-theme--framework.my_form_wrapper {
	--gf-ctrl-bg-color: #fafafa;
}

/* example: custom class on specific form – applies to form ID #112 with class "dark_theme" */
.gform-theme--framework#gform_wrapper_112.dark_theme_wrapper {
	--gf-color-primary: #60a5fa;
	background-color: #1f2937;
}

At the field level, the Custom CSS Class setting in the field’s Appearance tab adds your class directly to the field wrapper (e.g. .gfield.my_custom_class).

Theme Framework and CSS API

Overview

The theme framework provides:

• Design tokens — Base variables (colors, typography, radius) in --gf-color-*, --gf-font-*, --gf-radius, etc.
• Control props — Element-specific variables (e.g. --gf-ctrl-bg-color, --gf-ctrl-label-color-primary, --gf-ctrl-radius) that consume tokens and apply to form controls, labels, descriptions, and buttons.
• Layout variables — Spacing and structure (e.g. --gf-form-gap-x, --gf-form-gap-y, --gf-field-gap-x, --gf-padding-x).

Most styling is done by overriding --gf-* variables on .gform-theme--framework (or a more specific scope). Direct property application to elements should be used only when no variable exists for that property.

Primary Approach: Override Variables on the Wrapper

Set variables on .gform-theme--framework (or .gform-theme--framework#gform_wrapper_{form_id} for a specific form. These cascade to all form UI:

/* example: global form styling – applies to all Orbital forms */
.gform-theme--framework {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-color-primary: #2563eb;
	--gf-ctrl-radius: 6px;
}

/* example: form-specific styling – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 {
	--gf-color-primary: #059669;
	--gf-ctrl-btn-bg-color-primary: #059669;
}

Utility Classes

The theme framework provides utility classes for selective control:

• .gform-theme__disable — Disables theme framework and reset styles
• .gform-theme__disable-framework — Disables theme framework styles only
• .gform-theme__disable-reset — Disables theme framework reset styles only
• .gform-theme__no-reset--el — Excludes element from reset
• .gform-theme__no-reset--children — Excludes element’s children from reset

Apply these to the form wrapper or parent element when you need to opt out of framework styling.

CSS Ready Classes (Legacy)

Using Ready Classes, you could create alternative layouts for fields in legacy forms. The column and inline ready classes were deprecated with the improvements made to the form editor in Gravity Forms 2.5.

In Orbital, layout is controlled by the form editor’s built-in layout options (e.g. column/row settings), CSS API variables (--gf-form-gap-x, --gf-form-gap-y, --gf-label-width), and field-level custom classes and variable overrides.

See the Form Body CSS Selectors and field-specific selector docs for layout customization.

CSS Targeting Examples

Scope Patterns

• All Orbital forms: .gform-theme--framework — Global changes
• Specific form by ID: .gform-theme--framework#gform_wrapper_{form_id} — One form
• Forms on a page: .page-id-{page_id} .gform-theme--framework — Forms on a specific WordPress page
• All fields of a type: .gform-theme--framework .gfield--type-{type} — e.g. all text fields
• Specific field: .gform-theme--framework #field_{form_id}_{field_id} — One field

Example: Form Color Theme

/* example: color theme – applies to all Orbital forms */
.gform-theme--framework {
	--gf-color-primary: #2563eb;
	--gf-color-primary-darker: #1d4ed8;
	--gf-ctrl-label-color-primary: #1e3a5f;
	--gf-ctrl-desc-color: #4b5563;
}

/* example: color theme – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 {
	--gf-color-primary: #059669;
	--gf-color-primary-darker: #047857;
}

Example: Control Styling

/* example: input and control styling – applies to all Orbital forms */
.gform-theme--framework {
	--gf-ctrl-bg-color: #fff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-border-color: #d1d5db;
	--gf-ctrl-radius: 6px;
}

Example: Form Layout and Spacing

/* example: form spacing – applies to all Orbital forms */
.gform-theme--framework {
	--gf-form-gap-x: 24px;
	--gf-form-gap-y: 32px;
	--gf-padding-x: 20px;
	--gf-padding-y: 16px;
}

/* example: centered form with max-width – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

For more detailed selector documentation by component (wrapper, heading, body, footer, submit button, validation, fields), see the individual CSS Selector docs in this section.

CSS API Reference

For full variable definitions, see the CSS API documentation.