Recent years have witnessed the release of tremendously improved versions of WordPress CMS. Trendy features introduced along with these WP versions have served as the backbone of hundreds and thousands of websites prevalent over the web.
Numerous plugins have added a unique charm to the effectiveness of traditional as well as latest WordPress versions. One such plugin is the Gravity Forms plugin which has been readily used for creating excellent forms that need to be included within the web pages.
The version 1.5 of Gravity Forms comes equipped with something innovative called “Ready Classes” These classes enable you to create advanced and eye-catchy layouts for the fields incorporated within the web page forms. In this post, I’ll be offering you a handy guide on performing tweaks to Gravity forms using these CSS ready classes.
What exactly are CSS ready classes?
CSS ready classes are basically the class names that can be easily added to the parent element that surrounds each field within a specific web page form. These classes can be used for taking full advantage of all the pre-defined styles which come included within the default CSS stylesheet of the form under focus.
A closer look at moderating Gravity forms using CSS ready classes
For adding a CSS Ready class to a particular form field, all you need to do is simply edit the form using the Form Builder, followed by choosing the field to which you want to add the css-ready classes.
Just go to your Advanced tab and you’ll find an input field named “CSS Class Name”. Here, simply enter the Ready class name or names which you want to add to the field. Finally, click on “Save” button to save the changes made to the gravity form. Have a look at the below screen-shot:
Here’s a list of built-in Ready Classes which exist by default with the Gravity Forms original stylesheet. The best part of these CSS ready classes is that you need not work on your existing CSS stylesheet.
Halves(2 Columns)
Both the below explained ready classes work with only the “top label” option that’s available for form layout styling.
- gf_left_half- This ready class places the field within the left column of the 2-column layout.
- gf_right_half- This ready class places the field within the right column of the 2-column layout.
Hence, in order to align the two sides adjacent to each other, you simply need to add the gf_left_half class to the first field and the gf_right_half class to the second one.
List Classes
Below is an array of Ready classes which allows you to moderate the lists which have been incorporated as fields within the gravity forms:
- gf_list_2col
This ready class transforms a multiple choice/checkbox list into a 2-column format. Applicable to just the multiple choice/checkbox lists, this ready class can also work well with other form label position settings.
- gf_list_3col
This ready class transforms a multiple choice/checkbox list into a 3-column format. Just like the gf_list_2col, this ready class can also work with any form label position setting.
- gf_list_4col
This ready class transforms a multiple choice/checkbox into a 4-column format. It works well with every form label position setting.
- gf_list_5col
This ready class transforms a multiple choice/checkbox into a 5-column format and works with any form label position setting.
- gf_list_inline
This ready class will transform a multiple choice/checkbox list into an inline horizontal list. It works well with a variety of form label position settings.
- gf_list_height_25
This ready class applies 25px height value to all multiple choice/checkbox items within the list. It works as a handy option for avoiding “hanging floats” caused due to list items with unequal heights.
- gf_list_height_50
This ready class applies 50px height value to all multiple choice/checkbox items within the list. It also plays a significant role in avoiding the “hanging floats” error caused due to list items with different height values.
- gf_list_height_75
This ready class applies 75px height value to different multiple choice/checkbox items available within a list. Serving as a useful class for avoiding “hanging floats” problem, this ready class is just applicable to multiple choice/checkbox lists.
- gf_list_height_100
This ready class applies 100px height value to all multiple choice/checkbox items within a list. As an effective means to avoid the “hanging floats” issue, this CSS ready class works with any form label position settings.
- gf_list_height_125
This ready class applies 125px height value to different multiple choice/checkbox items within the list. You can use this CSS-ready class for avoiding any “hanging floats” issue caused due to list items with unequal heights.
- gf_list_height_150
This ready class applies 150px height value to different multiple choice/checkbox items within the list. It also helps in avoiding “hanging floats” error caused due to list items with different values for the ‘height’ field.
That’s it for now!
Conclusion
CSS ready class has undoubtedly served as an excellent means of customizing the gravity forms in your own unique way.
I’m sure after reading the above post, you too would have gathered a greater understanding of how things can be done in a simple and highly convenient way and if you have any request of psd to WordPress I accept that too.