Last active
August 7, 2018 23:25
-
-
Save srikat/b0a88c86f0019b8e1456 to your computer and use it in GitHub Desktop.
Splitting Gravity Forms fields into 2 columns. https://sridharkatakam.com/splitting-gravity-forms-fields-into-2-columns/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(function( $ ){ | |
$( "#gform_3 .gform_footer" ).insertAfter( $( "#field_3_8 .ginput_container" ) ); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$( "#gform_3 .gform_footer" ).insertAfter( $( "#field_3_8 .ginput_container" ) ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 ); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for this Sri. It would be good to replace line 10 in the functions.php above with this:
This will avoid the error that shows up on forms that have sections but no form level CSS class set.
Also, line 21 in the functions.php above is deprecated and throws errors. I commented it out and the function works, but there might be side effects that I'm not aware of yet.