Multi-Page Forms 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.

Multi-Page Forms CSS Selectors

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.

Multi-page forms split content across multiple steps. Features include a progress bar, step indicators, page navigation (Next / Previous / Submit), and Save and Continue.

Page wrapper uses .gform_page the ID gform_page_{form_id}_{page_number} (e.g. gform_page_1_2). Each page footer uses .gform_page_footer.

For full variable definitions, see the CSS API documentation.

Progress Bar

Container

/* example: progress bar and steps container – applies to all Orbital forms */
.gform-theme--framework .gf_progressbar_wrapper,
.gform-theme--framework .gf_page_steps {
	--gf-field-pg-prog-margin-y-end: 32px;
}

/* example: progress bar container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gf_progressbar_wrapper {
	--gf-field-pg-prog-margin-y-end: 24px;
}

Title

/* example: progress bar title – applies to all Orbital forms */
.gform-theme--framework .gf_progressbar_title {
	--gf-field-pg-prog-color: #1a365d;
	--gf-field-pg-prog-font-size: 14px;
	--gf-field-pg-prog-font-weight: 600;
	--gf-field-pg-prog-title-margin-y-end: 12px;
}

/* example: progress bar title – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gf_progressbar_title {
	--gf-field-pg-prog-color: #374151;
	--gf-field-pg-prog-font-size: 16px;
}

Progress Bar Track

/* example: progress bar track – applies to all Orbital forms */
.gform-theme--framework .gf_progressbar {
	--gf-field-pg-prog-bar-bg-color: #e5e7eb;
	--gf-field-pg-prog-bar-radius: 100px;
	--gf-field-pg-prog-bar-height: 12px;
}

/* example: progress bar percentage (blue) */
.gform-theme--framework#gform_wrapper_112 .gf_progressbar .gf_progressbar_percentage.percentbar_blue {
	--gf-field-pg-prog-bar-bg-color-blue: #2563eb;
}

/* example: progress bar percentage (gray) */
.gform-theme--framework#gform_wrapper_112 .gf_progressbar .gf_progressbar_percentage.percentbar_gray {
	--gf-field-pg-prog-bar-bg-color-gray: #4b5563;
}

Percentage Number

/* example: show percentage number – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gf_progressbar .gf_progressbar_percentage span {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 0 8px;
	clip: auto;
	color: #374151;
	font-size: 13px;
	line-height: 1.5;
}

Steps

Container

/* example: steps container – applies to all Orbital forms */
.gform-theme--framework .gf_page_steps {
	--gf-field-pg-prog-margin-y-end: 24px;
}

/* example: steps spacing – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gf_page_steps {
	--gf-field-pg-steps-gap-y: 12px;
	--gf-field-pg-steps-gap-x: 24px;
}

All Steps

/* example: step typography – applies to all Orbital forms */
.gform-theme--framework .gf_page_steps .gf_step_number,
.gform-theme--framework .gf_page_steps .gf_step_label {
	--gf-field-pg-prog-color: #374151;
	--gf-field-pg-prog-font-size: 14px;
	--gf-field-pg-prog-font-weight: 600;
}

/* example: step gap */
.gform-theme--framework#gform_wrapper_112 .gf_step {
	--gf-field-pg-steps-step-gap: 12px;
}

Active Step

/* example: active step – applies to all Orbital forms */
.gform-theme--framework .gf_step_active .gf_step_number {
	--gf-field-pg-steps-number-bg-color-active: #f3f4f6;
	--gf-field-pg-steps-number-border-color-active: transparent;
	--gf-field-pg-steps-number-color-active: #1f2937;
}

/* example: active step – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gf_step_active .gf_step_number {
	--gf-field-pg-steps-number-bg-color-active: #e0e7ff;
	--gf-field-pg-steps-number-color-active: #3730a3;
}

Pending Step

/* example: pending step */
.gform-theme--framework .gf_step_pending .gf_step_number {
	--gf-field-pg-steps-number-bg-color: transparent;
	--gf-field-pg-steps-number-border-color: #d1d5db;
	--gf-field-pg-steps-number-color: #6b7280;
}

Completed Step

/* example: completed step – applies to all Orbital forms */
.gform-theme--framework .gf_step_completed .gf_step_number {
	--gf-field-pg-steps-number-bg-color-complete: #0096d6;
	--gf-field-pg-steps-number-border-color-complete: #0096d6;
	--gf-field-pg-steps-number-color-complete: #ffffff;
}

/* example: completed step – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gf_step_completed .gf_step_number {
	--gf-field-pg-steps-number-bg-color-complete: #059669;
	--gf-field-pg-steps-number-border-color-complete: #059669;
}

Page

/* example: page wrapper – applies to all Orbital forms */
.gform-theme--framework .gform_page {
	padding-block: 24px;
}

/* example: page wrapper – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_page {
	margin-block-end: 16px;
}

/* example: specific page */
.gform-theme--framework#gform_wrapper_1 #gform_page_1_2 {
	border-block-start: 1px solid #e5e7eb;
	padding-block-start: 32px;
}

Footer

/* example: page footer – applies to all Orbital forms */
.gform-theme--framework .gform_page_footer {
	--gf-form-footer-margin-y-start: 24px;
	--gf-form-footer-gap: 12px;
}

/* example: page footer – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_page_footer {
	--gf-form-footer-margin-y-start: 32px;
}

Buttons

Next Button

/* example: Next button – applies to all Orbital forms */
.gform-theme--framework .gform_next_button {
	--gf-ctrl-btn-bg-color-primary: #0096d6;
	--gf-ctrl-btn-bg-color-hover-primary: #0077b3;
	--gf-ctrl-btn-color-primary: #ffffff;
	--gf-ctrl-btn-radius: 6px;
	--gf-ctrl-btn-font-size: 16px;
}

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

/* example: specific Next button */
.gform-theme--framework#gform_wrapper_1 #gform_next_button_1_2 {
	--gf-ctrl-btn-font-size: 14px;
}

Previous Button

/* example: Previous button – applies to all Orbital forms */
.gform-theme--framework .gform_previous_button {
	--gf-ctrl-btn-bg-color-secondary: #f3f4f6;
	--gf-ctrl-btn-bg-color-hover-secondary: #e5e7eb;
	--gf-ctrl-btn-border-color-secondary: #d2d5db;
	--gf-ctrl-btn-color-secondary: #374151;
	--gf-ctrl-btn-radius: 6px;
}

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

Submit Button (Last Page)

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

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

Use Case Examples

Custom Progress Bar Colors

/* example: blue progress bar */
.gform-theme--framework .gf_progressbar .gf_progressbar_percentage.percentbar_blue {
	--gf-field-pg-prog-bar-bg-color-blue: #3b82f6;
}

/* example: green progress bar – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gf_progressbar .gf_progressbar_percentage.percentbar_green {
	--gf-field-pg-prog-bar-bg-color-green: #10b981;
}

Steps with Accent Color

/* example: completed steps use primary color */
.gform-theme--framework .gf_step_completed .gf_step_number {
	--gf-field-pg-steps-number-bg-color-complete: transparent;
	--gf-field-pg-steps-number-border-color-complete: #d1d5db;
	--gf-field-pg-steps-number-color-complete: #6b7280;
}

/* example: custom accent – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gf_step_completed .gf_step_number {
	--gf-field-pg-steps-number-bg-color-complete: #7c3aed;
	--gf-field-pg-steps-number-border-color-complete: #7c3aed;
	--gf-field-pg-steps-number-color-complete: #ffffff;
}

CSS API Reference

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