<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gravity Forms Orbital Theme – CSS Visual Guide</title>
<style>
:root {
--gf-color-primary: #2563eb;
--gf-ctrl-bg-color: #fff;
--gf-ctrl-border-color: #d1d5db;
--gf-ctrl-label-color-primary: #1e3a5f;
--gf-ctrl-desc-color: #4b5563;
--gf-ctrl-radius: 6px;
--gf-form-gap-x: 24px;
--gf-form-gap-y: 32px;
--gf-padding-x: 24px;
--gf-padding-y: 20px;
/* Annotation colors – match original guide */
--gf-annote-class-bg: #fde8e8;
--gf-annote-class-border: #c02b0a;
--gf-annote-class-text: #8b1a0a;
--gf-annote-id-bg: #dbeafe;
--gf-annote-id-border: #1d4ed8;
--gf-annote-id-text: #1e40af;
}
* { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.5;
color: #1e293b;
background: #f8fafc;
margin: 0;
padding: 24px;
}
/* Header – match original dark grey */
.gf-guide-header {
background: #374151;
color: #fff;
padding: 20px 24px;
margin: -24px -24px 24px -24px;
}
.gf-guide-header h1 {
margin: 0;
font-size: 22px;
font-weight: 600;
}
.gf-guide-intro {
max-width: 680px;
margin-bottom: 24px;
font-size: 14px;
color: #4b5563;
}
.gf-guide-intro strong { color: #1e293b; }
.gf-guide-intro a { color: var(--gf-color-primary); }
/* Color key */
.gf-color-key {
display: flex;
gap: 24px;
margin-bottom: 20px;
font-size: 13px;
font-weight: 600;
}
.gf-color-key span {
display: inline-flex;
align-items: center;
gap: 8px;
}
.gf-color-key .key-class {
background: var(--gf-annote-class-bg);
border: 2px solid var(--gf-annote-class-border);
color: var(--gf-annote-class-text);
padding: 4px 10px;
border-radius: 4px;
}
.gf-color-key .key-id {
background: var(--gf-annote-id-bg);
border: 2px solid var(--gf-annote-id-border);
color: var(--gf-annote-id-text);
padding: 4px 10px;
border-radius: 4px;
}
/* Annotation badges – red for class, blue for ID */
.gf-annote {
position: relative;
}
.gf-annote-line {
display: block;
margin-bottom: 4px;
line-height: 1.4;
}
.gf-annote-class,
.gf-annote-id {
display: inline-block;
font-family: "SF Mono", Monaco, "Consolas", monospace;
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: 3px;
margin: 0 4px 2px 0;
line-height: 1.3;
vertical-align: middle;
}
.gf-annote-class {
background: var(--gf-annote-class-bg);
border: 1px solid var(--gf-annote-class-border);
color: var(--gf-annote-class-text);
}
.gf-annote-id {
background: var(--gf-annote-id-bg);
border: 1px solid var(--gf-annote-id-border);
color: var(--gf-annote-id-text);
}
/* Compact inline IDs next to inputs */
.gf-annote-inline {
font-size: 9px;
padding: 1px 4px;
margin-left: 4px;
}
/* Form wrapper with dashed outline for #gform_wrapper */
.gf-form-wrapper-outline {
border: 2px dashed var(--gf-annote-id-border);
padding: 4px;
margin-bottom: 8px;
background: #fafbfc;
}
.gf-form-wrapper-outline .gf-annote-id { margin-bottom: 8px; display: block; }
/* Form styles */
.gform_wrapper {
max-width: 800px;
background: var(--gf-ctrl-bg-color);
border: 1px solid var(--gf-ctrl-border-color);
border-radius: 8px;
padding: var(--gf-padding-x) var(--gf-padding-y);
}
.gform_heading { margin-bottom: 24px; }
.gform_title { font-size: 22px; font-weight: 600; margin: 0 0 8px; color: #1a365d; }
.gform_description { font-size: 15px; color: var(--gf-ctrl-desc-color); margin: 0; }
.gform_body { }
.gform_fields {
display: grid;
row-gap: var(--gf-form-gap-y);
column-gap: var(--gf-form-gap-x);
margin: 0;
padding: 0;
list-style: none;
}
.gfield {
display: grid;
gap: 8px;
}
.gfield_label,
.gform-field-label {
font-size: 14px;
font-weight: 600;
color: var(--gf-ctrl-label-color-primary);
}
.gfield_required { color: #dc2626; }
.ginput_container input[type="text"],
.ginput_container input[type="email"],
.ginput_container textarea,
.ginput_container select {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--gf-ctrl-border-color);
border-radius: var(--gf-ctrl-radius);
font-size: 16px;
}
.ginput_container.ginput_complex {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.ginput_container.ginput_complex.has_first_name.has_last_name {
grid-template-columns: 1fr 1fr;
}
.ginput_container_address {
grid-template-columns: 1fr;
}
.ginput_container_address .gf-address-row {
grid-column: 1;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 12px;
}
.ginput_full { grid-column: 1 / -1; }
.ginput_left, .ginput_right { }
.name_first, .name_last,
.address_line_1, .address_line_2,
.address_city, .address_state, .address_zip, .address_country {
display: flex;
flex-direction: column;
gap: 4px;
}
.gform-field-label--type-sub {
font-size: 12px;
font-weight: 500;
color: var(--gf-ctrl-desc-color);
}
.gfield_description { font-size: 13px; color: var(--gf-ctrl-desc-color); margin: 4px 0 0; }
.gform_footer { margin-top: 32px; padding-top: 16px; }
.gform_button {
background: var(--gf-color-primary);
color: #fff;
border: none;
padding: 12px 24px;
border-radius: var(--gf-ctrl-radius);
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.gsection_title { font-size: 18px; font-weight: 600; margin: 24px 0 8px; color: #1a365d; }
.gsection_description { font-size: 14px; color: var(--gf-ctrl-desc-color); margin: 0 0 16px; }
.gfield_radio, .gfield_checkbox { display: flex; flex-direction: column; gap: 12px; }
.gchoice { display: flex; align-items: center; gap: 8px; }
.gchoice input { margin: 0; }
/* Address city/state/zip row */
.gf-address-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 12px;
}
/* Reference table */
.gf-ref-section { margin-top: 40px; }
.gf-ref-section h3 { margin: 0 0 12px; font-size: 18px; }
.gf-ref-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.gf-ref-table th, .gf-ref-table td {
text-align: left;
padding: 10px 12px;
border: 1px solid #e2e8f0;
}
.gf-ref-table th { background: #f1f5f9; font-weight: 600; }
.gf-ref-table code {
font-family: "SF Mono", Monaco, monospace;
font-size: 12px;
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
}
.gf-footer-note { margin-top: 32px; font-size: 13px; color: #64748b; }
</style>
</head>
<body>
<div class="gf-guide-header">
<h1>Gravity Forms Orbital Theme – CSS Visual Guide</h1>
</div>
<div class="gf-guide-intro">
<p>
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 <a href="https://www.w3.org/TR/CSS21/cascade.html">CSS inheritance</a>, you can effectively style every element in your form.
</p>
<p>
All element IDs follow the form ID and field ID pattern (for example <strong>#gform_wrapper_1</strong>, <strong>#field_1_3</strong>). The mockup below uses the <strong>Orbital</strong> class list produced by the theme framework: wrapper <code>gform-theme--*</code>, hyphenated layout hooks <code>gform-body</code> / <code>gform-footer</code> (with legacy twins <code>gform_body</code> / <code>gform_footer</code>), fields container classes from form settings (<code>form_sublabel_below</code>, <code>description_below</code>, <code>validation_below</code>), and each field’s <code>gfield--type-*</code>, visibility, description, validation, and width modifiers. In CSS, scope rules with <code>.gform-theme--framework</code> (see the quick reference). Styling is driven by the <strong>CSS API</strong> variables (<code>--gf-*</code>). For legacy <code>ul</code>/<code>li</code> markup, see the <a href="https://gravityforms.s3.us-east-1.amazonaws.com/support/docs/css_guide/css_guide.html">original CSS guide</a>.
</p>
</div>
<div class="gf-color-key">
<span><span class="key-class">CSS Class Name</span> Red box</span>
<span><span class="key-id">Element ID</span> Blue box</span>
</div>
<!-- Form wrapper outline with #gform_wrapper_1 -->
<div class="gf-form-wrapper-outline">
<span class="gf-annote-id">#gform_wrapper_1</span>
<span class="gf-annote-class">.gform_wrapper .gform-theme .gform-theme--foundation .gform-theme--framework .gform-theme--orbital</span>
<div id="gform_wrapper_1"
class="gform_wrapper gform-theme gform-theme--foundation gform-theme--framework gform-theme--orbital"
data-form-theme="orbital">
<form id="gform_1" method="post" enctype="multipart/form-data" action="#" data-formid="1" novalidate>
<!-- Form heading -->
<div class="gform_heading gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gform-theme--framework .gform_heading</span></span>
<h2 class="gform_title gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gform_title</span> <span class="gf-annote-id">h2</span></span>
Test Form Alpha
</h2>
<p class="gform_description gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gform_description</span> <span class="gf-annote-id">p</span></span>
We would love to hear from you! Please fill out this form and we will get in touch with you shortly.
</p>
</div>
<!-- Form body -->
<div class="gform-body gform_body gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gform-body</span> · <span class="gf-annote-class">.gform_body</span></span>
<div id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below validation_below gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gform_fields</span> · <span class="gf-annote-class">.top_label</span> · <span class="gf-annote-class">.form_sublabel_below</span> · <span class="gf-annote-class">.description_below</span> · <span class="gf-annote-class">.validation_below</span> <span class="gf-annote-id">#gform_fields_1</span></span>
<!-- Section break -->
<div id="field_1_1" class="gfield gfield--type-section gsection field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gfield--type-section</span> · <span class="gf-annote-class">.gsection</span> <span class="gf-annote-id">#field_1_1</span></span>
<h3 class="gsection_title">Section Break</h3>
<p class="gsection_description gfield_description gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gsection_description .gfield_description</span></span>
this is a description for the section break
</p>
</div>
<!-- Name field – composite -->
<div id="field_1_2" class="gfield gfield--type-name gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible gfield--width-full gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gfield--type-name</span> · <span class="gf-annote-class">.gfield_contains_required</span> · <span class="gf-annote-class">.gfield--width-full</span> · <span class="gf-annote-class">.gfield_visibility_visible</span> <span class="gf-annote-id">#field_1_2</span></span>
<label class="gfield_label gform-field-label gfield_label_before_complex gf-annote" for="input_1_2_3">
<span class="gf-annote-line"><span class="gf-annote-class">.gfield_label</span> · <span class="gf-annote-class">.gform-field-label</span> · <span class="gf-annote-class">.gfield_label_before_complex</span> · <span class="gf-annote-class">.gfield_required</span></span>
Name<span class="gfield_required gfield_required_text"> *</span>
</label>
<div id="input_1_2" class="ginput_complex ginput_container ginput_container--name has_first_name has_last_name gform-grid-row gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.ginput_complex .ginput_container .ginput_container--name</span> <span class="gf-annote-id">#input_1_2</span></span>
<span id="input_1_2_3_container" class="name_first gform-grid-col gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.name_first</span> <span class="gf-annote-id">#input_1_2_3_container</span></span>
<label for="input_1_2_3" class="gform-field-label gform-field-label--type-sub">First</label>
<input type="text" name="input_1.3" id="input_1_2_3" placeholder="First" /> <span class="gf-annote-id gf-annote-inline">#input_1_2_3</span>
</span>
<span id="input_1_2_6_container" class="name_last gform-grid-col gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.name_last</span> <span class="gf-annote-id">#input_1_2_6_container</span></span>
<label for="input_1_2_6" class="gform-field-label gform-field-label--type-sub">Last</label>
<input type="text" name="input_1.6" id="input_1_2_6" placeholder="Last" /> <span class="gf-annote-id gf-annote-inline">#input_1_2_6</span>
</span>
</div>
</div>
<!-- Email field -->
<div id="field_1_3" class="gfield gfield--type-email gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible gfield--width-full gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gfield--type-email</span> · <span class="gf-annote-class">.gfield_contains_required</span> · <span class="gf-annote-class">.gfield--width-full</span> <span class="gf-annote-id">#field_1_3</span></span>
<label class="gfield_label gform-field-label" for="input_1_3">Email *</label>
<div class="ginput_container ginput_container_email gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.ginput_container .ginput_container_email</span></span>
<input type="email" id="input_1_3" name="input_1" /> <span class="gf-annote-id gf-annote-inline">#input_1_3</span>
</div>
</div>
<!-- Address field – highly composite -->
<div id="field_1_4" class="gfield gfield--type-address gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible gfield--width-full gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gfield--type-address</span> · <span class="gf-annote-class">.gfield_contains_required</span> · <span class="gf-annote-class">.gfield--width-full</span> <span class="gf-annote-id">#field_1_4</span></span>
<label class="gfield_label gform-field-label" for="input_1_4_1">Address *</label>
<div id="input_1_4" class="ginput_complex ginput_container ginput_container_address has_street has_street2 has_city has_state has_zip has_country gform-grid-row gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.ginput_complex .ginput_container .ginput_container_address</span> <span class="gf-annote-id">#input_1_4</span></span>
<span id="input_1_4_1_container" class="ginput_full address_line_1 ginput_address_line_1 gform-grid-col gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.ginput_full .address_line_1 .ginput_address_line_1</span> <span class="gf-annote-id">#input_1_4_1_container</span></span>
<label for="input_1_4_1" class="gform-field-label gform-field-label--type-sub">Street Address</label>
<input type="text" id="input_1_4_1" placeholder="Street Address" /> <span class="gf-annote-id gf-annote-inline">#input_1_4_1</span>
</span>
<span id="input_1_4_2_container" class="ginput_full address_line_2 ginput_address_line_2 gform-grid-col gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.ginput_full .address_line_2 .ginput_address_line_2</span> <span class="gf-annote-id">#input_1_4_2_container</span></span>
<label for="input_1_4_2" class="gform-field-label gform-field-label--type-sub">Address Line 2</label>
<input type="text" id="input_1_4_2" placeholder="Address Line 2" /> <span class="gf-annote-id gf-annote-inline">#input_1_4_2</span>
</span>
<div class="gf-address-row">
<span id="input_1_4_3_container" class="ginput_left address_city ginput_address_city gform-grid-col gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.ginput_left .address_city</span> <span class="gf-annote-id">#input_1_4_3_container</span></span>
<label for="input_1_4_3" class="gform-field-label gform-field-label--type-sub">City</label>
<input type="text" id="input_1_4_3" placeholder="City" /> <span class="gf-annote-id gf-annote-inline">#input_1_4_3</span>
</span>
<span id="input_1_4_4_container" class="ginput_right address_state ginput_address_state gform-grid-col gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.ginput_right .address_state</span> <span class="gf-annote-id">#input_1_4_4_container</span></span>
<label for="input_1_4_4" class="gform-field-label gform-field-label--type-sub">State / Province / Region</label>
<select id="input_1_4_4"><option>State</option></select> <span class="gf-annote-id gf-annote-inline">#input_1_4_4</span>
</span>
<span id="input_1_4_5_container" class="ginput_left address_zip ginput_address_zip gform-grid-col gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.ginput_left .address_zip</span> <span class="gf-annote-id">#input_1_4_5_container</span></span>
<label for="input_1_4_5" class="gform-field-label gform-field-label--type-sub">Zip / Postal Code</label>
<input type="text" id="input_1_4_5" placeholder="Zip" /> <span class="gf-annote-id gf-annote-inline">#input_1_4_5</span>
</span>
</div>
<span id="input_1_4_6_container" class="ginput_right address_country ginput_address_country gform-grid-col gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.ginput_right .address_country</span> <span class="gf-annote-id">#input_1_4_6_container</span></span>
<label for="input_1_4_6" class="gform-field-label gform-field-label--type-sub">Country</label>
<select id="input_1_4_6"><option>Country</option></select> <span class="gf-annote-id gf-annote-inline">#input_1_4_6</span>
</span>
</div>
</div>
<!-- Comments (textarea) -->
<div id="field_1_5" class="gfield gfield--type-textarea field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible gfield--width-full gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gfield--type-textarea</span> · <span class="gf-annote-class">.gfield--width-full</span> <span class="gf-annote-id">#field_1_5</span></span>
<label class="gfield_label gform-field-label" for="input_1_5">Comments</label>
<div class="ginput_container ginput_container_textarea gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.ginput_container .ginput_container_textarea</span></span>
<textarea id="input_1_5" rows="4"></textarea> <span class="gf-annote-id gf-annote-inline">#input_1_5</span>
</div>
</div>
<!-- Text field with description -->
<div id="field_1_6" class="gfield gfield--type-text field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible gfield--width-full gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gfield--type-text</span> · <span class="gf-annote-class">.gfield--has-description</span> · <span class="gf-annote-class">.gfield--width-full</span> <span class="gf-annote-id">#field_1_6</span></span>
<label class="gfield_label gform-field-label" for="input_1_6">Field Label *</label>
<div class="ginput_container ginput_container_text gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.ginput_container .ginput_container_text</span></span>
<input type="text" id="input_1_6" /> <span class="gf-annote-id gf-annote-inline">#input_1_6</span>
</div>
<div class="gfield_description gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gfield_description</span></span>
this is the field description
</div>
</div>
<!-- Multi choice (radio) -->
<div id="field_1_7" class="gfield gfield--type-multi_choice gfield--choice-align-vertical field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible gfield--width-full gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gfield--type-multi_choice</span> · <span class="gf-annote-class">.gfield--choice-align-vertical</span> · <span class="gf-annote-class">.gfield--width-full</span> <span class="gf-annote-id">#field_1_7</span></span>
<label class="gfield_label gform-field-label">Select One</label>
<div class="ginput_container ginput_container_radio gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.ginput_container .ginput_container_radio</span></span>
<div class="gfield_radio gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gfield_radio</span></span>
<div class="gchoice gf-annote">
<span class="gf-annote-class">.gchoice</span>
<input type="radio" name="input_1_7" id="choice_1_7_1" />
<label for="choice_1_7_1" class="gform-field-label gform-field-label--type-inline">Option A</label>
<span class="gf-annote-id gf-annote-inline">#choice_1_7_1</span>
</div>
<div class="gchoice">
<input type="radio" name="input_1_7" id="choice_1_7_2" />
<label for="choice_1_7_2" class="gform-field-label gform-field-label--type-inline">Option B</label>
</div>
<div class="gchoice">
<input type="radio" name="input_1_7" id="choice_1_7_3" />
<label for="choice_1_7_3" class="gform-field-label gform-field-label--type-inline">Option C</label>
</div>
</div>
</div>
</div>
<!-- Multi choice (checkbox) -->
<div id="field_1_8" class="gfield gfield--type-multi_choice gfield--choice-align-vertical field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible gfield--width-full gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gfield--type-multi_choice</span> · <span class="gf-annote-class">.gfield--choice-align-vertical</span> · <span class="gf-annote-class">.gfield--width-full</span> <span class="gf-annote-id">#field_1_8</span></span>
<label class="gfield_label gform-field-label">Select Multiple</label>
<div class="ginput_container ginput_container_checkbox gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.ginput_container .ginput_container_checkbox</span></span>
<div class="gfield_checkbox gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gfield_checkbox</span></span>
<div class="gchoice">
<input type="checkbox" id="choice_1_8_1" />
<label for="choice_1_8_1" class="gform-field-label gform-field-label--type-inline">Choice 1</label>
</div>
<div class="gchoice">
<input type="checkbox" id="choice_1_8_2" />
<label for="choice_1_8_2" class="gform-field-label gform-field-label--type-inline">Choice 2</label>
</div>
<div class="gchoice">
<input type="checkbox" id="choice_1_8_3" />
<label for="choice_1_8_3" class="gform-field-label gform-field-label--type-inline">Choice 3</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Form footer -->
<div class="gform-footer gform_footer top_label gf-annote">
<span class="gf-annote-line"><span class="gf-annote-class">.gform-footer</span> · <span class="gf-annote-class">.gform_footer</span> · <span class="gf-annote-class">.top_label</span></span>
<input type="submit" id="gform_submit_button_1" class="gform_button button" value="Submit" data-submission-type="submit" />
<span class="gf-annote-id gf-annote-inline">#gform_submit_button_1</span>
</div>
</form>
</div>
</div>
<!-- CSS API Variable Reference -->
<div class="gf-ref-section">
<h3>CSS API Variables (Common)</h3>
<p>Override these on <code>.gform-theme--framework</code> to style Orbital forms. IDs use <code>{form_id}</code> and <code>{field_id}</code> (e.g. <code>#gform_wrapper_1</code>, <code>#field_1_4</code>).</p>
<table class="gf-ref-table">
<thead>
<tr>
<th>Variable</th>
<th>Scope</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>--gf-color-primary</code></td>
<td>Wrapper</td>
<td>Primary color (buttons, links, focus)</td>
</tr>
<tr>
<td><code>--gf-ctrl-bg-color</code></td>
<td>Wrapper / field</td>
<td>Control background</td>
</tr>
<tr>
<td><code>--gf-ctrl-border-color</code></td>
<td>Wrapper / field</td>
<td>Control border color</td>
</tr>
<tr>
<td><code>--gf-ctrl-radius</code></td>
<td>Wrapper</td>
<td>Control border radius</td>
</tr>
<tr>
<td><code>--gf-ctrl-label-color-primary</code></td>
<td>Wrapper / field</td>
<td>Label color</td>
</tr>
<tr>
<td><code>--gf-ctrl-desc-color</code></td>
<td>Wrapper / field</td>
<td>Description text color</td>
</tr>
<tr>
<td><code>--gf-form-gap-x</code>, <code>--gf-form-gap-y</code></td>
<td>Wrapper / body</td>
<td>Gap between fields</td>
</tr>
<tr>
<td><code>--gf-padding-x</code>, <code>--gf-padding-y</code></td>
<td>Wrapper</td>
<td>Form padding</td>
</tr>
<tr>
<td><code>--gf-ctrl-btn-bg-color-primary</code></td>
<td>Wrapper / footer</td>
<td>Submit button background</td>
</tr>
<tr>
<td><code>--gf-ctrl-choice-size</code></td>
<td>Choice field</td>
<td>Radio/checkbox size</td>
</tr>
</tbody>
</table>
</div>
<div class="gf-ref-section">
<h3>Selector Quick Reference</h3>
<table class="gf-ref-table">
<thead>
<tr>
<th>Target</th>
<th>Selector</th>
</tr>
</thead>
<tbody>
<tr><td>All Orbital forms</td><td><code>.gform-theme--framework</code></td></tr>
<tr><td>Specific form</td><td><code>.gform-theme--framework#gform_wrapper_{form_id}</code></td></tr>
<tr><td>Form heading</td><td><code>.gform-theme--framework .gform_heading</code></td></tr>
<tr><td>Form body</td><td><code>.gform-theme--framework .gform-body</code> (also <code>.gform_body</code>)</td></tr>
<tr><td>Field list</td><td><code>.gform-theme--framework .gform_fields</code> (includes <code>.top_label</code>, <code>.form_sublabel_*</code>, <code>.description_*</code>, <code>.validation_*</code>)</td></tr>
<tr><td>Field by type</td><td><code>.gform-theme--framework .gfield--type-{type}</code></td></tr>
<tr><td>Multiple Choice alignment</td><td><code>.gfield--choice-align-vertical</code> / <code>.gfield--choice-align-horizontal</code></td></tr>
<tr><td>Specific field</td><td><code>.gform-theme--framework #field_{form_id}_{field_id}</code></td></tr>
<tr><td>Name First input</td><td><code>#input_{form_id}_{field_id}_3</code> or <code>.name_first input</code></td></tr>
<tr><td>Name Last input</td><td><code>#input_{form_id}_{field_id}_6</code> or <code>.name_last input</code></td></tr>
<tr><td>Address Street</td><td><code>#input_{form_id}_{field_id}_1</code> or <code>.ginput_address_line_1 input</code></td></tr>
<tr><td>Address City</td><td><code>#input_{form_id}_{field_id}_3</code> or <code>.ginput_address_city input</code></td></tr>
<tr><td>Address Zip</td><td><code>#input_{form_id}_{field_id}_5</code> or <code>.ginput_address_zip input</code></td></tr>
<tr><td>Address Country</td><td><code>#input_{form_id}_{field_id}_6</code> or <code>.ginput_address_country select</code></td></tr>
<tr><td>Form footer</td><td><code>.gform-theme--framework .gform-footer</code> (also <code>.gform_footer</code>; label placement class e.g. <code>.top_label</code>)</td></tr>
<tr><td>Submit button</td><td><code>#gform_submit_button_{form_id}</code> or <code>.gform_button</code></td></tr>
</tbody>
</table>
</div>
<p class="gf-footer-note">
Orbital theme · Gravity Forms theme framework · CSS API · Markup matches non-legacy output (<code>div</code> field list and field containers). Field rows use the full class string from the framework (visibility, description, validation placement, sublabel placement, <code>gfield--width-*</code>, and Multiple Choice <code>gfield--choice-align-*</code>). Scope custom CSS with <code>.gform-theme--framework</code> (optionally <code>#gform_wrapper_{id}</code>) so rules apply only to Orbital forms.
</p>
</body>
</html>
