Email Field 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 Email field renders an input[type=”email”] for a valid email entry.

In Single Mode, one email input is displayed. In Confirmation Mode, two inputs are displayed side by side: Enter Email and Confirm Email.

When Enable Email Confirmation is enabled, two inputs are displayed using .ginput_complex, each placed in .ginput_left and .ginput_right containers. The layout uses the grid system (gform-grid-row, gform-grid-col), and the field uses a fieldset wrapper instead of a div.

For full variable definitions, see the CSS API documentation.

Container

The Email field uses the standard field structure:

  • .gfield
  • .gfield–type-email (or .gfield–input-type-email)
  • .ginput_container_email

In single mode, the container is a simple div. In confirmation mode, the container uses .ginput_complex.ginput_container.ginput_container_email. The two-column layout is handled with gform-grid-row, gform-grid-col, and gform-grid-col–size-auto.

Each field also includes an ID in the format field_{form_id}_{field_id} (e.g. field_5_3 for form 5, field 3).

.gform-theme--framework .gfield--type-email {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
	padding: 8px 0;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-email {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
	padding: 8px 0;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-radius: 6px;
}

Input

The email input inherits control styling from the framework. Use the standard control variables on the field or form scope. The input uses type=”email”. Both single-mode and confirmation-mode inputs receive the same framework styling.

.gform-theme--framework .gfield--type-email {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-bg-color-focus: #ffffff;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-border-color-hover: #b8bcc4;
	--gf-ctrl-font-size: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-email {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-email input {
	max-width: 300px;
}

Confirm Email Layout

When Enable Email Confirmation is enabled, the field renders two inputs in a grid: Enter Email (.ginput_left) and Confirm Email (.ginput_right).

The container uses .ginput_complex.ginput_container.ginput_container_email. Spacing is controlled using –gf-field-gap-x for horizontal spacing between inputs and –gf-field-gap-y for vertical spacing if the inputs wrap.

.gform-theme--framework .gfield--type-email .ginput_complex.ginput_container_email {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-border-color: #e5e7eb;
	--gf-field-gap-x: 24px;
	--gf-field-gap-y: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-email .ginput_complex.ginput_container_email {
	--gf-field-gap-x: 32px;
}

Sub-Labels (Enter Email / Confirm Email)

When email confirmation is enabled, each input has a sub-label: “Enter Email” and “Confirm Email”. These use the class .gform-field-label–type-sub and inherit styling from –gf-ctrl-label-color-secondary and –gf-ctrl-label-font-size-secondary.

.gform-theme--framework .gfield--type-email .gform-field-label--type-sub {
	--gf-ctrl-label-color-tertiary: #1a365d;
	--gf-ctrl-label-font-size-tertiary: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-email .gform-field-label--type-sub {
	--gf-ctrl-label-color-tertiary: #112337;
	--gf-ctrl-label-font-size-tertiary: 14px;
}

Field Label

The main field label uses the standard .gform-field-label. Override the following variables on .gfield–type-email to customize styling:

  • –gf-ctrl-label-color-primary
  • –gf-ctrl-label-font-size-primary
.gform-theme--framework .gfield--type-email {
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-ctrl-label-font-size-primary: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-email {
	--gf-ctrl-label-color-primary: #112337;
	--gf-ctrl-label-font-size-primary: 18px;
}

Field Description

When a description is set, it appears above or below the field depending on the form’s description placement. Use the following variables to style the description:

  • –gf-ctrl-desc-color
  • –gf-ctrl-desc-font-size
.gform-theme--framework .gfield--type-email {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
}

Validation Message

Validation messages appear when an invalid email is entered or confirmation emails do not match. Messages appear in a div with the classes gfield_description, validation_message, and gfield_validation_message.

Use the error variables to style them:

  • –gf-ctrl-desc-color-error
  • –gf-ctrl-desc-font-size-error
.gform-theme--framework .gfield--type-email .gfield_validation_message {
	--gf-ctrl-desc-color-error: #c02b0a;
	--gf-ctrl-desc-font-size-error: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-email .gfield_validation_message {
	--gf-ctrl-desc-color-error: #b91c1c;
	--gf-ctrl-desc-font-size-error: 13px;
}

Use Case Examples

Email Field With Accent Border

.gform-theme--framework .gfield--type-email {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-border-color-hover: #044ad3;
	--gf-ctrl-radius: 6px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-email {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-radius: 6px;
}

Targeting a Specific Email Field

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-bg-color: #f8fafc;
	--gf-ctrl-label-color-primary: #0f172a;
	--gf-ctrl-desc-color: #64748b;
}

Confirm Email Layout With Wider Gap

.gform-theme--framework .gfield--type-email .ginput_complex.ginput_container_email {
	--gf-field-gap-x: 32px;
}

.gform-theme--framework .gfield--type-email {
	--gf-ctrl-label-color-secondary: #374151;
	--gf-ctrl-label-font-size-secondary: 15px;
}

CSS API Reference

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