Migrating Your Forms from Ready Classes

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 Editor

Image showing Ready Classes deprecation notice in the Form Settings.

Image showing Ready Classes deprecation notice in the Form Editor

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

ClassStatusAlternative
gf_left_halfDeprecated since Gravity Forms 2.5Use Column Features
gf_right_halfDeprecated since Gravity Forms 2.5Use Column Features
gf_left_thirdDeprecated since Gravity Forms 2.5Use Column Features
gf_middle_thirdDeprecated since Gravity Forms 2.5Use Column Features
gf_right_thirdDeprecated since Gravity Forms 2.5Use Column Features
gf_first_quarterDeprecated since Gravity Forms 2.5Use Column Features
gf_second_quarterDeprecated since Gravity Forms 2.5Use Column Features
gf_third_quarterDeprecated since Gravity Forms 2.5Use Column Features
gf_fourth_quarterDeprecated since Gravity Forms 2.5Use Column Features
gf_inlineDeprecated since Gravity Forms 2.5Use Column Features
gf_list_2colDeprecation Planned in Gravity Forms 3.1Settings will be added in the Form Editor.
gf_list_3colDeprecation Planned in Gravity Forms 3.1Settings will be added in the Form Editor.
gf_list_4colDeprecation Planned in Gravity Forms 3.1Settings will be added in the Form Editor.
gf_list_5colDeprecation Planned in Gravity Forms 3.1Settings will be added in the Form Editor.
gf_list_2col_verticalDeprecation Planned in Gravity Forms 3.1Settings will be added in the Form Editor.
gf_list_3col_verticalDeprecation Planned in Gravity Forms 3.1Settings will be added in the Form Editor.
gf_list_4col_verticalDeprecation Planned in Gravity Forms 3.1Settings will be added in the Form Editor.
gf_list_5col_verticalDeprecation Planned in Gravity Forms 3.1Settings will be added in the Form Editor.
gf_list_inlineDeprecation Planned in Gravity Forms 3.1Settings will be added in the Form Editor.
gf_list_height_25Deprecation Planned in Gravity Forms 3.1Modern CSS ensures they are displayed at the same height.
gf_list_height_50Deprecation Planned in Gravity Forms 3.1Modern CSS ensures they are displayed at the same height.
gf_list_height_75Deprecation Planned in Gravity Forms 3.1Modern CSS ensures they are displayed at the same height.
gf_list_height_100Deprecation Planned in Gravity Forms 3.1Modern CSS ensures they are displayed at the same height.
gf_list_height_125Deprecation Planned in Gravity Forms 3.1Modern CSS ensures they are displayed at the same height.
gf_list_height_150Deprecation Planned in Gravity Forms 3.1Modern CSS ensures they are displayed at the same height.
gf_alert_greenDeprecated since Gravity Forms 2.9.15Use a custom CSS. See Code Snippets
gf_alert_redDeprecated since Gravity Forms 2.9.15Use a custom CSS. See Code Snippets
gf_alert_yellowDeprecated since Gravity Forms 2.9.15Use a custom CSS. See Code Snippets
gf_alert_grayDeprecated since Gravity Forms 2.9.15Use a custom CSS. See Code Snippets
gf_alert_blueDeprecated since Gravity Forms 2.9.15Use a custom CSS. See Code Snippets
gf_confirmation_simple_yellowDeprecated since Gravity Forms 2.9.15Use a custom CSS. See Code Snippets
gf_confirmation_simple_grayDeprecated since Gravity Forms 2.9.15Use a custom CSS. See Code Snippets
gf_confirmation_yellow_gradientDeprecated since Gravity Forms 2.9.15Use a custom CSS. See Code Snippets
gf_confirmation_green_gradientDeprecated since Gravity Forms 2.9.15Use a custom CSS. See Code Snippets
gf_simple_horizontalDeprecated since Gravity Forms 2.6You can use Drag and Drop columns and the Submit Button Location setting.
gf_scroll_textDeprecated since Gravity Forms 2.9.15Use a custom CSS. See Code Snippets
gf_hide_ampmDeprecated since Gravity Forms 2.9.15Use a custom CSS. See Code Snippets
gf_hide_charleftDeprecated since Gravity Forms 2.9.15Use 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;
}