loading
I currently have availability
logo

Hi, I'mKevin Shoffner

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.

23 comments
  • Valerie
    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
      k.shoffner | September 4, 2013

      Thanks Valerie. Always glad to help.

  • recruitment
    recruitment | January 30, 2014

    Thanks so much sir.

  • kpxhkd
    kpxhkd | March 7, 2014

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

    • k.shoffner
      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
    Tarequl Islam | March 26, 2014

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

    • k.shoffner
      k.shoffner | March 26, 2014

      No problem.
      You should be able to use
      gf_list_4col = 4 columned

  • Wordpress – Plugin Gravity Forms com CSS customizável | Vinícius Lourenço | April 27, 2014

    […] http://kevinshoffner.com/wordpress/tipstricks/custom-css-gravity-forms/ […]

  • Raul
    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
      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
    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
      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
    Gkhan | July 17, 2014

    Perfect, super tips.. Thanks so much

  • manisulur
    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

  • David
    David | March 11, 2015

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

    • k.shoffner
      k.shoffner | March 12, 2015

      You should be able to use such classes like

      gf_list_4col
      gf_list_5col
      gf_list_6col

      • David
        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

  • Romain
    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
      k.shoffner | July 29, 2016

      So glad it was helpful for you. Let me know if you have other questions.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: