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.
and
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.
I was just looking at how to do this the other day!
You’re the best!
For what it’s worth, I put the “Submit” / “Send” button on the right by just inserting this CSS snippet rather than adding a separate function to my functions.php:
div.gform_wrapper .gform_footer input[type="submit"] {
float:right;
}
That would probably work if both the columns have around the same height. Otherwise there will be extra space beneath the right column if I am not mistaken.
Notice: GFFormsModel::add_default_properties is deprecated since version 1.9 with no alternative available.
New to WP, Gravity Forms, and everything this entails. I’ve figured out the two columns and your post is helpful. I’m trying to track down a way to include the column layout when our Notification is sent and can’t seem to figure it out. Mind you, I have an accounting background, not developer so code etc… is not natural to me.
We’re using WP for our company intranet so the columns add a lot of value to the notification.
Hi, Sridhar! This is very helpful. I’m trying to tweak it a bit to instead highlight a particular section of a form with a background color. I’ve got it almost working, but I noticed that the code removes the label for the Section Break and instead inserts an empty element with the classes appended to it, like this:
Any suggestions on what I should change to show the field label of the Section Break instead of just an empty ? Here’s a gist:
https://gist.github.com/DMSpeed/62e28391c2e704fd15c7
Appreciate any assistance! I tried adding esc_html( GFCommon::get_label( $field ) ) after the new is created, but the problem is that it automatically will show the label for that section, even if the entire section is supposed to be hidden due to conditional logic rules.
Bah – I didn’t format my comment correctly. What I mean is that it creates an empty “ element. (Hoping that comes across more clearly…an empty li tag…)
Hi,
I’m attempting this, or to at least spliting the UL into 2 unordered lists – but no joy. The outputed html is not affected.
Can anyone confirm this works in GF Version 1.9.14 – the current version at time of writing.
regards
Peter
It does not work in the newest release…which sucks, you’d think GF would add this functionality to the form already
I have just tested this in the current latest GF version which is 1.9.14.19 and the steps in this tutorial work fine.
http://d.pr/i/zZJC
Here is the export file of my form: http://d.pr/f/1duAo
I can’t get this to work on the newest release – any update?
https://sridharkatakam.com/splitting-gravity-forms-fields-into-2-columns/#comment-401029
Interesting…. It’s not working for me either in the latest version of GF. It makes the appearance as though it will work. It does make the columns but put everything in the first column and nothing in the second.
If you can provide me with WP login for the site where the problem is present, I shall log in and give it a try.
https://sridharkatakam.com/contact/
Got your site’s login. I see multiple (more than two) section break fields having the
gform_columnclasses. You need to only have 2 – one above the left column and the other above where you want the right column to start.Can you update your form and let me know when done?
Yes I have now taken them out. They were only in for a test, because when I added your code to create the 2 columns, 2 of my sections disappeared. When I added form_column in those sections they re-appeared. I have a section at the top and a section at the bottom that I do not want in 2 columns. The middle section I would like split into 2 columns.
You just need to add
float: leftto.one-halfselector. Check the Page on which your form is now. It should be fine now. I have also updated my post with this additional CSS. The reason it wasn’t there initially was because Genesis comes included with it and I use only Genesis for all my website builds.Yes, it is working now. Although, I still had to add gform_column to the sections that I do not want to be full width and not in a column. If I do not put gform_column in that section will not be visible or it will be included in the columns(in which I do not want). But all appears to be working now the way I was wanting. Thanks for your help.
Hey guys it’s working well with GF 1.9
Just add Float left for the first section class css et float right for the other…
Thank you for your share.
Hi I have a problem with the jQuery code that moves the submit button.
If I click submit on a form with missing data in mandatory fields, when it reloads and shows the missing data fields in red, the submit button goes back to the bottom of the form. Any idea how to solve it?
Hi there,
CSS class name option is not in any of the fields under Advanced tab. Have you seen this before, Sridhar?
Thank you!
Just checked in the current latest version of Gravity Forms, v1.9.16.6 and it’s still there. Look under the Appearance tab.
http://d.pr/i/zJH1n
http://d.pr/i/1fuoX
Hi Guys,
What about using
ul.gform_fields {
-moz-column-count: 2;
-moz-column-gap: 2.5em;
-webkit-column-count: 2;
-webkit-column-gap: 2.5em;
column-count: 2;
column-gap: 2.5em;
}
Thanks @John – your suggestion was the only one that worked for me – after about 2 hours of working on this problem on a client site. Many blessings to you.
This works great in general, but I’ve got two questions if you don’t mind.
1- Is there a way to disable this for specific sections between breaks? As in I’d only like page 2 and 3 to be in 2 columns.
2- Is there a way to specify where the break into the 2nd column occurs? Right now it’s breaking mine in an awkward spot.
Awesome man. I am doing this on https://usabledev.com/meritsoft/company/contact/
Thank you, very much!
Hi! Thank you for sharing this, I’ve tried it on the site I’m working in it’s working great. Unfortunately it does not work when I change the screen size. Is there any way to fix this?
I can’t work out why this isn’t working on my form. Would you be able to have a look and see if you can see the problem, please?
Can you provide the URL?
[…] Splitting Gravity Forms fields into 2 columns […]
Wasn’t working for me. Read through the comments and discovered needed to add “float: left” to .gform_wrapper.two-column_wrapper ul.one-half { }. For people who come here and only copy and paste the code, would be great if the author could update the code on this page with float: left.
Done.
Hey, awesome code, thx!
I have one question – in my left column i have a section that changes based on the right side input. (also in height) – I’d like to put the submit button on the right column, however unfortunately it moves because of the left side’s content height. is there a way to fix it on the right side?
Thanks for your help!
I fixed that 🙂 Another question – i’d like to enqueue the script on multiple pages – i did that by using :
if ( ! is_page( array( 'ocr-meter-reading', 'met-test' )) ) {
however, on ‘met-test’ the button is still not placed on the right side and moves if the form height changes.
Any idea why?
This is the enqueue code:
// Enqueue Scripts on MET-test Page
add_action( ‘wp_enqueue_scripts’, ‘sk_enqueue_scripts’ );
function sk_enqueue_scripts() {
if ( ! is_page( array( ‘ocr-meter-reading’, ‘met-test’ )) ) {
return;
}
wp_enqueue_script(‘submit-button’, get_stylesheet_directory_uri() . ‘/js/contact-form.js’, array( ‘jquery’ ), ”, true );}
Thanks for your help 🙂