Styling Gravity Forms, especially how the fields are laid out within the form, gives forms a significant usability boost. Gravity Forms don’t look too bad out of the box, but some thought and consideration into how the fields are laid out within the form will make it easier to use.
The first thing is the layout. The next is asking for the information you need when you need it. We will dig into this in the next post. For now, we will talk about how to lay out a form using Gravity Forms.
A fundamental principle of UX is “Don’t make me think.” Accepting this, you don’t want users to struggle with the form. You want them to immediately see what’s required and understand how they should respond.
The default Gravity Form layout stacks the fields. There are times when this is fine. Not many times, but I’m sure it happens. Rather than stacking the fields fill the area with form fields in a way that makes it easy to see what information is needed and how to provide it. Fortunately, styling Gravity Forms with Ready Classes lets you do this.
So what are Ready Classes?
They are labels that CSS uses to tells the browser where and how to position something. The complete list of Gravity Forms Ready Classes can be found by following this link: Gravity Forms Ready Classes.
Styling Gravity Forms Fields – Columns Ready Classes
You can choose between two columns (Halves) and three columns (Thirds). The logic is obvious: gf_left_half and gf_right_half will position the fields in a row of two, one left and one right. gf_left_third, gf_middle_third and gf_right_third sets up a row with three fields in it.
Styling Gravity Forms – List Ready Classes
In addition to columns for fields, there are Ready Classes to convert lists into columns. What would be more appealing, a single column of twelve radio buttons with white space to the right or would it be more appealing to have the twelve radio buttons laid out in three columns of four? With the Gravity Forms List Ready Class, gf_list_3col, this is possible.
There are multiple column List Classes: _2col, _3col, 4, 5 6 and inline, that you can use. “Inline” places the list items in a line under the field’s label.
Another handy Ready Class is List Hight, gf_list_height_25. This Ready Class only works with multiple choice/checkbox lists. It adds padding to the height value of items in your list. Handy when you have items hanging because they are of uneven height. List hights are available from 25px through 150px in increments of 25.
Other Gravity Forms Ready Classes
But wait, there’s more!
gf_scroll_text – a Ready Class that adds a scroller to the Section Break. This is handy for adding Term & Conditions to a form.
gf_hide_ampm – a Ready Class that hides the am and pm in the time field. This manages the am and pm labels on the form.
gf_hide_charleft – a Ready Class that hides the characters left indicator on the paragraph form when using the max characters control.
An attractive form is friendly. A friendly form is more likely to be completed. Put some thought into styling gravity forms, use the existing tools to make it easy for users to provide the information you need.