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.
Sub-fields use the following classes within .ginput_container--name:
.name_first.name_last.name_prefix.name_middle.name_suffix
Sub-labels use .gform-field-label--type-sub.
The layout follows the form grid system:
.gform-grid-row.gform-grid-col
Prefix and Suffix may render as text inputs or select dropdowns when choices are configured.
When Orbital markup is enabled, the field uses a fieldset wrapper.
For full variable definitions, see the CSS API documentation.
Main Field Container
The Name field uses a fieldset wrapper with .gfield--type-name and an inner container:
.ginput_container--name.ginput_container.ginput_container_name(in some contexts)
Each field also includes an ID in the format: field_{form_id}_{field_id}
Example: field_5_3 (form 5, field 3).
/* example: name field main container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
/* example: name field main container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-name {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-desc-font-size: 14px;
}
/* example: specific name field – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-radius: 6px;
}
First Name
Container
The First Name container uses .name_first within .ginput_container--name.
/* example: first name container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .name_first {
--gf-ctrl-radius: 6px;
}
/* example: first name container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-name .name_first {
--gf-ctrl-radius: 6px;
}
Input
/* example: first name input – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .name_first {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-font-size: 16px;
}
/* example: first name input – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-name .name_first {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-font-size: 16px;
}
Sub-Label
Sub-labels use .gform-field-label--type-sub. In the Orbital / framework theme, those labels read the tertiary label tokens.
Override these on the sub-container (e.g. .name_first, .name_last, etc.):
--gf-ctrl-label-color-tertiary--gf-ctrl-label-font-size-tertiary
Optional if you need full control: --gf-ctrl-label-font-family-tertiary, --gf-ctrl-label-font-weight-tertiary, --gf-ctrl-label-font-style-tertiary, --gf-ctrl-label-letter-spacing-tertiary, --gf-ctrl-label-line-height-tertiary.
/* example: first name sub-label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .name_first {
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 16px;
}
/* example: first name sub-label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-name .name_first {
--gf-ctrl-label-color-tertiary: #112337;
}
Last Name
Container
The Last Name container uses .name_last.
/* example: last name container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .name_last {
--gf-ctrl-radius: 6px;
}
/* example: last name container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-name .name_last {
--gf-ctrl-radius: 6px;
}
Input
/* example: last name input – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .name_last {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-font-size: 16px;
}
/* example: last name input – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-name .name_last {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-font-size: 16px;
}
Sub-Label
/* example: last name sub-label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .name_last {
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 16px;
}
/* example: last name sub-label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-name .name_last {
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 16px;
}
Prefix
The Prefix container uses .name_prefix. You can also use .name_prefix_select when rendered as a select dropdown. Visible only when Prefix is enabled.
/* example: prefix container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .name_prefix {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 16px;
}
/* example: prefix input/select – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .name_prefix {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
}
Middle Name
The Middle Name container uses .name_middle. Visible only when Middle is enabled.
/* example: middle name container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .name_middle {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 16px;
}
/* example: middle name input – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .name_middle {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
}
Suffix
The Suffix container uses .name_suffix. It may include .name_suffix_select when rendered as a select dropdown. Visible only when Suffix is enabled.
/* example: suffix container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .name_suffix {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 16px;
}
/* example: suffix input/select – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .name_suffix {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
}
Layout and Grid Spacing
Sub-fields are arranged in a grid. Spacing between sub-fields is controlled by:
--gf-field-gap-x— horizontal spacing--gf-field-gap-y— vertical spacing
/* example: name field grid spacing – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .ginput_container--name {
--gf-field-gap-x: 32px;
}
/* example: name field grid spacing – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-name .ginput_container--name {
--gf-field-gap-x: 32px;
}
Field Description
When a description is set, it appears above or below the field, depending on the form’s description placement.
/* example: name field description – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Use Case Examples
Name Field With Accent Border On All Inputs
/* example: name field with accent border – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-border-color-hover: #044ad3;
--gf-ctrl-radius: 6px;
}
/* example: same – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-name {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-radius: 6px;
}
Styling Only First and Last Name Inputs (Extended Format)
css
/* example: first and last name inputs only – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .name_first,
.gform-theme--framework .gfield--type-name .name_last {
--gf-ctrl-bg-color: #f8fafc;
--gf-ctrl-border-color: #cbd5e1;
}
Targeting A Specific Name Field By ID
/* example: specific name field by ID – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-bg-color: #f8fafc;
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 16px;
--gf-ctrl-desc-color: #64748b;
}
Wider Spacing Between Name Sub-Fields
/* example: name sub-fields with more spacing – applies to all Orbital forms */
.gform-theme--framework .gfield--type-name .ginput_container--name {
--gf-field-gap-x: 32px;
--gf-field-gap-y: 20px;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.