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 Consent field displays a single checkbox, an inline label, and an optional agreement description. It shares choice-field markup with checkboxes and radios.
Key selectors include .gfield--type-consent, .gfield--type-choice, and .ginput_container_consent.
The checkbox label uses .gform-field-label.gform-field-label--type-inline.gfield_consent_label. The agreement text appears in .gfield_consent_description.
The checkbox uses native browser styling with Orbital variables --gf-ctrl-choice-size and --gf-ctrl-checkbox-check-size.
For full variable definitions, see the CSS API documentation.
Main Field Container
The Consent field uses .gfield--type-consent and .gfield--type-choice. Each field includes an ID in the format field_{form_id}_{field_id}. Example: field_5_3.
/* example: consent field main container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-consent {
--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: consent field main container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-consent {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-radius: 6px;
}
/* example: specific consent field – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-radius: 6px;
}
Checkbox Label
The label uses .gfield_consent_label and .gform-field-label--type-inline.
/* example: consent field checkbox label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-consent .gfield_consent_label,
.gform-theme--framework .gfield--type-consent .gform-field-label--type-inline {
--gf-ctrl-label-color-secondary: #1a365d;
--gf-ctrl-label-font-size-secondary: 16px;
}
/* example: consent field checkbox label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield_consent_label {
--gf-ctrl-label-color-secondary: #112337;
--gf-ctrl-label-font-size-secondary: 14px;
}
Input (Checkbox)
The checkbox is input[type="checkbox"] inside .ginput_container_consent.
/* example: consent field checkbox – applies to all Orbital forms */
.gform-theme--framework .gfield--type-consent {
--gf-ctrl-choice-size: 24px;
--gf-ctrl-checkbox-check-size: 14px;
--gf-ctrl-choice-check-color: #4f46e5;
}
/* example: consent field checkbox – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-consent {
--gf-ctrl-choice-size: 18px;
--gf-ctrl-checkbox-check-size: 12px;
}
Description (Agreement Text)
The agreement text appears in .gfield_consent_description. The ID format is gfield_consent_description_{form_id}_{field_id}.
/* example: consent field agreement description – applies to all Orbital forms */
.gform-theme--framework .gfield_consent_description {
--gf-ctrl-desc-border-color-consent: #e5e7eb;
--gf-ctrl-desc-border-width-consent: 1px;
--gf-ctrl-desc-max-height-consent: 400px;
color: #6b7280;
font-size: 14px;
}
/* example: consent field agreement description – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield_consent_description {
--gf-ctrl-desc-border-color-consent: #d2d5db;
color: #4b5563;
font-size: 13px;
}
Use Case Examples
Larger Checkbox with Emphasized Label
/* example: larger consent checkbox – applies to all Orbital forms */
.gform-theme--framework .gfield--type-consent {
--gf-ctrl-choice-size: 24px;
--gf-ctrl-checkbox-check-size: 16px;
--gf-ctrl-label-color-secondary: #1e293b;
}
/* example: same – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-consent {
--gf-ctrl-choice-size: 20px;
}
Styling the Agreement Box
/* example: consent agreement box styling – applies to all Orbital forms */
.gform-theme--framework .gfield_consent_description {
--gf-ctrl-desc-border-color-consent: #cbd5e1;
--gf-ctrl-desc-border-width-consent: 2px;
--gf-ctrl-desc-max-height-consent: 300px;
padding: 16px;
}
Targeting a Specific Consent Field by ID
/* example: specific consent field – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-label-color-secondary: #0f172a;
--gf-ctrl-choice-check-color: #6366f1;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.