With the Gravity Forms 1.5, we were introduced to "Ready Classes". Now, these classes come with a set of exceptional features that are hard to ignore. When you are creating forms for your pages, these ready classes can give you the capability to build some unique looking layouts that give a different look and feel to the field in the forms. In its truest form, Ready Classes can be defined as those class names that can be assigned to the parent elements around every field. What it does is that it makes use of the default styles that are contained in the stylesheet for the forms. And thus, you have so many options in the form of some very accessible buttons, the popup that lists the Ready Classes, and a fuss free way of adding a Ready Class via a simple double-click.
Using the Ready Classes
Now, when you are wanting to add the Ready Class to a form field, you first have to open the form builder and start editing your form there. Following that, you need to decide which field the new class has to be added to.
Now, you can go to the “Advanced tab” and in there, you can see the field for CSS Class Name. In here, you have to add all the names of the Ready Class that you wish to integrate with the field:
The Names for the Ready Classes
Following are a few ready classes that you can find built in the Gravity forms stylesheet. You can make use of them without resorting to any CSS code writing:
Halves (2 Columns)
The first thing to be noted here that that the following would only be compatible with the "top label" form layout option.
gf_left_half:
As the name suggests, using it will position your field at the left column out of the two available layouts.
gf_right_half:
And this will position the field at the right column.
Now, you need to arrange these fields in a way that they are placed parallel to one another and for the same, these classes need to be added. Besides that, we need to add the gf_left_half to the first field and the gf_right_half class needs to be integrated with the second field.
For implementing the inline position, we will use:
gf_inline:
Using it will position the field inline horizontally, with respect to the other fields. This is again a recommended placement but one of the drawbacks with it is that it fails to place the columns at equal distances
And Now Come the List Class
gf_list_2col:
This one is used to make some huge alterations to the checkbox lists, and this alteration comes in the form of turning these checkboxes into 2 column formats that are again spaced proportionally.
gf_list_3col:
This one changes the checkboxes to 3 column formats that are spaced proportionally.
gf_list_4col:
This class changes the checkboxes to 4 column formats that are spaced proportionally. This class can only be used with the checkbox lists. Also, you can use them with your choice of form label position settings
gf_list_5col:
This class changes the checkboxes to 5 column formats that are spaced proportionally. This class can only be used with the checkbox lists. Also, you can use them with your choice of form label position settings
gf_list_inline:
Using it will position the checkbox list inline horizontally. This class can only be used with the checkbox lists. Also, you can use them with your choice of form label position settings
gf_list_height_25:
Using this class, you can assign a 25px height value to all the checkbox items in the list available with you. Also, this class proves to be instrumental in keeping at bay the "hanging floats" that usually occur when you include in the list the items of unequal height. This class can only be used with the checkbox lists. Also, you can use them with your choice of form label position settings.
gf_list_height_50:
Using this class, you can assign a 50px height value to all the checkbox items in the list available with you. Also, this class proves to be instrumental in keeping at bay the "hanging floats" that usually occur when you include in the list the items of unequal height. This class can only be used with the checkbox lists. Also, you can use them with your choice of form label position settings.
gf_list_height_75:
Using this class, you can assign a 75px height value to all the checkbox items in the list available with you. Also, this class proves to be instrumental in keeping at bay the "hanging floats" that usually occur when you include in the list the items of unequal height. This class can only be used with the checkbox lists. Also, you can use them with your choice of form label position settings.
gf_list_height_100:
Using this class, you can assign a 100px height value to all the checkbox items in the list available with you. Also, this class proves to be instrumental in keeping at bay the "hanging floats" that usually occur when you include in the list the items of unequal height. This class can only be used with the checkbox lists. Also, you can use them with your choice of form label position settings.
gf_list_height_125:
Using this class, you can assign a 125px height value to all the checkbox items in the list available with you. Also, this class proves to be instrumental in keeping at bay the "hanging floats" that usually occur when you include in the list the items of unequal height. This class can only be used with the checkbox lists. Also, you can use them with your choice of form label position settings.
gf_list_height_150:
Using this class, you can assign a 150px height value to all the checkbox items in the list available with you. Also, this class proves to be instrumental in keeping at bay the "hanging floats" that usually occur when you include in the list the items of unequal height. This class can only be used with the checkbox lists. Also, you can use them with your choice of form label position settings.
Now, there are a few other miscellaneous Ready Classes as well and they have their own set of functions. All the above Ready Classes work with a huge range of themes but if you find out that the CSS of your theme is overriding these styles, do not hesitate to make the necessary alterations.
About the Author -
Celin Smith is a web developer as well as technical content writer, who works at Xicom Technologies Ltd. Serving Xicom, a leading .NET development outsourcing company. If you are looking for hire ASP.NET developer you can get in touch with her or directly contact via Facebook or Google+.