If using Gravity forms, It is likely that you will require columns sooner or later. The reason is simple – gravity forms are normally not used for simple contact forms, given their power and the fact that they are not free, so licenses for GF are being purchased by clients who know exactly what are they looking for.
Some forms tend to be very big, spanning over multiple pages. Thankfully, this feature is built in into gravity forms by default, but creating columns is not. You may be tempted to try any of CSS ready classes, but I’m not really sure how convenient they are for any advanced layout with multiple fields in each column.
As it is the case with most great WordPress plugins, Gravity Forms also offers a wide variety of hooks and actions enabling you to extend its functionality. If you tried to Google something like “GF multiple columns”, there is chance that you stumbled upon this solution, created by some great folks in Jordan Crown Web Design. Afterwards, this solution was slightly altered and published on Stack Overflow. They suggest that you should put this code into functions.php, but I prefer wrapping the whole thing into plugin, because having multiple columns in Gravity Forms is not a matter of the theme, but a matter of a plugin and I bet that sooner or later you will change the theme and in that case you would lose the column functionality.
1. Add a plugin
So this is how it goes – first we have a plugin ( you can download it here) – not much code added, only plugin headers.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php /** * Plugin Name: Gravity Forms Columns * Plugin URI: http://www.gravityforms.com/ * Description: Gravity Forms Columns * Author: Multiple Authors * Author URI: http://www.gravityforms.com/ * Version: 1.0 */ function gform_column_splits($content, $field, $value, $lead_id, $form_id) { if(!is_admin()) { // only perform on the front end 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', 100, 5); ?> |
2. Form settings
The combination of section breaks and few CSS classes is what activates this thing. First of all, you need to add CSS class name on the whole form. Use either two-column or three-column, depending on what kind of layout you want to achieve.
3. Section breaks
Once you did this, you can refer the following image – for every column you need, you’ll want to add custom CSS class on section break. That CSS class needs to be gform_column. Be aware that if you don’t put brakes on a page, nothing will appear on that page, so these are kinda mandatory.
4. Custom CSS
Eventually, you’ll need some CSS. This is just an example for two columns, so you will likely want to add margins, padding, etc.
|
1 2 3 4 5 6 7 8 9 10 11 |
.gform_wrapper.two-column_wrapper ul.gform_fields { display: none; } .gform_wrapper.two-column_wrapper ul.gform_fields.gform_column { display: block; float: left; width: 50%; } .gform_wrapper.two-column_wrapper ul.gform_column li.gsection:first-child { display: none; } |
That’s all folks!