Before I start demonstrating how to customize Gravity Forms with CSS ready classes, I would like to give you a small introduction of both of them.

So, what are Gravity Forms?

Gravity Forms is a WordPress plugin for creating any kind of forms to collect useful information. It’s a great tool.

Gravity Forms are defined in PHP format that uses a full number of WordPress built-in functionalities as well as wide range of intelligent features to enhance its shape builder. Gravity Forms uses a MySQL database system like WordPress but stores all your forms and entries within the tables itself.

It’s good to know that Gravity Forms is open sourced and GPL licensed. It’s coded in an unencrypted format and enables developers to modify it easily. There are various ways to customize Gravity Forms.

Are you a front-end developer or a web designer? This tool will make your life a lot easier

Let’s take a look at CSS Ready Classes

Ready Classes are defined as class names that can be added to the parent section surrounded by each field to experience the advantage of pre-defined styles that are included in the default form stylesheet section.

Now let’s see how to customize Gravity Forms with the help of CSS Ready Classes

Well, no built-in process exists to design Gravity Forms for WordPress that will generate a positive and multi-column form layout output. But, if we see its positive side, then it can easily be done by using a single filter option and a few CSS features.

Originally Gravity Forms doesn’t support something like this. But they have CSS Ready Classes to design fields that will easily arrange a varied number of form inputs in multiple columns at the time they are ordered one after the other. Think about the case when you want to make all the fields appear side by side and it shouldn’t contextually be one after the other? How about this situation?

Well, I think if we look from a user’s viewpoint, it’s making more sense to design a form’s left column of fields before we start creating the right column. In this way, you might get away with using Gravity Form’s CSS Ready Classes to design them in an exact way as you always want it to be. On the other side, you had left considering the situations when the form has to turn into a single column layout, for example on a mobile device.

So what exactly is happening? Let’s see

This is the HTML output designed into an unsorted list, while demonstrating with the .gform_field class:

<ul id=”gform_fields_1″ class=”gform_fields top_label description_below”>

<li id=”field_1_1″ class=”gfield”><label class=”gfield_label” for=”input_1_1″>Field 1</label>

<div class=”ginput_container”><input id=”input_1_1″ class=”medium” tabindex=”1″ name=”input_1″ type=”text” value=”” /></div></li>

<li id=”field_1_2″ class=”gfield”><label class=”gfield_label” for=”input_1_2″>Field 2</label>

<div class=”ginput_container”><input id=”input_1_2″ class=”medium” tabindex=”2″ name=”input_2″ type=”text” value=”” /></div></li>

<li id=”field_1_3″ class=”gfield”><label class=”gfield_label” for=”input_1_3″>Field 3</label>

<div class=”ginput_container”><textarea id=”input_1_3″ class=”textarea medium” tabindex=”3″ cols=”50″ name=”input_6″ rows=”10″></textarea></div></li>

</ul>

According to my opinion, I think the most logical process of splitting the third field from the first two would be to include the process of separating it into its list. It would be better if we get the form’s fields in an organized way into two different files, and then we can easily specify them in float left to access a two column layout process in a manner that will still be able to revert to a stacked layout format for various narrower devices.

Do you want a better issue tracking workflow and seamless project management with it? Watch the video

How will you work with splitting the columns?

To divide the fields’ list into various sections, it is always better to decide first about where exactly you want these splits to occur? So, this is one form that can easily be put into use by appending an extraordinary area break component to the form by using form editor. The next step is to mark these by a column break format by attaching special classes to these section breaks, for example: .gform_column.

While working with Gravity Forms’ gform_field_content filter section, you will notice that it’s quite easy to add breaks directly to unordered lists that will define your column breaks efficiently:

function gform_column_splits($content, $field, $value, $lead_id, $form_id) {

if(IS_ADMIN) return $content; // only modify HTML on the front end

$form = RGFormsModel::get_form_meta($form_id, true);

$form_class = array_key_exists(‘cssClass’, $form) ? $form[‘cssClass’] : ”;

$form_classes = preg_split(‘/[

\r\t ]+/’, $form_class, -1, PREG_SPLIT_NO_EMPTY);

$fields_class = array_key_exists(‘cssClass’, $field) ? $field[‘cssClass’] : ”;

$field_classes = preg_split(‘/[

\r\t ]+/’, $fields_class, -1, PREG_SPLIT_NO_EMPTY);

// multi-column form functionality

if($field[‘type’] == ‘section’) {

// check for the presence of multi-column form classes

$form_class_matches = array_intersect($form_classes, array(‘two-column’, ‘three-column’));

// check for the presence of section break column classes

$field_class_matches = array_intersect($field_classes, 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

$ul_classes = GFCommon::get_ul_classes($form).’ ‘.$field[‘cssClass’];

// close current field’s li and ul and begin a new list with the same form field list classes

return ‘</li></ul><ul class=”‘.$ul_classes.'”><li class=”gfield gsection empty”>’;

}

}

return $content;

}

add_filter(‘gform_field_content’, ‘gform_column_splits’, 10, 5);

Before moving on to the next step, it should be noted that we’ve added the field’s CSS class to the new <ul>. This way it will allow you to define various lists to apply a CSS float. Below I show the code which is the result after you have applied the filter:

<ul id=”gform_fields_1″ class=”gform_fields top_label description_below”>

<li id=”field_1_1″ class=”gfield gsection gform_column”></li>

</ul>

<ul class=”gform_fields top_label description_below gform_column”>

<li class=”gfield gsection”></li>

<li id=”field_1_2″ class=”gfield”><label class=”gfield_label” for=”input_1_2″>Field 1</label>

<div class=”ginput_container”><input id=”input_1_2″ class=”medium” tabindex=”1″ name=”input_2″ type=”text” value=”” /></div></li>

<li id=”field_1_3″ class=”gfield”><label class=”gfield_label” for=”input_1_3″>Field 2</label>

<div class=”ginput_container”><input id=”input_1_3″ class=”medium” tabindex=”2″ name=”input_3″ type=”text” value=”” /></div></li>

<li id=”field_1_4″ class=”gfield gsection gform_column”></li>

</ul>

<ul class=”gform_fields top_label description_below gform_column”>

<li class=”gfield gsection”></li>

<li id=”field_1_5″ class=”gfield”><label class=”gfield_label” for=”input_1_5″>Field 3</label>

<div class=”ginput_container”><textarea id=”input_1_5″ class=”textarea medium” tabindex=”3″ cols=”50″ name=”input_5″ rows=”10″></textarea></div></li>

</ul>

Now, we have successfully built the development step of splitting the third field into the list.

How to go with the procedure of column styling?

In this step, we can easily go with style development process of the form to make all the groups appear side by side. Well, you should be aware of the fact that an actual CSS will differ from project to project, depending on the website’s designing process, but this would lead to the process of accomplishing the two-column layout:

.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;

}

So, we have finally created a multi-column form layout that can be easily reformed again into a single column and will simultaneously maintain each column’s fields grouped into one place.

Author Biography: Peter Gomes is a WP developer in Designs2html Ltd, a top rated website design and development company which converts websites to WordPress easily for anyone. Peter is also a free time blogger who loves to write about new WP techniques.

The makers of DebugMe hope that you like this post and would love it if you follow us on Twitter. We are tweeting about web design, UI/UX and development related topics multiple times a day. DebugMe is an issue tracking, project management and screenshot tool for every website project. Get visual feedback right away and solve front-end problems faster. Try it now for free.