Form Heading 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 heading is the top section of the form and includes the form title, form description, and required legend (if enabled).

Container

The heading container uses .gform_heading.

/* example: form heading container – applies to all Orbital forms */
.gform-theme--framework .gform_heading {
	margin-bottom: 24px;
	border-bottom: 1px solid #eee;
}

/* example: form heading container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_heading {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e5e7eb;
}

Title

The form title uses .gform_title rendered as <h2> in Orbital.

/* example: form title – applies to all Orbital forms */
.gform-theme--framework .gform_heading .gform_title {
	color: #1a365d;
	font-size: 24px;
	font-weight: 600;
}

/* example: form title – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_heading .gform_title {
	color: #112337;
	font-size: 28px;
	font-weight: 700;
}

Description

The form description uses .gform_description rendered as <p> in Orbital.

/* example: form description – applies to all Orbital forms */
.gform-theme--framework .gform_heading .gform_description {
	color: #4b5563;
	font-size: 16px;
	line-height: 1.5;
}

/* example: form description – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_heading .gform_description {
	color: #374151;
	font-size: 15px;
	line-height: 1.6;
}

Required Legend

The required legend uses .gform_required_legend.

/* example: required legend – applies to all Orbital forms */
.gform-theme--framework .gform_heading .gform_required_legend {
	--gf-ctrl-label-color-req: #dc2626;
	font-size: 14px;
	color: #6b7280;
}

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

Use Case Examples

Minimal Heading

/* example: heading typography – applies to all Orbital forms */
.gform-theme--framework .gform_heading .gform_title {
	color: #1e293b;
	font-size: 22px;
	font-weight: 600;
}

.gform-theme--framework .gform_heading .gform_description {
	color: #64748b;
	font-size: 15px;
	line-height: 1.6;
	margin-top: 8px;
}

/* example: form-specific */
.gform-theme--framework#gform_wrapper_112 .gform_heading .gform_title {
	font-size: 24px;
}

Accent Heading with Border

/* example: heading with accent – applies to all Orbital forms */
.gform-theme--framework .gform_heading {
	border-left: 4px solid #2563eb;
	padding-left: 16px;
	margin-bottom: 24px;
}

.gform-theme--framework .gform_heading .gform_title {
	color: #1e40af;
	font-size: 24px;
}

.gform-theme--framework .gform_heading .gform_description {
	color: #3b82f6;
	font-size: 16px;
}

/* example: form-specific */
.gform-theme--framework#gform_wrapper_112 .gform_heading {
	border-left-color: var(--gf-color-primary);
}

CSS API Reference

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