From the Blogabout me

Custom CSS for Gravity Forms

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

#1
look @ the field
“How to get in touch with you?”

 

#2 Click on "edit" then "Advanced" you will see Custom CSS

#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:

Vertical Gravity Form Fields
Yikes, we probably don’t want that.

With a simple built-in class you could have something like this:

Columns in Gravity Forms

 

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
scrolling-text
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.

Comments

  1. Super handy tips. Just the ones for floating the fields next to each other are huge time savers! Thanks!

  2. Thanks so much sir.

  3. Hi Kevin. This was so great. Is there anyway you can hide the field with custom css?

  4. Tarequl Islam says:

    Excellent word bro. Its really helpful. but are there any option for 4 col field?

  5. 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 says:

      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.

  6. 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 says:

      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

  7. Perfect, super tips.. Thanks so much

  8. how can i reduce the spacing between two columns..its way too much space…is there a css that I can use

  9. Hi, do you know how to make more than 3 columns. tnx

  10. 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! 🙂

Leave a Reply

%d bloggers like this: