The advent of “Ready Classes” in Gravity Forms 1.5 is a blessing in disguise for so many web designers who are enthusiastic about styling or changing the layout of their forms. With the help of these CSS ready classes, webmasters can now tweak the layouts or fields of their forms to suit the taste of their target audience. They can now take their forms to the craft table and make them more evoking and compelling than ever.
In its bare bones, Ready Classes are actually class names that can be added to the parent elements surrounding each field, and in turn, they change the appearance of your forms with the help of default styles that reside in the stylesheet.
Understanding The Usage of Ready Classes
Playing around Ready Classes isn’t an uphill battle, all you need is just edit your form in the Form Builder and then choose the field wherein you wish to add the classes. After this, click on the “Advanced” tab and enter the CSS class or name in the “CSS class name” field. Now, save the changes.
The Ready Class Names and Their Purpose
Below is the list of Ready Classes that you can find in the default stylesheet of Gravity Forms. You can make the most out of them and customize the overall look and feel of your form.
Halves (2 Columns)
Please note: The following functions are only compatible with the “Top Label” form layout option and is mainly used in left half/right half pairing to ensure to make it work perfectly.
- gf_left_half- Use this function to position your field in the left column of a layout containing two columns.
- gf_right_half- This function is used to position the field in the right column of a two column layout.
The following classes can be added to align two fields. The fields should be set in a manner that they stay adjacent to each other in the Form Builder. In addition, the class gf_left_half needs be added to the first field whereas gf_right_half class should be added to the second field.
Output
Similarly, you can use the gf_middle_ third class to create three fields. Just like this:
Knowing About List Classes
gf_list_2Col
Use this class to convert any multiple choice or checkbox style list into an equally-spaced 2 column format.
gf_list_3Col
This class is used to turn a multiple choice or checklist style form into an equally-spaced 3 column format.
gf_list_4Col
This class can be used to convert the checkboxes into 4 columns formats that are positioned equally. This class only works with the checkbox lists and along with the form label settings of your choice.
gf_list_5Col
This class can be used to convert the checkboxes into 5 columns formats that are positioned equally. This class only works with the checkbox lists and along with the form label settings of your choice.
gf_list_inline
Use this class to place the fields in a way that they remain inlined horizontally with other fields. The class is only compatible with checkbox lists and can be used with the form label position settings as per your choice. This function is ideal for fields with different sizes or creating horizontal layout without actually spacing columns.
gf_list_height_25
With the help of this class, it becomes easy for you to assign 25px height value to all the items of the checkbox. In addition, this class allows you to steer clear “hanging floats” that usually occur when you list the items having uneven heights. Use this class only with items checkbox lists.
gf_list_height_50
With the help of this class, it becomes easy for you to assign 50px height value to all the items of the checkbox. In addition, this class allows you to steer clear “hanging floats” that usually occur when you list the items having uneven heights. Use this class only with items checkbox lists.
gf_list_height_75
With the help of this class, it becomes easy for you to assign 75px height value to all the items of the checkbox. In addition, this class allows you to steer clear “hanging floats” that usually occur when you list the items having uneven heights. Use this class only with items checkbox lists.
gf_list_height_100
With the help of this class, it becomes easy for you to assign 100px height value to all the items of the checkbox. In addition, this class allows you to steer clear “hanging floats” that usually occur when you list the items having uneven heights. Use this class only with items checkbox lists.
gf_height_125
With the help of this class, it becomes easy for you to assign 125px height value to all the items of the checkbox. In addition, this class allows you to steer clear “hanging floats” that usually occur when you list the items having uneven heights. Use this class only with items checkbox lists.
To Conclude
CSS Ready Classes can help you render a professional look to your gravity forms in the quickest possible manner. There are some other Ready Classes that you can explore and learn to spruce up your forms efficiently.
