{"id":6352,"date":"2014-05-09T16:17:03","date_gmt":"2014-05-09T20:17:03","guid":{"rendered":"http:\/\/localhost\/documentation\/"},"modified":"2026-04-24T07:54:25","modified_gmt":"2026-04-24T11:54:25","slug":"design-overview","status":"publish","type":"post","link":"https:\/\/docs.gravityforms.com\/design-overview\/","title":{"rendered":"CSS Visual Guide and Design Overview"},"content":{"rendered":"\n<p class=\"has-background\" style=\"background-color:#f5955221\"><strong>Note<\/strong>: These selectors apply only to forms using the <strong>Orbital theme<\/strong>. If you are using the Gravity Forms 2.5 theme, see the <a href=\"https:\/\/docs.gravityforms.com\/category\/knowledge-base\/design-and-layout-legacy\/\" type=\"link\" id=\"https:\/\/docs.gravityforms.com\/category\/knowledge-base\/design-and-layout-legacy\/\">Legacy CSS Selectors<\/a> documentation.<\/p>\n\n\n\n<p>The Orbital theme is built on the Gravity Forms theme framework. Styling is driven primarily by the CSS API \u2014 custom properties (<code>--gf-*<\/code>) that you override on the form wrapper or appropriate scope. The framework provides consistent defaults for controls, labels, descriptions, buttons, and layout; you customize by overriding these variables rather than targeting raw elements.<\/p>\n\n\n\n<p>For full CSS API variable definitions, see the separate CSS API documentation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-element-relationships\">Element Relationships<\/h2>\n\n\n\n<p>We&#8217;ve put together a visual guide to the Gravity Forms CSS hierarchy to illustrate the structure of a form and the class relationship.<\/p>\n\n\n\n<p>You can access it in a few formats:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>View Orbital Visual CSS Guide (HTML Version) \u2014 Orbital\/theme framework structure with class and ID annotations<\/li>\n\n\n\n<li>View Legacy Visual CSS Guide (HTML Version)<\/li>\n\n\n\n<li>Download Legacy Guide (PNG)<\/li>\n<\/ul>\n\n\n\n<p>Note: The Orbital guide shows the theme framework structure with div-based markup. The form wrapper receives <code>gform-theme<\/code>, <code>gform-theme--foundation<\/code>, <code>gform-theme--framework<\/code>, and <code>gform-theme--orbital<\/code>. The ID structure (<code>#gform_wrapper_{form_id}<\/code>, <code>#field_{form_id}_{field_id}<\/code>) remains the same as legacy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-element-naming\">Element Naming<\/h2>\n\n\n\n<p>Gravity Forms are structured so that every element can be targeted and manipulated via CSS. Most elements share reusable class names for styling, and many have unique IDs for targeting specific elements.<\/p>\n\n\n\n<p>All element IDs follow this pattern:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>#gform_wrapper_{form_id}<\/code> \u2014 where <code>{form_id}<\/code> is the form ID (e.g. <code>#gform_wrapper_1<\/code> for form 1)<\/li>\n\n\n\n<li><code>#field_{form_id}_{field_id}<\/code> \u2014 where <code>{form_id}<\/code> is the form ID and <code>{field_id}<\/code> is the field ID (e.g. <code>#field_1_4<\/code> for field 4 in form 1)<\/li>\n<\/ul>\n\n\n\n<p>By using CSS inheritance, you can effectively style every element in your form. In Orbital, variable overrides cascade from the form wrapper to child elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-theme-and-markup-classes\">Theme and Markup Classes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-orbital-default\">Orbital (Default)<\/h3>\n\n\n\n<p>Forms using the Orbital theme receive these classes on the form wrapper (<code>div.gform_wrapper<\/code>):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>gform-theme<\/code> \u2014 Base theme class<\/li>\n\n\n\n<li><code>gform-theme--foundation<\/code> \u2014 Foundation layer (layout, reset, base variables)<\/li>\n\n\n\n<li><code>gform-theme--framework<\/code> \u2014 Framework layer (control styles, CSS API)<\/li>\n\n\n\n<li><code>gform-theme--orbital<\/code> \u2014 Orbital theme (visual look and feel)<\/li>\n<\/ul>\n\n\n\n<p>The form wrapper also has the <code>data-form-theme<\/code> attribute (e.g. <code>data-form-theme=\"orbital\"<\/code>). Use <code>.gform-theme--framework<\/code> as the primary selector for styling Orbital forms; it is the scope where CSS API variables are consumed and overridden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-legacy-mode\">Legacy Mode<\/h3>\n\n\n\n<p>When legacy mode is enabled for a form, the wrapper receives <code>gform_legacy_markup_wrapper<\/code> instead of the Orbital theme classes. Legacy forms use different markup (e.g. <code>ul<\/code>\/<code>li<\/code> for choice fields) and do not use the theme framework CSS API. Use the legacy CSS selector documentation for those forms.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-configurable-classes\">Configurable Classes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-label-position-classes\">Label Position Classes<\/h3>\n\n\n\n<p>Three label placement classes are applied based on Form Settings \u2192 Form Layout:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>.top_label<\/code> \u2014 Label above the field (default)<\/li>\n\n\n\n<li><code>.left_label<\/code> \u2014 Label to the left of the field<\/li>\n\n\n\n<li><code>.right_label<\/code> \u2014 Label to the right of the field<\/li>\n<\/ul>\n\n\n\n<p>These are applied to the form body and footer. Other elements (e.g. field layout, input container width) adjust based on inheritance. The theme framework uses <code>--gf-label-width<\/code> for left\/right label layouts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-field-type-classes\">Field Type Classes<\/h3>\n\n\n\n<p>Each field has a <code>.gfield--type-{type}<\/code> class (e.g. <code>.gfield--type-text<\/code>, <code>.gfield--type-checkbox<\/code>, <code>.gfield--type-email<\/code>). Use these to target fields by type:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/* example: all text fields \u2013 applies to all Orbital forms *\/\n.gform-theme--framework .gfield--type-text {\n\t--gf-ctrl-label-font-size-primary: 18px;\n}\n\n\/* example: checkboxes only \u2013 applies just to form ID #112 *\/\n.gform-theme--framework#gform_wrapper_112 .gfield--type-checkbox {\n\t--gf-field-choice-gap: 16px;\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-field-size-via-css-api\">Field Size (via CSS API)<\/h3>\n\n\n\n<p>Orbital uses the theme framework CSS API for field control sizing rather than <code>.small<\/code>, <code>.medium<\/code>, and <code>.large<\/code> classes. Override variables such as <code>--gf-ctrl-border-size<\/code>, <code>--gf-ctrl-padding-block<\/code>, <code>--gf-ctrl-padding-inline<\/code>, and type-specific variables (e.g. <code>--gf-ctrl-choice-size<\/code> for radio\/checkbox) on the form wrapper or field scope.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-custom-classes\">Custom Classes<\/h3>\n\n\n\n<p>You can add custom CSS classes in Form Settings \u2192 Form Layout \u2192 CSS Class Name (e.g. <code>my_form<\/code>). Gravity Forms appends <code>_wrapper<\/code> and applies it to the form wrapper (e.g. <code>my_form_wrapper<\/code>). Use this for form-specific styling:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/* example: custom class \u2013 applies to form with class \"my_form\" *\/\n.gform-theme--framework.my_form_wrapper {\n\t--gf-ctrl-bg-color: #fafafa;\n}\n\n\/* example: custom class on specific form \u2013 applies to form ID #112 with class \"dark_theme\" *\/\n.gform-theme--framework#gform_wrapper_112.dark_theme_wrapper {\n\t--gf-color-primary: #60a5fa;\n\tbackground-color: #1f2937;\n}\n<\/pre><\/div>\n\n\n<p>At the field level, the Custom CSS Class setting in the field&#8217;s Appearance tab adds your class directly to the field wrapper (e.g. <code>.gfield.my_custom_class<\/code>).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-theme-framework-and-css-api\">Theme Framework and CSS API<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-overview\">Overview<\/h3>\n\n\n\n<p>The theme framework provides:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Design tokens \u2014 Base variables (colors, typography, radius) in <code>--gf-color-*<\/code>, <code>--gf-font-*<\/code>, <code>--gf-radius<\/code>, etc.<\/li>\n\n\n\n<li>Control props \u2014 Element-specific variables (e.g. <code>--gf-ctrl-bg-color<\/code>, <code>--gf-ctrl-label-color-primary<\/code>, <code>--gf-ctrl-radius<\/code>) that consume tokens and apply to form controls, labels, descriptions, and buttons.<\/li>\n\n\n\n<li>Layout variables \u2014 Spacing and structure (e.g. <code>--gf-form-gap-x<\/code>, <code>--gf-form-gap-y<\/code>, <code>--gf-field-gap-x<\/code>, <code>--gf-padding-x<\/code>).<\/li>\n<\/ul>\n\n\n\n<p>Most styling is done by overriding <code>--gf-*<\/code> variables on <code>.gform-theme--framework<\/code> (or a more specific scope). Direct property application to elements should be used only when no variable exists for that property.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-primary-approach-override-variables-on-the-wrapper\">Primary Approach: Override Variables on the Wrapper<\/h3>\n\n\n\n<p>Set variables on <code>.gform-theme--framework<\/code> (or <code>.gform-theme--framework#gform_wrapper_{form_id}<\/code> for a specific form. These cascade to all form UI:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/* example: global form styling \u2013 applies to all Orbital forms *\/\n.gform-theme--framework {\n\t--gf-ctrl-bg-color: #f9f9f9;\n\t--gf-ctrl-border-color: #e5e7eb;\n\t--gf-ctrl-label-color-primary: #1a365d;\n\t--gf-color-primary: #2563eb;\n\t--gf-ctrl-radius: 6px;\n}\n\n\/* example: form-specific styling \u2013 applies just to form ID #112 *\/\n.gform-theme--framework#gform_wrapper_112 {\n\t--gf-color-primary: #059669;\n\t--gf-ctrl-btn-bg-color-primary: #059669;\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-utility-classes\">Utility Classes<\/h3>\n\n\n\n<p>The theme framework provides utility classes for selective control:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>.gform-theme__disable<\/code> \u2014 Disables theme framework and reset styles<\/li>\n\n\n\n<li><code>.gform-theme__disable-framework<\/code> \u2014 Disables theme framework styles only<\/li>\n\n\n\n<li><code>.gform-theme__disable-reset<\/code> \u2014 Disables theme framework reset styles only<\/li>\n\n\n\n<li><code>.gform-theme__no-reset--el<\/code> \u2014 Excludes element from reset<\/li>\n\n\n\n<li><code>.gform-theme__no-reset--children<\/code> \u2014 Excludes element&#8217;s children from reset<\/li>\n<\/ul>\n\n\n\n<p>Apply these to the form wrapper or parent element when you need to opt out of framework styling.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-css-ready-classes-legacy\">CSS Ready Classes (Legacy)<\/h3>\n\n\n\n<p>Using Ready Classes, you could create alternative layouts for fields in legacy forms. The column and inline ready classes were deprecated with the improvements made to the form editor in Gravity Forms 2.5.<\/p>\n\n\n\n<p>In Orbital, layout is controlled by the form editor&#8217;s built-in layout options (e.g. column\/row settings), CSS API variables (<code>--gf-form-gap-x<\/code>, <code>--gf-form-gap-y<\/code>, <code>--gf-label-width<\/code>), and field-level custom classes and variable overrides.<\/p>\n\n\n\n<p>See the Form Body CSS Selectors and field-specific selector docs for layout customization.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-css-targeting-examples\">CSS Targeting Examples<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-scope-patterns\">Scope Patterns<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>All Orbital forms: <code>.gform-theme--framework<\/code> \u2014 Global changes<\/li>\n\n\n\n<li>Specific form by ID: <code>.gform-theme--framework#gform_wrapper_{form_id}<\/code> \u2014 One form<\/li>\n\n\n\n<li>Forms on a page: <code>.page-id-{page_id} .gform-theme--framework<\/code> \u2014 Forms on a specific WordPress page<\/li>\n\n\n\n<li>All fields of a type: <code>.gform-theme--framework .gfield--type-{type}<\/code> \u2014 e.g. all text fields<\/li>\n\n\n\n<li>Specific field: <code>.gform-theme--framework #field_{form_id}_{field_id}<\/code> \u2014 One field<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example-form-color-theme\">Example: Form Color Theme<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* example: color theme \u2013 applies to all Orbital forms *\/\n.gform-theme--framework {\n\t--gf-color-primary: #2563eb;\n\t--gf-color-primary-darker: #1d4ed8;\n\t--gf-ctrl-label-color-primary: #1e3a5f;\n\t--gf-ctrl-desc-color: #4b5563;\n}\n\n\/* example: color theme \u2013 applies just to form ID #112 *\/\n.gform-theme--framework#gform_wrapper_112 {\n\t--gf-color-primary: #059669;\n\t--gf-color-primary-darker: #047857;\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example-control-styling\">Example: Control Styling<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* example: input and control styling \u2013 applies to all Orbital forms *\/\n.gform-theme--framework {\n\t--gf-ctrl-bg-color: #fff;\n\t--gf-ctrl-bg-color-hover: #f5f5f5;\n\t--gf-ctrl-border-color: #d1d5db;\n\t--gf-ctrl-radius: 6px;\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example-form-layout-and-spacing\">Example: Form Layout and Spacing<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* example: form spacing \u2013 applies to all Orbital forms *\/\n.gform-theme--framework {\n\t--gf-form-gap-x: 24px;\n\t--gf-form-gap-y: 32px;\n\t--gf-padding-x: 20px;\n\t--gf-padding-y: 16px;\n}\n\n\/* example: centered form with max-width \u2013 applies just to form ID #112 *\/\n.gform-theme--framework#gform_wrapper_112 {\n\tmax-width: 600px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n<\/pre><\/div>\n\n\n<p>For more detailed selector documentation by component (wrapper, heading, body, footer, submit button, validation, fields), see the individual CSS Selector docs in this section.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-css-api-reference\">CSS API Reference<\/h2>\n\n\n\n<p>For full variable definitions, see the <a href=\"https:\/\/docs.gravityforms.com\/css-api\/\" type=\"link\" id=\"https:\/\/docs.gravityforms.com\/css-api\/\">CSS API documentation<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve put together a simple visual guide to help illustrate the structure of a form and the CSS class relationship.<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_autodraft_ids":[],"jetpack_post_was_ever_published":false,"_sb_is_suggestion_mode":false,"_sb_show_suggestion_boards":false,"_sb_show_comment_boards":false,"_sb_suggestion_history":"","_sb_update_block_changes":"","_is_real_time_mode":false,"_realtime_collaborators":"","footnotes":"","cf_checklist_status":["SEO Title Length","Alt Text for All Images","Tags Assigned","Category Assigned"]},"categories":[6126],"tags":[19380],"class_list":["post-6352","post","type-post","status-publish","format-standard","hentry","category-basics","tag-edited-for-2-5","wpautop"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Visual Guide and Design Overview - Gravity Forms Documentation<\/title>\n<meta name=\"description\" content=\"We\u2019ve put together a simple visual guide to help illustrate the structure of a form and the CSS class relationship.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/docs.gravityforms.com\/design-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Visual Guide and Design Overview\" \/>\n<meta property=\"og:description\" content=\"We\u2019ve put together a simple visual guide to help illustrate the structure of a form and the CSS class relationship.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.gravityforms.com\/design-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Gravity Forms Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-09T20:17:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-24T11:54:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/docs.gravityforms.com\/wp-content\/uploads\/2023\/08\/gf-docs-default-v3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"544\" \/>\n\t<meta property=\"og:image:height\" content=\"288\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Justin Pakes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@gravityforms\" \/>\n<meta name=\"twitter:site\" content=\"@gravityforms\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Justin Pakes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/design-overview\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/design-overview\\\/\"},\"author\":{\"name\":\"Justin Pakes\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#\\\/schema\\\/person\\\/8a88745ec2ee5bc1bb24eea8634bf376\"},\"headline\":\"CSS Visual Guide and Design Overview\",\"datePublished\":\"2014-05-09T20:17:03+00:00\",\"dateModified\":\"2026-04-24T11:54:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/design-overview\\\/\"},\"wordCount\":850,\"publisher\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#organization\"},\"keywords\":[\"edited for 2.5\"],\"articleSection\":[\"Basics\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/design-overview\\\/\",\"url\":\"https:\\\/\\\/docs.gravityforms.com\\\/design-overview\\\/\",\"name\":\"CSS Visual Guide and Design Overview - Gravity Forms Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#website\"},\"datePublished\":\"2014-05-09T20:17:03+00:00\",\"dateModified\":\"2026-04-24T11:54:25+00:00\",\"description\":\"We\u2019ve put together a simple visual guide to help illustrate the structure of a form and the CSS class relationship.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/design-overview\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/docs.gravityforms.com\\\/design-overview\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/design-overview\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/docs.gravityforms.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Visual Guide and Design Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#website\",\"url\":\"https:\\\/\\\/docs.gravityforms.com\\\/\",\"name\":\"Gravity Forms Documentation\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/docs.gravityforms.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#organization\",\"name\":\"Gravity Forms\",\"url\":\"https:\\\/\\\/docs.gravityforms.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/docs.gravityforms.com\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/gravity-forms-2020-logo-stacked.png\",\"contentUrl\":\"https:\\\/\\\/docs.gravityforms.com\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/gravity-forms-2020-logo-stacked.png\",\"width\":392,\"height\":515,\"caption\":\"Gravity Forms\"},\"image\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/gravityforms\",\"http:\\\/\\\/@gravityforms.com\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#\\\/schema\\\/person\\\/8a88745ec2ee5bc1bb24eea8634bf376\",\"name\":\"Justin Pakes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/791cb5bec00c6dd4bec2e80cf4df9638297207d8f77890c96b6b483be434ecea?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/791cb5bec00c6dd4bec2e80cf4df9638297207d8f77890c96b6b483be434ecea?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/791cb5bec00c6dd4bec2e80cf4df9638297207d8f77890c96b6b483be434ecea?s=96&d=mm&r=g\",\"caption\":\"Justin Pakes\"},\"url\":\"https:\\\/\\\/docs.gravityforms.com\\\/author\\\/pakes\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Visual Guide and Design Overview - Gravity Forms Documentation","description":"We\u2019ve put together a simple visual guide to help illustrate the structure of a form and the CSS class relationship.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/docs.gravityforms.com\/design-overview\/","og_locale":"en_US","og_type":"article","og_title":"CSS Visual Guide and Design Overview","og_description":"We\u2019ve put together a simple visual guide to help illustrate the structure of a form and the CSS class relationship.","og_url":"https:\/\/docs.gravityforms.com\/design-overview\/","og_site_name":"Gravity Forms Documentation","article_published_time":"2014-05-09T20:17:03+00:00","article_modified_time":"2026-04-24T11:54:25+00:00","og_image":[{"width":544,"height":288,"url":"https:\/\/docs.gravityforms.com\/wp-content\/uploads\/2023\/08\/gf-docs-default-v3.png","type":"image\/png"}],"author":"Justin Pakes","twitter_card":"summary_large_image","twitter_creator":"@gravityforms","twitter_site":"@gravityforms","twitter_misc":{"Written by":"Justin Pakes","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/docs.gravityforms.com\/design-overview\/#article","isPartOf":{"@id":"https:\/\/docs.gravityforms.com\/design-overview\/"},"author":{"name":"Justin Pakes","@id":"https:\/\/docs.gravityforms.com\/#\/schema\/person\/8a88745ec2ee5bc1bb24eea8634bf376"},"headline":"CSS Visual Guide and Design Overview","datePublished":"2014-05-09T20:17:03+00:00","dateModified":"2026-04-24T11:54:25+00:00","mainEntityOfPage":{"@id":"https:\/\/docs.gravityforms.com\/design-overview\/"},"wordCount":850,"publisher":{"@id":"https:\/\/docs.gravityforms.com\/#organization"},"keywords":["edited for 2.5"],"articleSection":["Basics"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/docs.gravityforms.com\/design-overview\/","url":"https:\/\/docs.gravityforms.com\/design-overview\/","name":"CSS Visual Guide and Design Overview - Gravity Forms Documentation","isPartOf":{"@id":"https:\/\/docs.gravityforms.com\/#website"},"datePublished":"2014-05-09T20:17:03+00:00","dateModified":"2026-04-24T11:54:25+00:00","description":"We\u2019ve put together a simple visual guide to help illustrate the structure of a form and the CSS class relationship.","breadcrumb":{"@id":"https:\/\/docs.gravityforms.com\/design-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.gravityforms.com\/design-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.gravityforms.com\/design-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.gravityforms.com\/"},{"@type":"ListItem","position":2,"name":"CSS Visual Guide and Design Overview"}]},{"@type":"WebSite","@id":"https:\/\/docs.gravityforms.com\/#website","url":"https:\/\/docs.gravityforms.com\/","name":"Gravity Forms Documentation","description":"","publisher":{"@id":"https:\/\/docs.gravityforms.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.gravityforms.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/docs.gravityforms.com\/#organization","name":"Gravity Forms","url":"https:\/\/docs.gravityforms.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.gravityforms.com\/#\/schema\/logo\/image\/","url":"https:\/\/docs.gravityforms.com\/wp-content\/uploads\/2020\/01\/gravity-forms-2020-logo-stacked.png","contentUrl":"https:\/\/docs.gravityforms.com\/wp-content\/uploads\/2020\/01\/gravity-forms-2020-logo-stacked.png","width":392,"height":515,"caption":"Gravity Forms"},"image":{"@id":"https:\/\/docs.gravityforms.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/gravityforms","http:\/\/@gravityforms.com"]},{"@type":"Person","@id":"https:\/\/docs.gravityforms.com\/#\/schema\/person\/8a88745ec2ee5bc1bb24eea8634bf376","name":"Justin Pakes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/791cb5bec00c6dd4bec2e80cf4df9638297207d8f77890c96b6b483be434ecea?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/791cb5bec00c6dd4bec2e80cf4df9638297207d8f77890c96b6b483be434ecea?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/791cb5bec00c6dd4bec2e80cf4df9638297207d8f77890c96b6b483be434ecea?s=96&d=mm&r=g","caption":"Justin Pakes"},"url":"https:\/\/docs.gravityforms.com\/author\/pakes\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pdGaEa-1Es","_links":{"self":[{"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/posts\/6352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/comments?post=6352"}],"version-history":[{"count":10,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/posts\/6352\/revisions"}],"predecessor-version":[{"id":48996,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/posts\/6352\/revisions\/48996"}],"wp:attachment":[{"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/media?parent=6352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/categories?post=6352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/tags?post=6352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}