CSS Visual Guide

Overview

Gravity Forms are structured so that every element can be targeted and manipulated via CSS. Most elements share reusable class names to affect styling, and many elements have unique IDs that you can use to target specific elements within the form. By using CSS inheritance, you can effectively style every element in your form.

All element IDs follow the form ID and field ID pattern (for example #gform_wrapper_1, #field_1_3). The mockup below uses the Orbital class list produced by the theme framework: wrapper gform-theme--*, hyphenated layout hooks gform-body / gform-footer (with legacy twins gform_body / gform_footer), fields container classes from form settings (form_sublabel_below, description_below, validation_below), and each field’s gfield--type-*, visibility, description, validation, and width modifiers. In CSS, scope rules with .gform-theme--framework (see the quick reference). Styling is driven by the CSS API variables (--gf-*). For legacy ul/li markup, see the original CSS guide.

Gravity Forms Orbital Theme

Gravity Forms Orbital Theme – CSS Visual Guide
CSS Class Name Red box Element ID Blue box
#gform_wrapper_1 .gform_wrapper .gform-theme .gform-theme–foundation .gform-theme–framework .gform-theme–orbital
.gform-theme–framework .gform_heading

.gform_title h2 Test Form Alpha

.gform_description p We would love to hear from you! Please fill out this form and we will get in touch with you shortly.

.gform-body · .gform_body
.gform_fields · .top_label · .form_sublabel_below · .description_below · .validation_below #gform_fields_1
.gfield–type-section · .gsection #field_1_1

Section Break

.gsection_description .gfield_description this is a description for the section break

.gfield–type-name · .gfield_contains_required · .gfield–width-full · .gfield_visibility_visible #field_1_2
.ginput_complex .ginput_container .ginput_container–name #input_1_2 .name_first #input_1_2_3_container #input_1_2_3 .name_last #input_1_2_6_container #input_1_2_6
.gfield–type-email · .gfield_contains_required · .gfield–width-full #field_1_3
.ginput_container .ginput_container_email #input_1_3
.gfield–type-address · .gfield_contains_required · .gfield–width-full #field_1_4
.ginput_complex .ginput_container .ginput_container_address #input_1_4 .ginput_full .address_line_1 .ginput_address_line_1 #input_1_4_1_container #input_1_4_1 .ginput_full .address_line_2 .ginput_address_line_2 #input_1_4_2_container #input_1_4_2
.ginput_left .address_city #input_1_4_3_container #input_1_4_3 .ginput_right .address_state #input_1_4_4_container #input_1_4_4 .ginput_left .address_zip #input_1_4_5_container #input_1_4_5
.ginput_right .address_country #input_1_4_6_container #input_1_4_6
.gfield–type-textarea · .gfield–width-full #field_1_5
.ginput_container .ginput_container_textarea #input_1_5
.gfield–type-text · .gfield–has-description · .gfield–width-full #field_1_6
.ginput_container .ginput_container_text #input_1_6
.gfield_description this is the field description
.gfield–type-multi_choice · .gfield–choice-align-vertical · .gfield–width-full #field_1_7
.ginput_container .ginput_container_radio
.gfield_radio
.gchoice #choice_1_7_1
.gfield–type-multi_choice · .gfield–choice-align-vertical · .gfield–width-full #field_1_8
.ginput_container .ginput_container_checkbox
.gfield_checkbox
.gform-footer · .gform_footer · .top_label #gform_submit_button_1

CSS API Variables (Common)

Override these on .gform-theme--framework to style Orbital forms. IDs use {form_id} and {field_id} (e.g. #gform_wrapper_1, #field_1_4).

Variable Scope Purpose
--gf-color-primary Wrapper Primary color (buttons, links, focus)
--gf-ctrl-bg-color Wrapper / field Control background
--gf-ctrl-border-color Wrapper / field Control border color
--gf-ctrl-radius Wrapper Control border radius
--gf-ctrl-label-color-primary Wrapper / field Label color
--gf-ctrl-desc-color Wrapper / field Description text color
--gf-form-gap-x, --gf-form-gap-y Wrapper / body Gap between fields
--gf-padding-x, --gf-padding-y Wrapper Form padding
--gf-ctrl-btn-bg-color-primary Wrapper / footer Submit button background
--gf-ctrl-choice-size Choice field Radio/checkbox size

Selector Quick Reference

Target Selector
All Orbital forms.gform-theme--framework
Specific form.gform-theme--framework#gform_wrapper_{form_id}
Form heading.gform-theme--framework .gform_heading
Form body.gform-theme--framework .gform-body (also .gform_body)
Field list.gform-theme--framework .gform_fields (includes .top_label, .form_sublabel_*, .description_*, .validation_*)
Field by type.gform-theme--framework .gfield--type-{type}
Multiple Choice alignment.gfield--choice-align-vertical / .gfield--choice-align-horizontal
Specific field.gform-theme--framework #field_{form_id}_{field_id}
Name First input#input_{form_id}_{field_id}_3 or .name_first input
Name Last input#input_{form_id}_{field_id}_6 or .name_last input
Address Street#input_{form_id}_{field_id}_1 or .ginput_address_line_1 input
Address City#input_{form_id}_{field_id}_3 or .ginput_address_city input
Address Zip#input_{form_id}_{field_id}_5 or .ginput_address_zip input
Address Country#input_{form_id}_{field_id}_6 or .ginput_address_country select
Form footer.gform-theme--framework .gform-footer (also .gform_footer; label placement class e.g. .top_label)
Submit button#gform_submit_button_{form_id} or .gform_button

Orbital theme · Gravity Forms theme framework · CSS API · Markup matches non-legacy output (div field list and field containers). Field rows use the full class string from the framework (visibility, description, validation placement, sublabel placement, gfield--width-*, and Multiple Choice gfield--choice-align-*). Scope custom CSS with .gform-theme--framework (optionally #gform_wrapper_{id}) so rules apply only to Orbital forms.