Splitting Gravity Forms fields into 2 columns

Posted on

In my current PSD > WP project one of the requirements is to display a group of Gravity Forms fields on the left and another group of fields on the right like this:

Cameron Rahman provided the code for this here.

Here’s how I implemented the same:

In the form added two Section Breaks one at the top and the other above the field that should start in right side column.

Went to the form settings, then under the Form Layout section, in the CSS Class Name field, entered two-column.

I have then added the following Cameron’s code (slightly cleaned up for better readablility) in my child theme’s functions.php:

// http://www.jordancrown.com/multi-column-gravity-forms/
function gform_column_splits( $content, $field, $value, $lead_id, $form_id ) {
if( !IS_ADMIN ) { // only perform on the front end

// target section breaks
if( $field['type'] == 'section' ) {
$form = RGFormsModel::get_form_meta( $form_id, true );

// check for the presence of multi-column form classes
$form_class = explode( ' ', $form['cssClass'] );
$form_class_matches = array_intersect( $form_class, array( 'two-column', 'three-column' ) );

// check for the presence of section break column classes
$field_class = explode( ' ', $field['cssClass'] );
$field_class_matches = array_intersect( $field_class, array('gform_column') );

// if field is a column break in a multi-column form, perform the list split
if( !empty( $form_class_matches ) && !empty( $field_class_matches ) ) { // make sure to target only multi-column forms

// retrieve the form's field list classes for consistency
$form = RGFormsModel::add_default_properties( $form );
$description_class = rgar( $form, 'descriptionPlacement' ) == 'above' ? 'description_above' : 'description_below';

// close current field's li and ul and begin a new list with the same form field list classes
return '</li></ul><ul class="gform_fields '.$form['labelPlacement'].' '.$description_class.' '.$field['cssClass'].'"><li class="gfield gsection empty">';

}
}
}

return $content;
}
add_filter( 'gform_field_content', 'gform_column_splits', 10, 5 );

Then added this in style.css:

.gform_wrapper.two-column_wrapper {
	max-width: 100%;
}

.gform_wrapper.two-column_wrapper ul.gform_fields,
.gform_wrapper.two-column_wrapper ul.gform_column li.gsection:first-child {
	display: none;
}

.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {
	display: block;
}

.gform_wrapper.two-column_wrapper ul.one-half {
	margin-left: 6% !important;
	width: 47%;
	float: left;
}
.gform_wrapper.two-column_wrapper ul.one-half.first {
	margin-left: 0 !important;
}

#input_3_2,
#input_3_3,
#input_3_4 {
	width: 100%;
}

.gform_wrapper .gsection {
	border-bottom: none !important;
}

.gform_wrapper .top_label li.gfield.gf_right_half+li.gsection {
	padding: 0 !important;
}

@media only screen and (max-width: 1075px) {
	
	.gform_wrapper.two-column_wrapper ul.one-half {
		width: 100%;
	}
	
	.gform_wrapper.two-column_wrapper ul.one-half {
		margin-left: 0 !important;
	}
	
	.gform_wrapper .gsection {
		display: none !important; /* remove !important if it's not needed */
	}
	
	#gform_wrapper_3 li {
		margin-bottom: 10px;
	}
	
}

For setting up Username and Password fields in columns, added gf_left_half Custom CSS Class for Username field and gf_right_half for the Password field.

Finally used this one line of jQuery for plucking the Submit button out of its default position and inserting it after the last field in right column:

$( "#gform_3 .gform_footer" ).insertAfter( $( "#field_3_8 .ginput_container" ) );

In my case I have added this in a JS file that’s already being loaded on the page having the form. If you don’t have one, you can set it up like this:

contact-form.js (in child theme’s js directory):

jQuery(function( $ ){

	$( "#gform_3 .gform_footer" ).insertAfter( $( "#field_3_8 .ginput_container" ) );

});

functions.php:

// Enqueue Scripts on Contact Page
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {
	if ( ! is_page( 'contact-us' ) ) {
		return;
	}
	
	wp_enqueue_script( 'contact-page', get_stylesheet_directory_uri() . '/js/contact-form.js', array( 'jquery' ), '', true );
}

where contact-page is the slug of the Page having the two column Gravity Forms form.