{"id":1129,"date":"2023-02-06T05:00:19","date_gmt":"2023-02-06T10:00:19","guid":{"rendered":"http:\/\/www.gravityhelp.com\/?p=1129"},"modified":"2026-03-24T16:36:30","modified_gmt":"2026-03-24T20:36:30","slug":"css-ready-classes","status":"publish","type":"post","link":"https:\/\/www.gravityforms.com\/blog\/css-ready-classes\/","title":{"rendered":"CSS Ready Classes for Gravity Forms"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1236\" height=\"824\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes.png\" alt=\"Gravity Forms CSS Ready Classes\" class=\"wp-image-23280\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes.png 1236w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes-300x200.png 300w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes-1024x683.png 1024w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes-768x512.png 768w\" sizes=\"auto, (max-width: 1236px) 100vw, 1236px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Gravity Forms CSS Ready Classes are a handy feature that let you tweak and adjust your forms using pre-defined styles &#8211; no special technical knowledge needed.<\/p>\n\n\n\n<p>In this post, we&#8217;re going to dig into Ready Classes in detail so that you understand exactly what they are, how they can benefit you, and how you can start using Ready Classes to adjust the forms that you&#8217;ve created with Gravity Forms.<\/p>\n\n\n\n<p>Ready to learn more? Let&#8217;s dig in!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Are Gravity Forms CSS Ready Classes? How Do They Help?<\/h2>\n\n\n\n<p>Gravity Forms CSS Ready Classes help give you additional control over a form&#8217;s style and layout beyond what the options in the Gravity Forms editor allow.<\/p>\n\n\n\n<p>On a slightly more technical level, Ready Classes are pre-defined CSS styles that are included in the default form stylesheet.<\/p>\n\n\n\n<p>Rather than needing to write your own CSS from scratch, all you need to do is add the relevant class name to the parent element and you can apply those styles to a field in your form.<\/p>\n\n\n\n<p>The Gravity Forms editor already gives you a good amount of control over your form&#8217;s design. <em>More on that in a second<\/em>.<\/p>\n\n\n\n<p>But with Ready Classes, you get even more options for controlling your forms.<\/p>\n\n\n\n<p><strong>So &#8211; what can you do with Gravity Forms CSS Ready Classes?<\/strong><\/p>\n\n\n\n<p>We&#8217;re going to dig into that in a lot more detail below, but here&#8217;s a rapid-fire list of some of the adjustments that you can make with Ready Classes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Change the style\/layout of list items that appear in field types such as Checkboxes and Radio Buttons<\/strong>. For example, showing list items in multiple columns instead of one long list.<\/li>\n\n\n\n<li><strong>Change text styling of form fields or confirmation messages<\/strong>. For example, you can add banners\/alerts to draw attention to important information.<\/li>\n\n\n\n<li><strong>Change how text displays<\/strong>. For example, you can display long text in a fixed height scroll box (<em>great for terms of service<\/em>).<\/li>\n\n\n\n<li><strong>Hide fields<\/strong>. Most importantly, this works even when there are no <strong>Visibility<\/strong> settings for the field in the editor.<\/li>\n<\/ul>\n\n\n\n<p>This is not a complete list. Below, we&#8217;ll go through everything in a lot more detail with plenty of real examples.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What You Can Do WITHOUT CSS Ready Classes<\/h3>\n\n\n\n<p>While CSS Ready Classes can give you access to some new layout options, it&#8217;s important to note that you can also access a lot of layout options directly in the Gravity Forms editor <em>without<\/em> needing to use Ready Classes. This is especially true since we released the new editor in version 2.5.<\/p>\n\n\n\n<p>For example, in the past (<em>prior to Gravity Forms version 2.5<\/em>), you needed to use Ready Classes to create multi-column form layouts.<\/p>\n\n\n\n<p>However, that&#8217;s now no longer the case because you can <a href=\"https:\/\/www.gravityforms.com\/blog\/drag-and-drop-column-control-two-five\/\" target=\"_blank\" rel=\"noopener\">easily create multi-column layouts directly from the editor<\/a>. All you need to do is drag a form field next to another one and the editor will create a multi-column layout for you.<\/p>\n\n\n\n<p>You can do this for two-column layouts or layouts with more than two columns.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"690\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/no-ready-class-1.gif\" alt=\"Creating multi-column layouts in the editor\" class=\"wp-image-23231\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>You&#8217;ll also get additional options in the field settings to customize the relative width of those columns. For example, you could make a two-column layout 50\/50 or 30\/70.<\/p>\n\n\n\n<p>Beyond setting up multi-column designs, you also get lots of options in the <strong>Appearance<\/strong> settings of an individual field. Here, you can change the label visibility, description placement, and so on:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1626\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/no-ready-class-2.jpg\" alt=\"Gravity Forms editor appearance options\" class=\"wp-image-23232\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/no-ready-class-2.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/no-ready-class-2-277x300.jpg 277w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/no-ready-class-2-945x1024.jpg 945w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/no-ready-class-2-768x833.jpg 768w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/no-ready-class-2-1417x1536.jpg 1417w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><em>Some other field settings areas also might have useful options.<\/em><\/p>\n\n\n\n<p>For form-wide settings, you can find options in the <strong>Form Layout<\/strong> section of the <strong>Form Settings<\/strong> area:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1642\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/no-ready-class-3.jpg\" alt=\"Gravity Forms editor form settings\" class=\"wp-image-23233\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/no-ready-class-3.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/no-ready-class-3-274x300.jpg 274w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/no-ready-class-3-935x1024.jpg 935w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/no-ready-class-3-768x841.jpg 768w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/no-ready-class-3-1403x1536.jpg 1403w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>If you want <em>even more <\/em>control than what these options offer, you can turn to Ready Classes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use Gravity Forms CSS Ready Classes<\/h2>\n\n\n\n<p>Now that you know what Ready Classes are and how they can help you work with your forms, let&#8217;s dig into how to actually use Ready Classes when editing a form.<\/p>\n\n\n\n<p>We&#8217;ll start with a general overview of how to add any Ready Class to a form. Then, we&#8217;ll dig into some specific examples of how to use some of the most popular Ready Classes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Where to Add a Ready Class in Gravity Forms<\/h3>\n\n\n\n<p>To add a Ready Class to an individual form field, you can use the <strong>Custom CSS Class<\/strong> field in the <strong>Appearance<\/strong> tab of a field&#8217;s settings:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click to open a field&#8217;s settings in the Gravity Forms editor.<\/li>\n\n\n\n<li>Expand the <strong>Appearance<\/strong> accordion section.<\/li>\n\n\n\n<li>Enter the relevant Ready Class in the <strong>Custom CSS Class<\/strong> field.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1186\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-1.jpg\" alt=\"Where to add Gravity Forms CSS Ready Classes\" class=\"wp-image-23217\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-1.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-1-300x237.jpg 300w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-1-1024x810.jpg 1024w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-1-768x607.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>If needed, you can add multiple Ready Classes to a single form field.<\/strong><\/p>\n\n\n\n<p>To do this, add each class to the <strong>Custom CSS Class<\/strong> field, separated by a space.<\/p>\n\n\n\n<p>Here&#8217;s an example:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1191\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-2.jpg\" alt=\"Adding multiple ready classes\" class=\"wp-image-23218\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-2.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-2-300x238.jpg 300w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-2-1024x813.jpg 1024w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-2-768x610.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>In a few cases, you might add the Ready Class at the form level, rather than at the field level. For example, you&#8217;ll do this if you want to customize the style of the confirmation message.<\/p>\n\n\n\n<p>In these cases, you can add the Ready Class(es) to the <strong>CSS Class Name<\/strong> box in the <strong>Form Layout<\/strong> section of the <strong>Form Settings<\/strong> area:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>While in the form editor, expand the <strong>Settings<\/strong> dropdown menu and select <strong>Form Settings<\/strong>.<\/li>\n\n\n\n<li>Scroll down to the <strong>Form Layout<\/strong> section.<\/li>\n\n\n\n<li>Enter the relevant Ready Class in the <strong>CSS Class Name<\/strong> field.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1336\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-3.jpg\" alt=\"Adding ready classes in form settings\" class=\"wp-image-23219\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-3.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-3-300x267.jpg 300w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-3-1024x912.jpg 1024w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-3-768x684.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Preview the Design of Ready Classes<\/h3>\n\n\n\n<p><strong>It&#8217;s important to note that Ready Classes will not show the full design in the editor.<\/strong><\/p>\n\n\n\n<p>So, when you first add a Ready Class to your form, you might not see any changes or you might see some changes that don&#8217;t look quite right.<\/p>\n\n\n\n<p>For example, in the screenshots above, you can see that the styling for the checkboxes looks a little weird in the editor, despite it working perfectly fine on the real form.<\/p>\n\n\n\n<p>Here&#8217;s how to see what your Ready Classes will look like on your live form:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Save the form by clicking the <strong>Save Form<\/strong> button in the top-right corner.<\/li>\n\n\n\n<li>Click the <strong>Preview <\/strong>button to the left of the <strong>Save Form<\/strong> button.<\/li>\n<\/ol>\n\n\n\n<p>This will open a new tab that contains a basic preview of your form, complete with any relevant styling from the Ready Classes.<\/p>\n\n\n\n<p>Next, let&#8217;s get into some specific tutorials for using Ready Classes to adjust your forms.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Adjust List Items With Ready Classes<\/h2>\n\n\n\n<p>One of the most helpful uses of Ready Classes is to adjust the formatting of list items in fields with multiple options, such as Checkboxes and Radio Buttons.<\/p>\n\n\n\n<p>This can be especially helpful if the visitor has lots of items to select from, as you can group items into multiple columns and otherwise adjust their spacing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Separate Gravity Forms Lists Into Multiple Columns<\/h3>\n\n\n\n<p>To separate the list items in fields like Checkboxes and Radio Buttons into multiple columns, you get eight different Ready Classes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>gf_list_2col<\/code><\/li>\n\n\n\n<li><code>gf_list_3col<\/code><\/li>\n\n\n\n<li><code>gf_list_4col<\/code><\/li>\n\n\n\n<li><code>gf_list_5col<\/code><\/li>\n\n\n\n<li><code>gf_list_2col_vertical<\/code><\/li>\n\n\n\n<li><code>gf_list_3col_vertical<\/code><\/li>\n\n\n\n<li><code>gf_list_4col_vertical<\/code><\/li>\n\n\n\n<li><code>gf_list_5col_vertical<\/code><\/li>\n<\/ul>\n\n\n\n<p>Both sets of Ready Classes divide your list items into multiple columns (<em>anywhere from two to five columns, depending on the number<\/em>). The only difference is in how your form fills the list items into those columns.<\/p>\n\n\n\n<p>The first four Ready Classes will fill a list from left to right across the relevant number of columns. Then, it will fill descending in rows until the list is exhausted. <em>Example below<\/em>.<\/p>\n\n\n\n<p>If you add the _vertical modifier, the form will fill from top to bottom in the left column first and then continue across the columns until the list is exhausted. It will also try to divide the items evenly across the columns as much as possible.<\/p>\n\n\n\n<p>To make that a little clearer, let&#8217;s look at an example.<\/p>\n\n\n\n<p>Here&#8217;s our basic form with 43 different options in a Checkboxes field:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1882\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-4.jpg\" alt=\"Checkbox options\" class=\"wp-image-23220\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-4.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-4-239x300.jpg 239w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-4-816x1024.jpg 816w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-4-768x964.jpg 768w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-4-1224x1536.jpg 1224w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>If you add the <code>gf_list_3col<\/code> Ready Class, the list items will fill the columns like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"930\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-5.jpg\" alt=\"Horizontal columns\" class=\"wp-image-23221\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-5.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-5-300x186.jpg 300w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-5-1024x635.jpg 1024w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-5-768x476.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>If you add the <code>gf_list_3col_vertical<\/code> Ready Class, the list items will fill the columns like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"945\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-6.jpg\" alt=\"Vertical columns\" class=\"wp-image-23222\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-6.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-6-300x189.jpg 300w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-6-1024x645.jpg 1024w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-6-768x484.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Use an Inline List Instead of Distinct Columns<\/h4>\n\n\n\n<p>For another option to separate list items, you can also display them as an inline list using the <code>gf_list_inline<\/code> Ready Class.<\/p>\n\n\n\n<p>With an inline list, your items will <strong>not<\/strong> display in evenly spaced columns like the previous Ready Classes. Instead, they will fill the space as much as possible and then wrap into the next line.<\/p>\n\n\n\n<p>Here&#8217;s what the same example from above would look like with the <code>gf_list_inline<\/code> Ready Class:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"658\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-7.jpg\" alt=\"Inlione list\" class=\"wp-image-23223\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-7.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-7-300x132.jpg 300w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-7-1024x449.jpg 1024w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-7-768x337.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Change the List Height in Gravity Forms<\/h3>\n\n\n\n<p>For another way to adjust the list items, you can also change their height using the list height Ready Class.<\/p>\n\n\n\n<p>This Ready Class applies a specific height value to all of the items in a list. This can be helpful for avoiding hanging float situations caused by lists of unequal height.<\/p>\n\n\n\n<p>There are six different Ready Classes to adjust list height, with the only difference between them being the height number:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>gf_list_height_25<\/code><\/li>\n\n\n\n<li><code>gf_list_height_50<\/code><\/li>\n\n\n\n<li><code>gf_list_height_75<\/code><\/li>\n\n\n\n<li><code>gf_list_height_100<\/code><\/li>\n\n\n\n<li><code>gf_list_height_125<\/code><\/li>\n\n\n\n<li><code>gf_list_height_150<\/code><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Change Text Styling in Gravity Forms<\/h2>\n\n\n\n<p>You can also use Ready Classes to change text styling in certain areas of your form, such as customizing the confirmation message or highlighting alerts in the form text.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Add Alerts\/Banner Messages to Gravity Forms<\/h3>\n\n\n\n<p>For some forms, you might have important information that you want to draw special attention to.<\/p>\n\n\n\n<p>To help you add these types of highlights, there are five different Ready Classes to highlight an HTML field and its contents with different colors:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>gf_alert_green<\/code><\/li>\n\n\n\n<li><code>gf_alert_green<\/code><\/li>\n\n\n\n<li><code>gf_alert_red<\/code><\/li>\n\n\n\n<li><code>gf_alert_yellow<\/code><\/li>\n\n\n\n<li><code>gf_alert_gray<\/code><\/li>\n<\/ul>\n\n\n\n<p>For example, here&#8217;s a preview of a form without any highlighting:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1060\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-8.jpg\" alt=\"Content without ready calss\" class=\"wp-image-23224\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-8.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-8-300x212.jpg 300w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-8-1024x724.jpg 1024w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-8-768x543.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>If you wanted to highlight the field in green, you would add the <code>gf_alert_green<\/code> Ready Class to its settings.<\/p>\n\n\n\n<p>Then, the field will be highlighted in green like so:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1141\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-9.jpg\" alt=\"Gravity Forms CSS Ready Classes for alerts\" class=\"wp-image-23225\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-9.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-9-300x228.jpg 300w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-9-1024x779.jpg 1024w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-9-768x584.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Change the Confirmation Message Style in Gravity Forms<\/h3>\n\n\n\n<p>In addition to highlighting HTML fields, you&#8217;ll also find similar Ready Classes to change the background color of a form&#8217;s confirmation message to turn it into a banner of the associated color.<\/p>\n\n\n\n<p>For confirmation messages, Gravity Forms offers four different ready classes for different colors\/gradients:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>gf_confirmation_simple_yellow<\/code><\/li>\n\n\n\n<li><code>gf_confirmation_simple_gray<\/code><\/li>\n\n\n\n<li><code>gf_confirmation_yellow_gradient<\/code><\/li>\n\n\n\n<li><code>gf_confirmation_green_gradient<\/code><\/li>\n<\/ul>\n\n\n\n<p>Instead of adding these Ready Classes to the settings of an individual field, you&#8217;ll add them to the <strong>CSS Class Name<\/strong> field in the form-wide Form Settings area.<\/p>\n\n\n\n<p>Here&#8217;s a form&#8217;s confirmation method <strong>without<\/strong> the Ready Class:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"712\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-10.jpg\" alt=\"Confirmation without ready class\" class=\"wp-image-23226\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-10.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-10-300x142.jpg 300w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-10-1024x486.jpg 1024w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-10-768x365.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>And then here&#8217;s what that same confirmation message looks like after adding the <code>gf_confirmation_yellow_gradient<\/code> Ready Class:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"754\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-11.jpg\" alt=\"Confirmation with ready class\" class=\"wp-image-23227\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-11.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-11-300x151.jpg 300w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-11-1024x515.jpg 1024w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-11-768x386.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use Other Notable CSS Ready Classes<\/h2>\n\n\n\n<p>Finally, there are a few other Gravity Forms CSS Ready Classes that don&#8217;t fit neatly into the sections above.<\/p>\n\n\n\n<p>Let&#8217;s go through how to use them\u2026<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Scroll Text In a Fixed Height Box (Terms of Service)<\/h3>\n\n\n\n<p>The <code>gf_scroll_text<\/code> Ready Class lets you convert text in a Section Break field into a fixed height box that will show a scroll bar if the height of the text content is greater than the height of the box.<\/p>\n\n\n\n<p>This is most useful for details such as a Terms of Service agreement, where you need to display a lot of text to the user but you don&#8217;t want to make it take up a huge vertical area.<\/p>\n\n\n\n<p>For example, consider lengthy text like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"2037\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-12.jpg\" alt=\"Long text in section break\" class=\"wp-image-23228\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-12.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-12-221x300.jpg 221w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-12-754x1024.jpg 754w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-12-768x1043.jpg 768w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-12-1131x1536.jpg 1131w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>By adding the <code>gf_scroll_text<\/code> Ready Class to the Section Break field&#8217;s settings, you could convert it into a scrolling fixed height box like so:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1177\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-13.jpg\" alt=\"Section break scroll box\" class=\"wp-image-23229\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-13.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-13-300x235.jpg 300w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-13-1024x803.jpg 1024w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-13-768x603.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Hide the AM\/PM Selector in a Time Field<\/h3>\n\n\n\n<p>By default, the Time field includes an AM\/PM selector that lets users choose the relevant option. If you want to hide this from the frontend of your form, you can add the <code>gf_hide_ampm<\/code> Ready Class to the Time field&#8217;s settings.<\/p>\n\n\n\n<p><strong>Note <\/strong>&#8211; this will only hide the field on the form. It will still be displayed in the form entry table in your backend dashboard.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Hide a Field When the Visibility Setting Isn&#8217;t Available<\/h3>\n\n\n\n<p>In some situations, you might want to hide a field from the frontend of the form.<\/p>\n\n\n\n<p>Most of the time, you can do this without needing Ready Classes. Instead, you can use the <strong>Visibility<\/strong> options in the field&#8217;s settings:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1170\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-14.jpg\" alt=\"Visibility options\" class=\"wp-image-23230\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-14.jpg 1500w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-14-300x234.jpg 300w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-14-1024x799.jpg 1024w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2023\/01\/gravity-forms-css-ready-classes-14-768x599.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>However, there might be some situations in which you can&#8217;t access the <strong>Visibility<\/strong> settings for a field that you want to hide, such as product fields.<\/p>\n\n\n\n<p>In these cases, you can add the <code>gf_invisible<\/code> Ready Class to the field to hide it from the frontend.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Hide the &#8220;Characters Left&#8221; Counter Under Paragraph Fields When Using Maximum Characters<\/h3>\n\n\n\n<p>By default, Gravity Forms will display a &#8220;Characters Left&#8221; counter underneath a Paragraph field when you set a maximum character limit (<em>or in other locations, depending on your chosen form label position settings<\/em>). As the user types, the counter will count down the remaining characters.<\/p>\n\n\n\n<p>If you want to hide this counter, you can add the <code>gf_hide_charleft<\/code> Ready Class to the Paragraph field&#8217;s settings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Get Started With Gravity Forms CSS Ready Classes Today<\/h2>\n\n\n\n<p>While the Gravity Forms editor already lets you control your form&#8217;s styling and set up multi-column designs, Gravity Forms CSS Ready Classes can give you even more control over different areas of your forms.<\/p>\n\n\n\n<p>Rather than trying to write your own CSS from scratch, all you need to do is add the Ready Class\/es and you&#8217;re off to the races.<\/p>\n\n\n\n<p>If you&#8217;re already a Gravity Forms user, you can start using Ready Classes today on all license plans. There are no add-ons to install &#8211; everything that you saw above is available with just the core Gravity Forms plugin.<\/p>\n\n\n\n<p>If you&#8217;re not a Gravity Forms user yet, here are two ways that you can get started:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.gravityforms.com\/pricing\/\" target=\"_blank\" rel=\"noopener\">Purchase a Gravity Forms license<\/a> and install the plugin on your site.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.gravityforms.com\/gravity-forms-demo\/\" target=\"_blank\" rel=\"noopener\">Spin up a free, fully functioning demo site<\/a> to experience Ready Classes plus all of the other Gravity Forms features and add-ons.<\/li>\n<\/ol>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"2858\" height=\"964\" src=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2020\/06\/Gravity-Forms-Newsletter-1.png\" alt=\"Gravity Forms Newsletter\" class=\"wp-image-15192\" srcset=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2020\/06\/Gravity-Forms-Newsletter-1.png 2858w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2020\/06\/Gravity-Forms-Newsletter-1-300x101.png 300w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2020\/06\/Gravity-Forms-Newsletter-1-1024x345.png 1024w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2020\/06\/Gravity-Forms-Newsletter-1-768x259.png 768w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2020\/06\/Gravity-Forms-Newsletter-1-1536x518.png 1536w, https:\/\/www.gravityforms.com\/wp-content\/uploads\/2020\/06\/Gravity-Forms-Newsletter-1-2048x691.png 2048w\" sizes=\"auto, (max-width: 2858px) 100vw, 2858px\" \/><\/figure>\n\n\n\n<div class=\"alert_blue\"><br>\n<strong>If you want to keep up-to-date with what&#8217;s happening on the blog sign up for the Gravity Forms newsletter!<\/strong><br>\n<script>\nvar gform;gform||(document.addEventListener(\"gform_main_scripts_loaded\",function(){gform.scriptsLoaded=!0}),document.addEventListener(\"gform\/theme\/scripts_loaded\",function(){gform.themeScriptsLoaded=!0}),window.addEventListener(\"DOMContentLoaded\",function(){gform.domLoaded=!0}),gform={domLoaded:!1,scriptsLoaded:!1,themeScriptsLoaded:!1,isFormEditor:()=>\"function\"==typeof InitializeEditor,callIfLoaded:function(o){return!(!gform.domLoaded||!gform.scriptsLoaded||!gform.themeScriptsLoaded&&!gform.isFormEditor()||(gform.isFormEditor()&&console.warn(\"The use of gform.initializeOnLoaded() is deprecated in the form editor context and will be removed in Gravity Forms 3.1.\"),o(),0))},initializeOnLoaded:function(o){gform.callIfLoaded(o)||(document.addEventListener(\"gform_main_scripts_loaded\",()=>{gform.scriptsLoaded=!0,gform.callIfLoaded(o)}),document.addEventListener(\"gform\/theme\/scripts_loaded\",()=>{gform.themeScriptsLoaded=!0,gform.callIfLoaded(o)}),window.addEventListener(\"DOMContentLoaded\",()=>{gform.domLoaded=!0,gform.callIfLoaded(o)}))},hooks:{action:{},filter:{}},addAction:function(o,r,e,t){gform.addHook(\"action\",o,r,e,t)},addFilter:function(o,r,e,t){gform.addHook(\"filter\",o,r,e,t)},doAction:function(o){gform.doHook(\"action\",o,arguments)},applyFilters:function(o){return gform.doHook(\"filter\",o,arguments)},removeAction:function(o,r){gform.removeHook(\"action\",o,r)},removeFilter:function(o,r,e){gform.removeHook(\"filter\",o,r,e)},addHook:function(o,r,e,t,n){null==gform.hooks[o][r]&&(gform.hooks[o][r]=[]);var d=gform.hooks[o][r];null==n&&(n=r+\"_\"+d.length),gform.hooks[o][r].push({tag:n,callable:e,priority:t=null==t?10:t})},doHook:function(r,o,e){var t;if(e=Array.prototype.slice.call(e,1),null!=gform.hooks[r][o]&&((o=gform.hooks[r][o]).sort(function(o,r){return o.priority-r.priority}),o.forEach(function(o){\"function\"!=typeof(t=o.callable)&&(t=window[t]),\"action\"==r?t.apply(null,e):e[0]=t.apply(null,e)})),\"filter\"==r)return e[0]},removeHook:function(o,r,t,n){var e;null!=gform.hooks[o][r]&&(e=(e=gform.hooks[o][r]).filter(function(o,r,e){return!!(null!=n&&n!=o.tag||null!=t&&t!=o.priority)}),gform.hooks[o][r]=e)}});\n<\/script>\n\n                <div class='gf_browser_unknown gform_wrapper gravity-theme gform-theme--no-framework' data-form-theme='gravity-theme' data-form-index='0' id='gform_wrapper_83' >\n                        <div class='gform_heading'>\n\t\t\t\t\t\t\t<p class='gform_required_legend'>&quot;<span class=\"gfield_required gfield_required_asterisk\">*<\/span>&quot; indicates required fields<\/p>\n                        <\/div><form method='post' enctype='multipart\/form-data'  id='gform_83'  action='\/wp-json\/wp\/v2\/posts\/1129' data-formid='83' novalidate> \r\n <input type='hidden' class='gforms-pum' value='{\"closepopup\":false,\"closedelay\":0,\"openpopup\":false,\"openpopup_id\":0}' \/>\n                        <div class='gform-body gform_body'><div id='gform_fields_83' class='gform_fields top_label form_sublabel_below description_below validation_below'><div id=\"field_83_5\" class=\"gfield gfield--type-honeypot gform_validation_container field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_83_5'>Phone<\/label><div class='ginput_container'><input name='input_5' id='input_83_5' type='text' value='' autocomplete='new-password'\/><\/div><div class='gfield_description' id='gfield_description_83_5'>This field is for validation purposes and should be left unchanged.<\/div><\/div><fieldset id=\"field_83_2\" class=\"gfield gfield--type-email gfield--input-type-email gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  ><legend class='gfield_label gform-field-label gfield_label_before_complex' >Email<span class=\"gfield_required\"><span class=\"gfield_required gfield_required_asterisk\">*<\/span><\/span><\/legend><div class='ginput_complex ginput_container ginput_container_email gform-grid-row' id='input_83_2_container'>\n                                <span id='input_83_2_1_container' class='ginput_left gform-grid-col gform-grid-col--size-auto'>\n                                    <input class='' type='email' name='input_2' id='input_83_2' value=''    aria-required=\"true\" aria-invalid=\"false\"  \/>\n                                    <label for='input_83_2' class='gform-field-label gform-field-label--type-sub '>Enter Email<\/label>\n                                <\/span>\n                                <span id='input_83_2_2_container' class='ginput_right gform-grid-col gform-grid-col--size-auto'>\n                                    <input class='' type='email' name='input_2_2' id='input_83_2_2' value=''    aria-required=\"true\" aria-invalid=\"false\"  \/>\n                                    <label for='input_83_2_2' class='gform-field-label gform-field-label--type-sub '>Confirm Email<\/label>\n                                <\/span>\n                                <div class='gf_clear gf_clear_complex'><\/div>\n                            <\/div><\/fieldset><fieldset id=\"field_83_3\" class=\"gfield gfield--type-checkbox gfield--type-choice gfield--input-type-checkbox gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  ><legend class='gfield_label gform-field-label gfield_label_before_complex' >Privacy<span class=\"gfield_required\"><span class=\"gfield_required gfield_required_asterisk\">*<\/span><\/span><\/legend><div class='ginput_container ginput_container_checkbox'><div class='gfield_checkbox ' id='input_83_3'><div class='gchoice gchoice_83_3_1'>\n\t\t\t\t\t\t\t\t<input class='gfield-choice-input' name='input_3.1' type='checkbox'  value='I agree with the storage and handling of my data by this website. - &lt;a target=&quot;_blank&quot; href=&quot;https:\/\/www.gravityforms.com\/privacy\/&quot; rel=&quot;noopener noreferrer&quot;&gt;Privacy Policy&lt;\/a&gt; &lt;abbr class=&quot;wpgdprc-required&quot; title=&quot;You need to accept this checkbox.&quot;&gt;*&lt;\/abbr&gt;'  id='choice_83_3_1'   \/>\n\t\t\t\t\t\t\t\t<label for='choice_83_3_1' id='label_83_3_1' class='gform-field-label gform-field-label--type-inline'>I agree with the storage and handling of my data by this website. - <a target=\"_blank\" href=\"https:\/\/www.gravityforms.com\/privacy\/\" rel=\"noopener noreferrer\">Privacy Policy<\/a> <abbr class=\"wpgdprc-required\" title=\"You need to accept this checkbox.\">*<\/abbr><\/label>\n\t\t\t\t\t\t\t<\/div><\/div><\/div><\/fieldset><div id=\"field_83_4\" class=\"gfield gfield--type-captcha gfield--input-type-captcha field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_83_4'>CAPTCHA<\/label><div id='input_83_4' class='ginput_container ginput_recaptcha' data-sitekey='6LdxcbcqAAAAAHh5N4RW6tt2QeBFwHLDw3eYgN_j'  data-theme='light' data-tabindex='0'  data-badge=''><\/div><\/div><\/div><\/div>\n        <div class='gform-footer gform_footer top_label'> <input type='submit' id='gform_submit_button_83' class='gform_button button' onclick='gform.submission.handleButtonClick(this);' data-submission-type='submit' value='Keep me up to date!'  \/> <input type='hidden' class='gform_hidden' name='gform_submission_speeds' value='{&quot;pages&quot;:[]}' \/>\n            <input type='hidden' class='gform_hidden' name='gform_submission_method' data-js='gform_submission_method_83' value='postback' \/>\n            <input type='hidden' class='gform_hidden' name='gform_theme' data-js='gform_theme_83' id='gform_theme_83' value='gravity-theme' \/>\n            <input type='hidden' class='gform_hidden' name='gform_style_settings' data-js='gform_style_settings_83' id='gform_style_settings_83' value='[]' \/>\n            <input type='hidden' class='gform_hidden' name='is_submit_83' value='1' \/>\n            <input type='hidden' class='gform_hidden' name='gform_submit' value='83' \/>\n            \n            <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' \/>\n            <input type='hidden' class='gform_hidden' name='state_83' value='WyJbXSIsIjE2YTM4MzNjZDEzMDZiOGNmNmNkZWZkNTc0ZTJkOWViIl0=' \/>\n            <input type='hidden' autocomplete='off' class='gform_hidden' name='gform_target_page_number_83' id='gform_target_page_number_83' value='0' \/>\n            <input type='hidden' autocomplete='off' class='gform_hidden' name='gform_source_page_number_83' id='gform_source_page_number_83' value='1' \/>\n            <input type='hidden' name='gform_field_values' value='' \/>\n            \n        <\/div>\n                        <\/form>\n                        <\/div><script>\ngform.initializeOnLoaded( function() {gformInitSpinner( 83, 'https:\/\/www.gravityforms.com\/wp-content\/plugins\/gravityforms\/images\/spinner.svg', true );jQuery('#gform_ajax_frame_83').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_83');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_83').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_83').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_83').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_83').removeClass('gform_validation_error');}setTimeout( function() { \/* delay the scroll by 50 milliseconds to fix a bug in chrome *\/  }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_83').val();gformInitSpinner( 83, 'https:\/\/www.gravityforms.com\/wp-content\/plugins\/gravityforms\/images\/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [83, current_page]);window['gf_submitting_83'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}jQuery('#gform_wrapper_83').replaceWith(confirmation_content);jQuery(document).trigger('gform_confirmation_loaded', [83]);window['gf_submitting_83'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_83').text());}else{jQuery('#gform_83').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger(\"gform_pre_post_render\", [{ formId: \"83\", currentPage: \"current_page\", abort: function() { this.preventDefault(); } }]);        if (event && event.defaultPrevented) {                return;        }        const gformWrapperDiv = document.getElementById( \"gform_wrapper_83\" );        if ( gformWrapperDiv ) {            const visibilitySpan = document.createElement( \"span\" );            visibilitySpan.id = \"gform_visibility_test_83\";            gformWrapperDiv.insertAdjacentElement( \"afterend\", visibilitySpan );        }        const visibilityTestDiv = document.getElementById( \"gform_visibility_test_83\" );        let postRenderFired = false;        function triggerPostRender() {            if ( postRenderFired ) {                return;            }            postRenderFired = true;            gform.core.triggerPostRenderEvents( 83, current_page );            if ( visibilityTestDiv ) {                visibilityTestDiv.parentNode.removeChild( visibilityTestDiv );            }        }        function debounce( func, wait, immediate ) {            var timeout;            return function() {                var context = this, args = arguments;                var later = function() {                    timeout = null;                    if ( !immediate ) func.apply( context, args );                };                var callNow = immediate && !timeout;                clearTimeout( timeout );                timeout = setTimeout( later, wait );                if ( callNow ) func.apply( context, args );            };        }        const debouncedTriggerPostRender = debounce( function() {            triggerPostRender();        }, 200 );        if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) {            const observer = new MutationObserver( ( mutations ) => {                mutations.forEach( ( mutation ) => {                    if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) {                        debouncedTriggerPostRender();                        observer.disconnect();                    }                });            });            observer.observe( document.body, {                attributes: true,                childList: false,                subtree: true,                attributeFilter: [ 'style', 'class' ],            });        } else {            triggerPostRender();        }    } );} );\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to use Gravity Forms CSS Ready Classes to adjust the style and layout of your forms in ways that go beyond settings in the editor&#8230;<\/p>\n","protected":false},"author":344402,"featured_media":23280,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,221],"tags":[10547],"class_list":["post-1129","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-tutorials","tag-css-ready-classes","wpautop"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.1 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Ready Classes - Gravity Forms Blog<\/title>\n<meta name=\"description\" content=\"Learn how to use Gravity Forms CSS Ready Classes to adjust the style and layout of your forms in ways that go beyond settings in the editor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gravityforms.com\/css-ready-classes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Ready Classes for Gravity Forms\" \/>\n<meta property=\"og:description\" content=\"Learn how to use Gravity Forms CSS Ready Classes to adjust the style and layout of your forms in ways that go beyond settings in the editor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gravityforms.com\/css-ready-classes\/\" \/>\n<meta property=\"og:site_name\" content=\"Gravity Forms\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GravityForms\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-06T10:00:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-24T20:36:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1236\" \/>\n\t<meta property=\"og:image:height\" content=\"824\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Colin Newcomer\" \/>\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=\"Colin Newcomer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.gravityforms.com\/css-ready-classes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.gravityforms.com\/css-ready-classes\/\"},\"author\":{\"name\":\"Colin Newcomer\",\"@id\":\"https:\/\/www.gravityforms.com\/#\/schema\/person\/94c9bd08decd89e9757d535d77499583\"},\"headline\":\"CSS Ready Classes for Gravity Forms\",\"datePublished\":\"2023-02-06T10:00:19+00:00\",\"dateModified\":\"2026-03-24T20:36:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.gravityforms.com\/css-ready-classes\/\"},\"wordCount\":2310,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\/\/www.gravityforms.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.gravityforms.com\/css-ready-classes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes.png\",\"keywords\":[\"CSS Ready Classes\"],\"articleSection\":[\"Blog\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.gravityforms.com\/css-ready-classes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.gravityforms.com\/css-ready-classes\/\",\"url\":\"https:\/\/www.gravityforms.com\/css-ready-classes\/\",\"name\":\"CSS Ready Classes - Gravity Forms Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.gravityforms.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.gravityforms.com\/css-ready-classes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.gravityforms.com\/css-ready-classes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes.png\",\"datePublished\":\"2023-02-06T10:00:19+00:00\",\"dateModified\":\"2026-03-24T20:36:30+00:00\",\"description\":\"Learn how to use Gravity Forms CSS Ready Classes to adjust the style and layout of your forms in ways that go beyond settings in the editor.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.gravityforms.com\/css-ready-classes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.gravityforms.com\/css-ready-classes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gravityforms.com\/css-ready-classes\/#primaryimage\",\"url\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes.png\",\"contentUrl\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes.png\",\"width\":1236,\"height\":824,\"caption\":\"Gravity Forms CSS Ready Classes\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.gravityforms.com\/css-ready-classes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Gravity Forms\",\"item\":\"https:\/\/www.gravityforms.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\/\/www.gravityforms.com\/category\/blog\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Ready Classes for Gravity Forms\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.gravityforms.com\/#website\",\"url\":\"https:\/\/www.gravityforms.com\/\",\"name\":\"Gravity Forms\",\"description\":\"WordPress Contact Forms\",\"publisher\":{\"@id\":\"https:\/\/www.gravityforms.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.gravityforms.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.gravityforms.com\/#organization\",\"name\":\"Gravity Forms\",\"url\":\"https:\/\/www.gravityforms.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gravityforms.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2021\/09\/gravity-forms-logo-horizontal-744.png\",\"contentUrl\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2021\/09\/gravity-forms-logo-horizontal-744.png\",\"width\":774,\"height\":400,\"caption\":\"Gravity Forms\"},\"image\":{\"@id\":\"https:\/\/www.gravityforms.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/GravityForms\",\"https:\/\/x.com\/GravityForms\",\"https:\/\/www.instagram.com\/gravityforms\/\",\"https:\/\/www.linkedin.com\/company\/gravityforms\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.gravityforms.com\/#\/schema\/person\/94c9bd08decd89e9757d535d77499583\",\"name\":\"Colin Newcomer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gravityforms.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/42aa991c5e5152c551c3ca3aa09e84d6e08a3a40420e566d930ab289160b09bc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/42aa991c5e5152c551c3ca3aa09e84d6e08a3a40420e566d930ab289160b09bc?s=96&d=mm&r=g\",\"caption\":\"Colin Newcomer\"},\"url\":\"https:\/\/www.gravityforms.com\/author\/colin-newcomer\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Ready Classes - Gravity Forms Blog","description":"Learn how to use Gravity Forms CSS Ready Classes to adjust the style and layout of your forms in ways that go beyond settings in the editor.","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:\/\/www.gravityforms.com\/css-ready-classes\/","og_locale":"en_US","og_type":"article","og_title":"CSS Ready Classes for Gravity Forms","og_description":"Learn how to use Gravity Forms CSS Ready Classes to adjust the style and layout of your forms in ways that go beyond settings in the editor.","og_url":"https:\/\/www.gravityforms.com\/css-ready-classes\/","og_site_name":"Gravity Forms","article_publisher":"https:\/\/www.facebook.com\/GravityForms","article_published_time":"2023-02-06T10:00:19+00:00","article_modified_time":"2026-03-24T20:36:30+00:00","og_image":[{"width":1236,"height":824,"url":"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes.png","type":"image\/png"}],"author":"Colin Newcomer","twitter_card":"summary_large_image","twitter_creator":"@GravityForms","twitter_site":"@GravityForms","twitter_misc":{"Written by":"Colin Newcomer","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.gravityforms.com\/css-ready-classes\/#article","isPartOf":{"@id":"https:\/\/www.gravityforms.com\/css-ready-classes\/"},"author":{"name":"Colin Newcomer","@id":"https:\/\/www.gravityforms.com\/#\/schema\/person\/94c9bd08decd89e9757d535d77499583"},"headline":"CSS Ready Classes for Gravity Forms","datePublished":"2023-02-06T10:00:19+00:00","dateModified":"2026-03-24T20:36:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.gravityforms.com\/css-ready-classes\/"},"wordCount":2310,"commentCount":5,"publisher":{"@id":"https:\/\/www.gravityforms.com\/#organization"},"image":{"@id":"https:\/\/www.gravityforms.com\/css-ready-classes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes.png","keywords":["CSS Ready Classes"],"articleSection":["Blog","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.gravityforms.com\/css-ready-classes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.gravityforms.com\/css-ready-classes\/","url":"https:\/\/www.gravityforms.com\/css-ready-classes\/","name":"CSS Ready Classes - Gravity Forms Blog","isPartOf":{"@id":"https:\/\/www.gravityforms.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.gravityforms.com\/css-ready-classes\/#primaryimage"},"image":{"@id":"https:\/\/www.gravityforms.com\/css-ready-classes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes.png","datePublished":"2023-02-06T10:00:19+00:00","dateModified":"2026-03-24T20:36:30+00:00","description":"Learn how to use Gravity Forms CSS Ready Classes to adjust the style and layout of your forms in ways that go beyond settings in the editor.","breadcrumb":{"@id":"https:\/\/www.gravityforms.com\/css-ready-classes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gravityforms.com\/css-ready-classes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gravityforms.com\/css-ready-classes\/#primaryimage","url":"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes.png","contentUrl":"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2010\/11\/Gravity-Forms-CSS-Ready-Classes.png","width":1236,"height":824,"caption":"Gravity Forms CSS Ready Classes"},{"@type":"BreadcrumbList","@id":"https:\/\/www.gravityforms.com\/css-ready-classes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Gravity Forms","item":"https:\/\/www.gravityforms.com\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.gravityforms.com\/category\/blog\/"},{"@type":"ListItem","position":3,"name":"CSS Ready Classes for Gravity Forms"}]},{"@type":"WebSite","@id":"https:\/\/www.gravityforms.com\/#website","url":"https:\/\/www.gravityforms.com\/","name":"Gravity Forms","description":"WordPress Contact Forms","publisher":{"@id":"https:\/\/www.gravityforms.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gravityforms.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.gravityforms.com\/#organization","name":"Gravity Forms","url":"https:\/\/www.gravityforms.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gravityforms.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2021\/09\/gravity-forms-logo-horizontal-744.png","contentUrl":"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2021\/09\/gravity-forms-logo-horizontal-744.png","width":774,"height":400,"caption":"Gravity Forms"},"image":{"@id":"https:\/\/www.gravityforms.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/GravityForms","https:\/\/x.com\/GravityForms","https:\/\/www.instagram.com\/gravityforms\/","https:\/\/www.linkedin.com\/company\/gravityforms\/"]},{"@type":"Person","@id":"https:\/\/www.gravityforms.com\/#\/schema\/person\/94c9bd08decd89e9757d535d77499583","name":"Colin Newcomer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gravityforms.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/42aa991c5e5152c551c3ca3aa09e84d6e08a3a40420e566d930ab289160b09bc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/42aa991c5e5152c551c3ca3aa09e84d6e08a3a40420e566d930ab289160b09bc?s=96&d=mm&r=g","caption":"Colin Newcomer"},"url":"https:\/\/www.gravityforms.com\/author\/colin-newcomer\/"}]}},"_links":{"self":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/posts\/1129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/users\/344402"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/comments?post=1129"}],"version-history":[{"count":2,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/posts\/1129\/revisions"}],"predecessor-version":[{"id":38589,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/posts\/1129\/revisions\/38589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/media\/23280"}],"wp:attachment":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/media?parent=1129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/categories?post=1129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/tags?post=1129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}