Gravity Forms CSS Ready Classes
What is Gravity Forms?
Gravity Form is a paid plugin to create professional and secure forms on your site. These forms are not only contact forms, but can also be used for surveys, polls, mailing lists, product orders and so much more.
One powerful feature that separates it from other forms is its use of conditional logic, so that form features can be hidden or revealed depending on user input.
Not only is there a wide range of ways to display your form options, but you can easily style your form through CSS Ready Classes.
CSS Ready Classes
CSS Ready Classes were built into Gravity Forms 1.5 Release as a way to easily customize format.
Not all CSS Ready Classes labels work with all form types.
To use a CSS Ready Class, after you create your label, click on the appearance tab. There will be an option for Custom CSS Class, where you can insert your chosen class label.
It is possible to use multiple classes by separating your classes with a space.
Of course, you may have other CSS or code that can override or interfere.
“Top Label” CSS Classes:
Applies to Top Label Options / Text Areas
Split into two columns
- gf_left_half
- gf_right_half
Split into three columns
- gf_left_third
- gf_middle_third
- gf_right_third
Horizontal Elements
- gf_simple_horizontal
Split into four columns
- gf_first_quarter
- gf_second_quarter
- gf_third_quarter
- gf_fourth_quarter
Inline Elements
- gf_inline
List CSS Classes:
Applies to Checkboxes (Radio) and Multiple Choice
Two equally spaced columns
- gf_list_2col
Three equally spaced column
- gf_list_3col
Four equally spaced column
- gf_list_4col
Five equally spaced columns
- gf_list_5col
Inline List
- gf_list_inline
List Height
- gf_list_height_20
- gf_list_height_50
- gf_list_height_75
- gf_list_height_100
- gf_list_height_125
- gf_list_height_150
Other Useful Classes:
Applies to Sections/Page Breaks/etc.
gf_scroll_text
- Adds scroll bar to long text
- Works only on section breaks
gf_hide_ampm
- Hides am/time selector
gf_hide_charleft
- hides the characters left counter beneath paragraph text fields when using the max characters option