Introduction
If your forms use CSS Ready Classes, now is the time to begin transitioning to the Layout Editor or custom CSS solutions to ensure compatibility with upcoming versions of Gravity Forms.
Image showing Ready Classes deprecation notice in the Form Editor
Image showing Ready Classes deprecation notice in the Form Settings.
In this guide, you will find:
- A complete list of deprecated Ready Classes.
- Recommended alternatives using Layout Editor settings.
- CSS examples for replicating standard Ready Class functionality.
Note: With the release of Gravity Forms 3.1, support for legacy markup will be fully removed. This change marks the end of the original markup structure introduced in 2009 and finalizes the platform’s transition to modern form rendering. Although modern markup has been available since version 2.5, many forms still rely on legacy markup features, including Ready Classes, for layout control. Refer to the CSS Ready Classes Migration guide for more information.
CSS Ready Classes
| Class | Status | Alternative |
|---|---|---|
| gf_left_half | Deprecated since Gravity Forms 2.5 | Use Column Features. |
| gf_right_half | Deprecated since Gravity Forms 2.5 | Use Column Features. |
| gf_left_third | Deprecated since Gravity Forms 2.5 | Use Column Features. |
| gf_middle_third | Deprecated since Gravity Forms 2.5 | Use Column Features. |
| gf_right_third | Deprecated since Gravity Forms 2.5 | Use Column Features. |
| gf_first_quarter | Deprecated since Gravity Forms 2.5 | Use Column Features. |
| gf_second_quarter | Deprecated since Gravity Forms 2.5 | Use Column Features. |
| gf_third_quarter | Deprecated since Gravity Forms 2.5 | Use Column Features. |
| gf_fourth_quarter | Deprecated since Gravity Forms 2.5 | Use Column Features. |
| gf_inline | Deprecated since Gravity Forms 2.5 | Use Column Features. |
| gf_list_2col | Deprecation Planned in Gravity Forms 3.1 | Use Field Settings in the Form Editor. |
| gf_list_3col | Deprecation Planned in Gravity Forms 3.1 | Use Field Settings in the Form Editor. |
| gf_list_4col | Deprecation Planned in Gravity Forms 3.1 | Use Field Settings in the Form Editor. |
| gf_list_5col | Deprecation Planned in Gravity Forms 3.1 | Use Field Settings in the Form Editor. |
| gf_list_2col_vertical | Deprecation Planned in Gravity Forms 3.1 | Use Field Settings in the Form Editor. |
| gf_list_3col_vertical | Deprecation Planned in Gravity Forms 3.1 | Use Field Settings in the Form Editor. |
| gf_list_4col_vertical | Deprecation Planned in Gravity Forms 3.1 | Use Field Settings in the Form Editor. |
| gf_list_5col_vertical | Deprecation Planned in Gravity Forms 3.1 | Use Field Settings in the Form Editor. |
| gf_list_inline | Deprecation Planned in Gravity Forms 3.1 | Migrate to the Multiple Choice field and use Aligment setting. |
| gf_list_height_25 | Deprecation Planned in Gravity Forms 3.1 | Modern CSS ensures they are displayed at the same height. |
| gf_list_height_50 | Deprecation Planned in Gravity Forms 3.1 | Modern CSS ensures they are displayed at the same height. |
| gf_list_height_75 | Deprecation Planned in Gravity Forms 3.1 | Modern CSS ensures they are displayed at the same height. |
| gf_list_height_100 | Deprecation Planned in Gravity Forms 3.1 | Modern CSS ensures they are displayed at the same height. |
| gf_list_height_125 | Deprecation Planned in Gravity Forms 3.1 | Modern CSS ensures they are displayed at the same height. |
| gf_list_height_150 | Deprecation Planned in Gravity Forms 3.1 | Modern CSS ensures they are displayed at the same height. |
| gf_alert_green | Deprecated since Gravity Forms 2.9.15 | Use a custom CSS. See Code Snippets |
| gf_alert_red | Deprecated since Gravity Forms 2.9.15 | Use a custom CSS. See Code Snippets |
| gf_alert_yellow | Deprecated since Gravity Forms 2.9.15 | Use a custom CSS. See Code Snippets |
| gf_alert_gray | Deprecated since Gravity Forms 2.9.15 | Use a custom CSS. See Code Snippets |
| gf_alert_blue | Deprecated since Gravity Forms 2.9.15 | Use a custom CSS. See Code Snippets |
| gf_confirmation_simple_yellow | Deprecated since Gravity Forms 2.9.15 | Use a custom CSS. See Code Snippets |
| gf_confirmation_simple_gray | Deprecated since Gravity Forms 2.9.15 | Use a custom CSS. See Code Snippets |
| gf_confirmation_yellow_gradient | Deprecated since Gravity Forms 2.9.15 | Use a custom CSS. See Code Snippets |
| gf_confirmation_green_gradient | Deprecated since Gravity Forms 2.9.15 | Use a custom CSS. See Code Snippets |
| gf_simple_horizontal | Deprecated since Gravity Forms 2.6 | You can use Drag and Drop columns and the Submit Button Location setting. |
| gf_scroll_text | Deprecated since Gravity Forms 2.9.15 | Use a custom CSS. See Code Snippets |
| gf_hide_ampm | Deprecated since Gravity Forms 2.9.15 | Use a custom CSS. See Code Snippets |
| gf_hide_charleft | Deprecated since Gravity Forms 2.9.15 | Use a custom CSS. See Code Snippets |
Code Snippets
/*
gf_alert_green
*/
.gform_wrapper .gfield.gfield_html .gf_alert_green {
border-radius: 3px;
margin-block: 1.25rem !important;
margin-inline: 0 !important;
padding: 1.25rem !important;
background-color: #cbeca0;
border: 1px solid #97b48a;
color: #030;
text-shadow: #dfb 1px 1px;
}
/*
gf_alert_red
*/
.gform_wrapper .gfield.gfield_html .gf_alert_red {
border-radius: 3px;
margin-block: 1.25rem !important;
margin-inline: 0 !important;
padding: 1.25rem !important;
background-color: #faf2f5;
border: 1px solid #cfadb3;
color: #832525;
text-shadow: #fff 1px 1px;
}
/*
gf_alert_yellow
*/
.gform_wrapper .gfield.gfield_html .gf_alert_yellow {
border-radius: 3px;
margin-block: 1.25rem !important;
margin-inline: 0 !important;
padding: 1.25rem !important;
background-color: #fffbcc;
border: 1px solid #e6db55;
color: #222;
text-shadow: #fcfaea 1px 1px;
}
/*
gf_alert_gray
*/
.gform_wrapper .gfield.gfield_html .gf_alert_gray {
border-radius: 3px;
margin-block: 1.25rem !important;
margin-inline: 0 !important;
padding: 1.25rem !important;
background-color: #eee;
border: 1px solid #ccc;
color: #424242;
text-shadow: #fff 1px 1px;
}
/*
gf_confirmation_simple_yellow
*/
.gform_confirmation_wrapper .gf_confirmation_simple_yellow {
background-color: #fffbcc;
border-block: 1px solid #e6db55;
color: #424242;
font-size: 25px;
margin-block: 30px;
margin-inline: 0;
max-inline-size: 99%;
padding: 32px;
}
/*
gf_confirmation_simple_gray
*/
.gform_confirmation_wrapper .gf_confirmation_simple_gray {
background-color: #eaeaea;
border-block: 1px solid #ccc;
color: #424242;
font-size: 25px;
margin-block: 30px;
margin-inline: 0;
max-inline-size: 99%;
padding: 32px;
}
/*
gf_confirmation_yellow_gradient
*/
.gform_confirmation_wrapper .gf_confirmation_yellow_gradient {
background-color: #fffbd2;
border: 1px solid #e6db55;
box-shadow: 0 0 5px rgba(221, 215, 131, 0.75);
margin-block: 30px;
margin-inline: 0;
position: relative;
}
.gform_confirmation_wrapper .gf_confirmation_yellow_gradient .gform_confirmation_message {
background: #fffce5;
background: -moz-linear-gradient(top, #fffce5 0%, #fff9bf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fffce5), color-stop(100%, #fff9bf));
background: -webkit-linear-gradient(top, #fffce5 0%, #fff9bf 100%);
background: -o-linear-gradient(top, #fffce5 0%, #fff9bf 100%);
background: -ms-linear-gradient(top, #fffce5 0%, #fff9bf 100%);
background: linear-gradient(to bottom, #fffce5 0%, #fff9bf 100%);
background-color: #fffbcc;
border-block-end: 1px solid #e6db55;
border-block-start: 2px solid #fff;
color: #424242;
font-size: 28px;
margin: 0;
max-inline-size: 99%;
padding: 40px;
}
.gform_confirmation_wrapper .gf_confirmation_yellow_gradient::before,
.gform_confirmation_wrapper .gf_confirmation_yellow_gradient::after {
background: rgba(0, 0, 0, 0.2);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
content: "";
inline-size: 50%;
inset-block: 80% 15px;
inset-inline-start: 10px;
max-inline-size: 40%;
position: absolute;
transform: rotate(-3deg);
z-index: -1;
}
/*
gf_confirmation_green_gradient
*/
.gform_confirmation_wrapper .gf_confirmation_green_gradient {
background-color: #f1fcdf;
border: 1px solid #a7c37c;
box-shadow: 0 0 5px rgba(86, 122, 86, 0.4);
margin-block: 30px;
margin-inline: 0;
position: relative;
}
.gform_confirmation_wrapper .gf_confirmation_green_gradient .gform_confirmation_message {
background: rgb(219, 242, 183);
background: -moz-linear-gradient(top, rgba(219, 242, 183, 1) 0%, rgba(180, 208, 136, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(219, 242, 183, 1)), color-stop(100%, rgba(180, 208, 136, 1)));
background: -webkit-linear-gradient(top, rgba(219, 242, 183, 1) 0%, rgba(180, 208, 136, 1) 100%);
background: -o-linear-gradient(top, rgba(219, 242, 183, 1) 0%, rgba(180, 208, 136, 1) 100%);
background: -ms-linear-gradient(top, rgba(219, 242, 183, 1) 0%, rgba(180, 208, 136, 1) 100%);
background: linear-gradient(to bottom, rgba(219, 242, 183, 1) 0%, rgba(180, 208, 136, 1) 100%);
background-color: #fffbcc;
border-block-end: 1px solid #a7c37c;
border-block-start: 2px solid #effade;
color: #030;
font-size: 28px;
margin: 0;
max-inline-size: 99%;
padding: 40px;
text-shadow: #dfb 1px 1px;
}
.gform_confirmation_wrapper .gf_confirmation_green_gradient::before,
.gform_confirmation_wrapper .gf_confirmation_green_gradient::after {
background: rgba(0, 0, 0, 0.2);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
content: "";
inline-size: 50%;
inset-block: 80% 15px;
inset-inline-start: 10px;
max-inline-size: 40%;
position: absolute;
transform: rotate(-3deg);
z-index: -1;
}
/*
gf_scroll_text
*/
.gform_wrapper .gsection.gf_scroll_text {
background-color: #fff;
block-size: 15rem;
border: 1px solid #ccc;
overflow-x: hidden;
overflow-y: scroll;
padding: 2rem;
}
.gform_wrapper .gsection.gf_scroll_text .gsection_title {
margin-block-start: 0;
}
/*
gf_hide_ampm
*/
.gform_wrapper .gf_hide_ampm .gfield_time_ampm {
display: none !important;
}
/*
gf_hide_charleft
*/
.gform_wrapper .gf_hide_charleft .charleft {
display: none !important;
}
/*
gf_invisible
*/
.gform_wrapper .gf_invisible {
left: -9999px;
position: absolute;
visibility: hidden;
}