Copyright © 2017 Healthable. A Krafty Sprouts Property.
Handy Tutorial on Styling Gravity Form With CSS Ready Classes
When it comes to creating an advanced form for the WordPress site, ‘Gravity Forms’ is one WordPress plugin you can’t afford to ignore. With the help of this plugin, you can create and publish complex contact forms in pages and posts in just a matter of few minutes. And now, with the availability of a feature called ‘Ready Classes’ (that was introduced with the release of version 1.5) in the Gravity form plugin, which helps in creating more advanced layouts for the form fields.
This tutorial is intended to help you know about how you can use CSS Ready Classes correctly, in order to customize your forms built using the Gravity Forms Plugin. But, let us first have an overview of what do we mean by CSS Ready Classes.
CSS Ready Classes – A Foreword
Ready Classes are basically class names that are added to the parent element of each field in your form, so as to help you make use of the pre-defined styles available within the stylesheet of the default form.
How to Create New Ready Classes?
For adding a “Ready Class” to any field, you just need to use the Gravity Form Plugin’s ‘Form Builder’ feature for editing your form. And then, you’ll have to choose the field that would like the newly create ready class to be added to. For doing so, from your WordPress admin dashboard screen open up the form where you want to add the ready classes, and from the form’s Advanced tab you will be able to view an entry with the name “CSS class name”. Simply add the name of the ready class in this input field and save your form.
Using Existing Ready Classes
But, there are some built-in ready classes as well that comes with the Gravity Forms default stylesheet that can be used without the need of writing any CSS, such as:
1. Halves(2 Columns)
Below is the list of classes that comes under Halves(2 Columns) category:
gf_left_half: This ready class helps in placing the field in the left column of two column-layout.
gf_right_half: This ready class can be used for placing the field in the right column of the two column-layout.
2. Thirds (3 Columns)
gf_left_third: It helps in placing the field in the left column of three column-layout.
gf_middle_third: The class helps in placing the field in the column positioned in the middle of three column-layout.
gf_right_third: This ready class helps in placing the field in the column positioned in the right of three column-layout.
The classes that come under this category can be used for aligning 3 different fields simultaneously (and are placed next to each other in the form builder).
3. List Classes
gf_list_2col: This class can help you convert your form’s checkboxes in two column-layout style that is proportionally spaced.
gf_list_3col: This ready class help in turning the checkboxes into three column-based formats that are spaced evenly.
gf_list_4col: It turns the list of checkboxes into four column-based formats spaced in a uniform manner.
gf_list_5col: It helps in converting the checkbox list into equally proportioned five column-based formats.
gf_list_inline: This ready class makes the checkbox list (that is spaced unevenly) turns into an inline horizontal list.
gf_list_height_25: This class helps in applying a value of 25px to the height of all checkbox items in the list within a form.
gf_list_height_50: Applies a value of 50px to the height of all checkbox items placed in a list.
gf_list_height_75: It assigns height of each and every checkbox item with 75px value in the list.
gf_list_height_100: This ready class assigns a value of 100px to the height of all checkbox items in a list.
gf_list_height_125: This class helps in assigning height of all the checkbox items within the list a value of 125px.
gf_list_height_150: It applies a value of 150px to the height of all checkbox items present in the list.
4. Inline (Fluid One Line)
gf_inline: Last on our list is the inline ready class called gf_inline that helps in placing the field with other fields in a horizontal format, however, it doesn’t create an equally proportioned column layout.
Note: All of the above discussed type of ready classes only works with the form layout option called “top label”.
If you would like to add more styles to your gravity forms, then the “CSS Ready Classes” feature is something you can’t afford to ignore. In this tutorial, we’ve covered all important aspects of how you can use this feature for customizing your gravity forms using custom, as well as, built-in ready classes.