Tách các trường Gravity Forms thành 2 cột

Trong dự án PSD> WP hiện tại của tôi, một trong những yêu cầu là hiển thị một nhóm các trường Gravity Forms ở bên trái và một nhóm trường khác ở bên phải như sau:

Cameron Rahman đã cung cấp mã cho việc này ở đây.

Đây là cách tôi triển khai tương tự:

Trong biểu mẫu đã thêm hai Dấu ngắt phần, một ở trên cùng và một ở trên trường sẽ bắt đầu ở cột bên phải.

Đã đi đến cài đặt biểu mẫu, sau đó trong phần Bố trí biểu mẫu, trong trường Tên lớp CSS, được nhập .two-column

Sau đó, tôi đã thêm mã của Cameron sau (được làm sạch một chút để dễ đọc hơn) trong functions.php của chủ đề con của tôi :

// 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 );

Sau đó, thêm cái này vào 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;
	}
	
}

Để thiết lập trường Tên người dùng và Mật khẩu trong cột, đã thêm gf_left_half Lớp CSS tùy chỉnh cho trường Tên người dùng và gf_right_half cho trường Mật khẩu.

Cuối cùng đã sử dụng một dòng jQuery này để loại bỏ nút Gửi ra khỏi vị trí mặc định của nó và chèn nó vào sau trường cuối cùng trong cột bên phải:

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

Trong trường hợp của tôi, tôi đã thêm điều này vào một tệp JS đã được tải trên trang có biểu mẫu. Nếu bạn chưa có, bạn có thể thiết lập nó như sau:

contact-form.js (trong js thư mục của chủ đề con ):

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 );
}

đâu là slug của Trang có dạng Gravity Forms hai cột.contact-page