Gravity Forms is one of my favorite plugins designed for WordPress, and can be easily used for the quick blogger to advanced developer alike.
More than likely you already know about Gravity Forms, so I wanted to jump straight into some more advanced CSS features that most people do not know about or take advantage of but should. If you do not know why Gravity Forms is important for your WordPress site, I have talked about it before, so feel free to read about it here.
Gravity Forms offers an area for you to add Custom CSS to any of your fields. For instance, you will see below two screenshots – #1 my fields, #2 where to find the Custom CSS area.
Here, you can add whatever you want as your Custom CSS Class; and you will be able to customize as you wish.
But Kevin, I don’t know much about CSS or don’t have the time to just simply make some easy adjustments to fields like Lists, Radio Buttons, and Checklists.
Yes, Gravity Forms makes long vertical lists by default, so if you have 10 items in your Checkbox it will look something like this:
With a simple built-in class you could have something like this:
Now that is pretty cool – what did you do?
I used the built-in Gravity Forms class gf_list_3col – and it is already there so why reinvent the wheel, right?
Here is a quick list of all of the built-in classes:
Checkboxes and Lists Fields
gf_list_2col = 2 columned List
gf_list_3col = 3 columned List
gf_list_4col = 4 columned
gf_list_5col = 5 columned
Two Columns of Text Fields side by side
gf_left_half = The left column
gf_right_half = The right column
Three Columns side by side
gf_left_third = Left column
gf_middle_third = Middle column
gf_right_third = Right column
Some other miscellaneous styles
gf_scroll_text = Gets a scroll box into place, for those long sections where you need to give your visitor lots of information
gf_hide_ampm = If you want to hide the AM/PM portion of the Time field
gf_list_inline = Simpliar to the above gf_list classes, but just show up next to each other using the amount of space the content can use on each line, instead of making it fit within 2,3,4,5 columns.
gf_hide_charleft = Do not display the amount of characters left / character counter
I’ve not found a great use for these, but they are available:
gf_list_height_25 = 25 pixels between list items
gf_list_height_50 = 50 pixels between list items
gf_list_height_75 = 75 pixels between list items
gf_list_height_100 = 100 pixels between list items
gf_list_height_125 = 125 pixels between list items
gf_list_height_150 = 150 pixels between list items
I hope this quick cheat sheet will have you using Gravity Forms at it’s greatest potential, and you will be the envy of your other programming friends since these are fairly unknown.