CSS Ready Classes- A preferable way of tweaking gravity forms

Posted by Tushar Bedekar

Forms have always been regarded as an indispensable component of a website where users are expected to provide a specific kind of input. If you've been running a WordPress powered website then you'd be well familiar with the awesome plugins that can render you the flexibility of creating forms which can further be incorporated into multiple web pages. One such WP plugin that has served as a 'magic wand' for creating advanced forms is Gravity Forms. Specially suited for e-commerce websites, this plugin can be conveniently integrated with popular applications and online services such as: PayPal, Authorize.net, Zapier and many more. Apart from this, the 1.5 version of Gravity Forms plugin brought along a brand new feature called 'Ready Classes' which provided us an excellent means of building unique layouts for the fields within the forms. Keep on reading the post as I'll take you on a journey of using these Ready Classes for performing minor/major tweaks to the forms.

Ready Classes- A closer look:-

Ready classes are the classes names which can be assigned to the parents elements for every form field. These classes make use of default styles which are available within the form's stylesheet. Therefore, you can choose from a wide collection of options/buttons which allow you to moderate the look and feel of fields available within a specific form. In addition to these highly accessible buttons, there are handy popups which include a well-defined list of different Ready Classes that allow you to customize the forms in your own unique way. Lastly, you can also enjoy the convenience of adding a new Ready Class with a simple double-click.

Insights on using Ready Classes for customizing forms:-

To get started with adding a Ready class to a particular form field, you can get on with opening the form builder and initiating the form editing process. After that, you'll have to decide about the field to which the new ready class needs to be added. For tis, simply head on to 'Advanced tab' where you'll find a CSS Class Name. Here, just insert the names of all the ready classes which you wish to integrate with the form field. 
Here's a list of few default CSS ready classes(available in the Gravity Forms stylesheet) for you to choose from:

1.      gf_line

This is a CSS ready class that allows you to position the form field inline horizontally(in relation to other fields).

2.      gf_left_half

Compatible with “top label” form layout setting, this ready class will let you position the field towards the left column out of the two form layouts.

3.      gf_right_half

Just like gf_left_half, even this ready class is just compatible with “top label” form layout setting. With this ready class, you'll be able to position the form field towards the right column out of the available layouts. You may opt for adding the gf_left_half and gf_right_half classes for arranging the fields in a style that they appear parallel to each other. Here, you must remember that the gf_left_half class is being added to the first field and gf_right_half class to the second one.

4. Ready Classes applicable in case of forms with lists:

Ø  gf_list_2col
This ready class will allow you to make big modifications to checkbox lists, followed by converting the checkboxes into 2 column formats which are spaced proportionally.
Ø  gf_list_3col
Exactly similar to the gf_list_2 col, the gf_list_3 col will transform the checkboxes into proportionally spaced 3 column formats.
Ø gf_list_4col
With this ready class, you can change your checkboxes into proportionally spaced 4 column formats. You can use this ready class with checkbox lists and multiple form label position settings.
Ø   gf_list_5col
Use this ready class for changing the checkboxes into 5 column formats. This class can be used with checkbox lists as well as different form label position settings.
Ø  gf_list_inline
With this ready class, you'll be able to position the checkbox list inline horizontally. Quite similar to other ready class, this one can also be used with checkbox lists and varied form label position settings.
Ø  gf_list_height_25
This ready class lets you assign a 25px height value to different checkbox items included within the available list. Issues such as hanging floats remain at bay, with the use of this ready class.
Ø  gf_list_height_50
Using this ready class enables you to assign 50px height value to different checkbox items and preventing issues like hanging floats. You may use this ready class with a form label position setting of your preference.
Ø  gf_list_height_75
This ready class will assign a 75px height value to all checkbox items and prove as a viable option for keeping issues like “hanging floats” at bay.
Ø  gf_list_height_100
Use this ready class to assign a 100px height value to checkbox items available with the list. Plus, you may use this ready class with a form label position setting(s) of your choice.
Ø  gf_list_height_125
This ready class assigns a 125px height value to checkbox items, followed by offering you the flexibility of using the same with a form label position setting that is in sync with your requirements.
Ø  gf_list_height_150
Use this ready class for assigning a 150px height value to checkbox items within the available list. If you want to remain safe from the hanging floats error, this ready class can serve as your savior.
We're done!


Explained above are just a few ready classes available for modifying the form fields, there are many other miscellaneous one which come with their unique set of functions. Do share your experiences of using any/all of the above mentioned CSS ready classes using the comments section below.

Author Biography:-

Samuel Dawson is a expert professional with Designs2HTML Ltd, a perfect PSD to HTML company having long years of experience. Samuel has effective strategy to gain knowledge from different online portals & he also shares his knowledge further. 

Publisher's Last Words:

This is a guest post by Samuel Dawson, Thanks to Samuel Dawson for this awesome and useful information.if you want to post your article on http://www.allaboutcomputing.net you also can contact us. For more about Computer programming and for many more about Computer or web designing stay connected with http://www.allaboutcomputing.net .
I hope you have got answers of some Questions by this small post and I know you have lot of questions, So please feel free to ask in comment section or you can mail me my    e mail id is : tushar.bedekar11@gmail.com 


Post a Comment

back to top