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.
#1
look @ the field
“How to get in touch with you?”
#2
Click on Edit then Advanced
you will see Custom CSS
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:
Yikes, we probably don’t want that.
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.
Gravity Forms is a plugin developed by Rocket Genius, and is well worth looking into for your WordPress website.
23 comments
Valerie | September 4, 2013
Super handy tips. Just the ones for floating the fields next to each other are huge time savers! Thanks!
k.shoffner | September 4, 2013
Thanks Valerie. Always glad to help.
recruitment | January 30, 2014
Thanks so much sir.
kpxhkd | March 7, 2014
Hi Kevin. This was so great. Is there anyway you can hide the field with custom css?
k.shoffner | March 9, 2014
What type of field are you trying to hide? Also, why are you trying to hide a field?
Tarequl Islam | March 26, 2014
Excellent word bro. Its really helpful. but are there any option for 4 col field?
k.shoffner | March 26, 2014
No problem.
You should be able to use
gf_list_4col = 4 columnedWordpress – Plugin Gravity Forms com CSS customizável | Vinícius Lourenço | April 27, 2014
[…] http://kevinshoffner.com/wordpress/tipstricks/custom-css-gravity-forms/ […]
Raul | May 28, 2014
Hey man, thanks for this great explanation. I would like to remove some required fields or edit it, when I clicks on edit nothing happens, is there any specific browser to do this amendment?
k.shoffner | May 29, 2014
For me Raul, I have some times run across this issue but it has always been a plugin using JavaScript or AJAX that causes Gravity Forms not to work while I am trying to edit… I would recommend looking through your activated plugins you have, and you may have to disable one or two of them at a time and see which one is causing the issue.
Jorge Díaz | July 12, 2014
Hi Kevin, I am wondering if for this kind of form (which I think is cool): http://prntscr.com/41u7td Do you think that a gravity form can be customized like that just using the custom CSS fields? Or I have to use a plugin for that kind of customization? Thanks in advance.
k.shoffner | July 13, 2015
Absolutely this would be possible. Would take some time/patience to make sure you have all of the conditional logic in place but otherwise it would be just fine
Gkhan | July 17, 2014
Perfect, super tips.. Thanks so much
manisulur | February 23, 2015
how can i reduce the spacing between two columns..its way too much space…is there a css that I can use
k.shoffner | February 23, 2015
Please send me a URL for me to look at what your site looks like currently
manisulur | February 23, 2015
http://lifeplanningconcepts.ca/assumption-life/
David | March 11, 2015
Hi, do you know how to make more than 3 columns. tnx
k.shoffner | March 12, 2015
You should be able to use such classes like
gf_list_4col
gf_list_5col
gf_list_6col
David | March 12, 2015
Tnx Kevin, but this is for list (checkbox) I need for Single Line Text- I need more than a three columns. I think that 3 is max but….. so for 2 columns I need to use “gf_left_half and gf_right_half” for 3: gf_left_three, gf_middle_three, gf_right_three, So I need classes for 4 columns, tnx
k.shoffner | March 12, 2015
If you want to send me a link of a sample, I can take a quick look at your form and setup.
David | March 12, 2015
http://portfolio.david.sojic.net/wp-content/uploads/2015/03/gravity-form.png
Romain | March 7, 2016
You rock! Thanks for these very helpful tips, for those of us who don’t even click on all the button to see what’s inside! 🙂
k.shoffner | July 29, 2016
So glad it was helpful for you. Let me know if you have other questions.