{"id":37860,"date":"2025-02-06T08:10:22","date_gmt":"2025-02-06T13:10:22","guid":{"rendered":"https:\/\/docs.gravityforms.com\/?p=37860"},"modified":"2025-02-06T08:10:25","modified_gmt":"2025-02-06T13:10:25","slug":"quick-start-guide","status":"publish","type":"post","link":"https:\/\/docs.gravityforms.com\/quick-start-guide\/","title":{"rendered":"Quick Start Guide"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"h-introduction\">Introduction<\/h2>\n\n\n\n<p>This article provides an overview of how to use the Theme Framework in your theme or add-on. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-theme-framework-architecture\">Theme Framework Architecture<\/h2>\n\n\n\n<p>The Theme Framework comprises two main components: the <strong><a href=\"https:\/\/docs.gravityforms.com\/?p=37831\">Theme Framework<\/a><\/strong> and <strong><a href=\"https:\/\/docs.gravityforms.com\/?p=37834\">Theme Layers<\/a><\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-theme-framework\">Theme Framework<\/h3>\n\n\n\n<p>At the core of the Theme Framework is a <a href=\"https:\/\/docs.gravityforms.com\/?p=40740\">CSS API<\/a>, an extensible collection of native CSS custom properties that can be defined, overridden, or modified across various contexts. The default implementation of this framework is the Orbital theme, which allows users to customize its appearance directly from the block settings.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-theme-layers\">Theme Layers<\/h3>\n\n\n\n<p>Theme Layers serve to group and enqueue styles, manage block settings, and connect these settings to the <a href=\"https:\/\/docs.gravityforms.com\/?p=40740\">CSS API<\/a>. They allow developers to control where styles are applied and prioritize them accordingly. For further details, refer to the user guide on <a href=\"https:\/\/docs.gravityforms.com\/?p=37834\">Theme Layers<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-custom-properties-and-the-css-api\">Custom Properties and the CSS API<\/h2>\n\n\n\n<p>The <a href=\"https:\/\/docs.gravityforms.com\/?p=40740\">CSS API<\/a> is a collection of <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-custom-properties\/\">custom properties<\/a>, which are essentially CSS variables that can be applied to various elements. In the Theme Framework, there are global custom properties, which are used on most, if not all, form elements, and local properties, which are used in more specific contexts. Local properties use the global properties by default but allow for shared overrides of global properties across specific sets of form elements. For more information on how we use global and local custom properties, see the <a href=\"https:\/\/docs.gravityforms.com\/?p=40740\">CSS API<\/a> article.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-form-themes-and-theme-scoping\">Form Themes and Theme Scoping<\/h2>\n\n\n\n<p>Gravity Forms has four built-in form themes. The themes are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Gravity Forms 2.5 Theme:<\/strong> this theme was introduced in Gravity Forms 2.5. It strives to be as <em>unopinionated<\/em> as possible.<\/li>\n\n\n\n<li><strong>Foundation Theme:<\/strong> this is not meant to be a standalone theme. It provides the foundational styles that are necessary for forms to function and be usable. This includes things like field layouts, enhanced datepicker and select styles, ready classes, etc. Any new theme will need to use the Foundation styles in addition to the theme styles.<\/li>\n\n\n\n<li><strong>Orbital Theme:<\/strong> Orbital is the default implementation of the Theme Framework. This is a much more opinionated theme that uses block settings to customize the appearance of individual forms. Orbital is the user-facing name for the Theme Framework: developers will interact with the Theme Framework, and users will interact with the Orbital theme.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Each form gets a wrapper class that includes the form theme name, so if you want your styles to apply only to certain themes, you can use the theme wrapper class.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th>Theme<\/th><th>Theme Wrapper Class<\/th><\/tr><\/thead><tbody><tr><td>Legacy &amp; Gravity Forms 2.5 Theme<\/td><td><strong><code>.gform-theme--no-framework<\/code><\/strong><\/td><\/tr><tr><td>Legacy Theme (pre 2.5)<\/td><td><strong><code>.gform_legacy_markup_wrapper<\/code><\/strong><\/td><\/tr><tr><td>Gravity Forms 2.5 Theme<\/td><td><strong><code>.gravity-theme&nbsp;<\/code><\/strong><\/td><\/tr><tr><td>Theme Framework<\/td><td><strong><code>.gform-theme<\/code><\/strong><\/td><\/tr><tr><td>Theme Framework &#8211; Foundation Theme<\/td><td><strong><code>.gform-theme--foundation<\/code><\/strong><\/td><\/tr><tr><td>Theme Framework &#8211; Framework Theme<\/td><td><strong><code>.gform-theme--framework<\/code><\/strong><\/td><\/tr><tr><td>Orbital Theme<\/td><td><strong><code>.gform-theme--orbital<\/code><\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-theme-framework-and-its-relationship-to-block-theme-settings\">Theme Framework and Its Relationship to Block Theme Settings<\/h2>\n\n\n\n<p>The <a href=\"https:\/\/docs.gravityforms.com\/?p=37831\">Theme Framework<\/a> makes it possible to create theme settings to give users control over the appearance of their forms. When a user embeds a form into WordPress using the block editor, they can select a form theme in the block settings. From Gravity Forms 2.7, the choices are Gravity Forms 2.5 Theme and Orbital. If a user selects Orbital, they can customize the form&#8217;s appearance. Only themes that use the Theme Framework can access and use the block settings to customize the form theme.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-does-it-work-pulling-it-all-together\">How Does It Work? Pulling It All Together.<\/h2>\n\n\n\n<p>Within the Theme Framework is a collection of design tokens that define CSS custom properties and a collection of mixins that can be used to apply some common CSS patterns. The design tokens and mixins are available as <em><a href=\"https:\/\/docs.gravityforms.com\/?p=37833#h-gravity-forms-npm-packages\">npm packages<\/a>,<\/em> so theme and add-on developers can use them without having to depend on a specific version of Gravity Forms. The Theme Framework provides a series of custom properties based on those design tokens and applies them to forms.<\/p>\n\n\n\n<p>Each form gets a wrapper class based on its theme. If the form is using the Orbital theme (the default implementation of the Theme Framework), users can customize its appearance by selecting from various block settings. Some of the block settings let users pick colors. The Theme Framework includes an algorithm that generates a whole set of colors based on a user\u2019s color selection. These colors are then tied to custom properties.<\/p>\n\n\n\n<p>The results of the block settings are used to create an updated set of custom properties that override the defaults via the <a href=\"https:\/\/docs.gravityforms.com\/?p=40740\">CSS API<\/a>. These block settings are output as a <code>&lt;style><\/code> block as the first child element within the form wrapper, and the style block is carefully scoped to the individual form so the styles won\u2019t impact other forms on the same page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article provides an overview of how to use the Theme Framework in your theme or add-on.<\/p>\n","protected":false},"author":35,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_autodraft_ids":[],"_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":"","jetpack_post_was_ever_published":false,"cf_checklist_status":[]},"categories":[19439],"tags":[],"class_list":["post-37860","post","type-post","status-publish","format-standard","hentry","category-theme-framework","wpautop"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Quick Start Guide - Gravity Forms Documentation<\/title>\n<meta name=\"description\" content=\"This article provides an overview of how to use the Theme Framework in your theme or add-on.\" \/>\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\/quick-start-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quick Start Guide\" \/>\n<meta property=\"og:description\" content=\"This article provides an overview of how to use the Theme Framework in your theme or add-on.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.gravityforms.com\/quick-start-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Gravity Forms Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-06T13:10:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-06T13:10: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=\"Morgan Kay\" \/>\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=\"Morgan Kay\" \/>\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\\\/quick-start-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/quick-start-guide\\\/\"},\"author\":{\"name\":\"Morgan Kay\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#\\\/schema\\\/person\\\/fa2b48dca7b3c629ca8a130095e326d1\"},\"headline\":\"Quick Start Guide\",\"datePublished\":\"2025-02-06T13:10:22+00:00\",\"dateModified\":\"2025-02-06T13:10:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/quick-start-guide\\\/\"},\"wordCount\":749,\"publisher\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#organization\"},\"articleSection\":[\"Theme Framework\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/quick-start-guide\\\/\",\"url\":\"https:\\\/\\\/docs.gravityforms.com\\\/quick-start-guide\\\/\",\"name\":\"Quick Start Guide - Gravity Forms Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#website\"},\"datePublished\":\"2025-02-06T13:10:22+00:00\",\"dateModified\":\"2025-02-06T13:10:25+00:00\",\"description\":\"This article provides an overview of how to use the Theme Framework in your theme or add-on.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/quick-start-guide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/docs.gravityforms.com\\\/quick-start-guide\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/quick-start-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/docs.gravityforms.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Quick Start Guide\"}]},{\"@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\\\/fa2b48dca7b3c629ca8a130095e326d1\",\"name\":\"Morgan Kay\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cedd583ac7b4ec5b626aed2b4500da1ba2c1a4bfbe5388dc3edddaa553e934ed?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cedd583ac7b4ec5b626aed2b4500da1ba2c1a4bfbe5388dc3edddaa553e934ed?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cedd583ac7b4ec5b626aed2b4500da1ba2c1a4bfbe5388dc3edddaa553e934ed?s=96&d=mm&r=g\",\"caption\":\"Morgan Kay\"},\"url\":\"https:\\\/\\\/docs.gravityforms.com\\\/author\\\/morgan-kayrocketgenius-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Quick Start Guide - Gravity Forms Documentation","description":"This article provides an overview of how to use the Theme Framework in your theme or add-on.","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\/quick-start-guide\/","og_locale":"en_US","og_type":"article","og_title":"Quick Start Guide","og_description":"This article provides an overview of how to use the Theme Framework in your theme or add-on.","og_url":"https:\/\/docs.gravityforms.com\/quick-start-guide\/","og_site_name":"Gravity Forms Documentation","article_published_time":"2025-02-06T13:10:22+00:00","article_modified_time":"2025-02-06T13:10: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":"Morgan Kay","twitter_card":"summary_large_image","twitter_creator":"@gravityforms","twitter_site":"@gravityforms","twitter_misc":{"Written by":"Morgan Kay","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/docs.gravityforms.com\/quick-start-guide\/#article","isPartOf":{"@id":"https:\/\/docs.gravityforms.com\/quick-start-guide\/"},"author":{"name":"Morgan Kay","@id":"https:\/\/docs.gravityforms.com\/#\/schema\/person\/fa2b48dca7b3c629ca8a130095e326d1"},"headline":"Quick Start Guide","datePublished":"2025-02-06T13:10:22+00:00","dateModified":"2025-02-06T13:10:25+00:00","mainEntityOfPage":{"@id":"https:\/\/docs.gravityforms.com\/quick-start-guide\/"},"wordCount":749,"publisher":{"@id":"https:\/\/docs.gravityforms.com\/#organization"},"articleSection":["Theme Framework"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/docs.gravityforms.com\/quick-start-guide\/","url":"https:\/\/docs.gravityforms.com\/quick-start-guide\/","name":"Quick Start Guide - Gravity Forms Documentation","isPartOf":{"@id":"https:\/\/docs.gravityforms.com\/#website"},"datePublished":"2025-02-06T13:10:22+00:00","dateModified":"2025-02-06T13:10:25+00:00","description":"This article provides an overview of how to use the Theme Framework in your theme or add-on.","breadcrumb":{"@id":"https:\/\/docs.gravityforms.com\/quick-start-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.gravityforms.com\/quick-start-guide\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.gravityforms.com\/quick-start-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.gravityforms.com\/"},{"@type":"ListItem","position":2,"name":"Quick Start Guide"}]},{"@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\/fa2b48dca7b3c629ca8a130095e326d1","name":"Morgan Kay","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cedd583ac7b4ec5b626aed2b4500da1ba2c1a4bfbe5388dc3edddaa553e934ed?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cedd583ac7b4ec5b626aed2b4500da1ba2c1a4bfbe5388dc3edddaa553e934ed?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cedd583ac7b4ec5b626aed2b4500da1ba2c1a4bfbe5388dc3edddaa553e934ed?s=96&d=mm&r=g","caption":"Morgan Kay"},"url":"https:\/\/docs.gravityforms.com\/author\/morgan-kayrocketgenius-com\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pdGaEa-9QE","_links":{"self":[{"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/posts\/37860","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\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/comments?post=37860"}],"version-history":[{"count":34,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/posts\/37860\/revisions"}],"predecessor-version":[{"id":42509,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/posts\/37860\/revisions\/42509"}],"wp:attachment":[{"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/media?parent=37860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/categories?post=37860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/tags?post=37860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}