Form Body CSS Selectors

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 form body contains all main form content, including the field list, all form fields, and field descriptions and inputs.

Container

The form body uses .gform_body and .gform-body.

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

/* example: form body container – applies to all Orbital forms */
.gform-theme--framework .gform_body {
	border: 1px solid red;
	padding: 25px;
}

/* example: form body container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_body {
	border: 1px solid red;
	padding: 25px;
}

Field List

Container

The field list uses .gform_fields and gform_fields_{form_id}.

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

/* example: field list – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_fields {
	border: 1px solid red;
	padding: 25px;
}

List Items (Fields)

Each field uses .gfield and field_{form_id}_{field_id}.

/* example: field items – applies to all Orbital forms */
.gform-theme--framework .gform_fields .gfield {
	border: 1px solid red;
	padding: 25px;
}

/* example: field items – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_fields .gfield {
	border: 1px solid red;
	padding: 25px;
}

/* example: specific field */
.gform-theme--framework#gform_wrapper_112 #field_112_4.gfield {
	border: 1px solid red;
	padding: 25px;
}

Field Inputs

Input Container

The input wrapper uses .ginput_container.

/* example: input container – applies to all Orbital forms */
.gform-theme--framework .gfield .ginput_container {
	padding-block-start: 4px;
}

/* example: input container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield .ginput_container {
	padding-inline: 2px 0;
}

/* example: specific field input container */
.gform-theme--framework .gform_fields #field_112_4.gfield .ginput_container {
	--gf-ctrl-bg-color: #f9fafb;
}

Description Container

The description uses .gfield_description.

/* example: description container – applies to all Orbital forms */
.gform-theme--framework .gfield .gfield_description {
	--gf-ctrl-desc-color: #4b5563;
	--gf-ctrl-desc-font-size: 14px;
	--gf-ctrl-desc-line-height: 1.5;
}

/* example: description – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield .gfield_description {
	--gf-ctrl-desc-color: #374151;
	--gf-ctrl-desc-font-size: 15px;
}

/* example: specific field description */
.gform-theme--framework .gform_fields #field_112_4.gfield .gfield_description {
	--gf-ctrl-desc-font-size: 16px;
}

Required Field Indicator

The required indicator uses .gfield_required.

/* example: required indicator – applies to all Orbital forms */
.gform-theme--framework .gform-field-label .gfield_required {
	--gf-ctrl-label-color-req: #dc2626;
	--gf-ctrl-label-font-size-req: 14px;
}

/* example: required indicator – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform-field-label .gfield_required {
	--gf-ctrl-label-color-req: #b91c1c;
}

/* example: specific field required indicator */
.gform-theme--framework .gform_fields #field_112_4.gfield .gform-field-label .gfield_required {
	--gf-ctrl-label-font-size-req: 12px;
}

Use Case Examples

Tighter Field Spacing

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

/* example: reduced spacing – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_fields {
	--gf-form-gap-y: 20px;
}

Body and Description Typography

/* example: description styling – applies to all Orbital forms */
.gform-theme--framework .gform_body .gfield .gfield_description {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
	--gf-ctrl-desc-line-height: 1.6;
}

/* example: description styling – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_body .gfield .gfield_description {
	--gf-ctrl-desc-font-size: 15px;
}

Form Body with Visual Separation

/* example: form body with border – applies to all Orbital forms */
.gform-theme--framework .gform_body {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 24px;
}

/* example: form body with border – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_body {
	border-color: #d1d5db;
	padding: 32px;
}

CSS API Reference

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