Example: Changing Font Sizes

Overview

When using the Orbital theme, Gravity Forms adds theme-specific classes to the form wrapper. If you need to override styles, scope your CSS to Orbital so your rules don’t accidentally affect legacy or Gravity Forms 2.5 Theme forms.

Use .gform-theme--framework and #gform_wrapper_{id} on the same node when you need one form.

Orbital forms include the class .gform-theme--orbital on the wrapper, which narrows to the Orbital visual layer if you need that extra specificity.

Refer to the linked article for guidance on where to add the CSS snippet.

Entire Form Example

Change the base font size for the whole form:

.gform-theme--framework {
	font-size: 18px;
}

Field Headers Example

Change the font size of all field labels:

/* Using custom properties and veriables */

.gform-theme--framework .gfield_label {
	--gf-ctrl-label-font-size-primary: 18px;
}

/* Not using custom properties and veriables */

.gform-theme--framework .gfield_label {
	font-size: 18px;
}

Field Inputs Example

Change the font size of common input controls:

.gform-theme--framework :is(input, select, textarea) {
	font-size: 18px;
}

Specific Field Example

Change the font size for the input in field #1 on form #6:

.gform-theme--framework #field_1926_44 :is(input, select, textarea) {
	font-size: 18px;
}

Alternatively, you can target the input directly by its ID (example: #input_6_1).