Website 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 Website field renders a single input[type=”url”] for a valid website URL entry.

Browsers may provide native validation and URL-specific autocomplete behavior. The field size setting (small, medium, or large) affects the input width.

For full variable definitions, see the CSS API documentation.

Container

The Website field uses the standard field structure:

  • .gfield
  • .gfield–type-website
  • .ginput_container_website

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

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

.gform-theme--framework#gform_wrapper_112 .gfield--type-website {
	--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 Website input inherits control styling from the Orbital framework. Use the standard control variables on the field or form scope to modify appearance. The input uses type=”url” which enables browser-level URL validation.

.gform-theme--framework .gfield--type-website {
	--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-website {
	--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-website input[type="url"] {
	max-width: 400px;
}

Field Label

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

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

.gform-theme--framework#gform_wrapper_112 .gfield--type-website {
	--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 text:

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

Validation Message

Validation messages appear when an invalid website URL is entered (for example a malformed URL or missing protocol). Messages appear in .validation_message and .gfield_validation_message.

Use –gf-ctrl-desc-color-error (and –gf-ctrl-desc-font-size-error if needed) for error styling.

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

.gform-theme--framework#gform_wrapper_112 .gfield--type-website .gfield_validation_message {
	--gf-ctrl-desc-color-error: #b91c1c;
}

Use Case Examples

Website Field With Accent Border

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

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

Targeting a Specific Website 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;
}

CSS API Reference

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