• Skip to primary navigation
  • Skip to content

Neil Curtis

Learn how to make money online

  • Home
  • About
  • Start an Online Business
  • Latest Articles
  • My Resources
  • Contact

Gravity Forms – How to style the field label / title

By Neil on July 31, 2014

The field label / title lets people know what the particular Garvity Form field is. If you want to target this area and do some custom styling then you need to add the following CSS styling to your WordPress website’s stylesheet.

body #gform_wrapper_**form ID here** .gform_body .gform_fields .gfield .gfield_label
{
**CSS styling here**
}

You can choose to apply the formatting to every single form on your website by removing the _**form ID here** part of the above code and changing #gform_wrapper with .gform wrapper, as shown below:

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label
{
**CSS styling here**
}

In the example tutorial here our Gravity Form has an ID of 4.

Learn more about Gravity Forms here!

LIKE WHAT YOU’VE READ?
I publish new tutorials all the time so it would be great let you know when something is ready for you to check out. I also have lots more to share with you about how to easily customize and style your WordPress website, so why not join my gang.

TELL ME MORE >>

Reader Interactions

Comments

  1. Mukesh says

    May 15, 2015 at 4:28 pm

    Hi I am using gravity forms and am trying to change the color of the fields for some reason after I wrote the CSS in the style sheet the color does not change. Please help I have pasted the CSS I wrote

    body #gform_wrapper_2 .gform_body .gform_fields .gfield .gfield_label
    {
    color: #FFFFFF;
    }

    Please can you tell me what i am doing wrong.

    Regards

    Mukesh

    Reply
    • Neil Curtis says

      May 16, 2015 at 8:05 am

      Hi Mukesh, this code targets the field label, is that what you want to do? It does not target the field area.

      So your code should change the text colour of the label to white. Does it do this? If you copy what I did in this video do you get a border to show around your label? If you do at least we know the code is working.

      Reply
      • Jim says

        November 9, 2015 at 9:06 pm

        Trying all day to do this! I have googled for answers relentlessly and tried plug-ins and nothing is working. I have some dark backgrounds on some pages and need to simply make the text white. I have this in my custom css:

        body #gform_wrapper_15 .gform_body .gform_fields .gfield .gfield_label
        {
        color: #FFFFFF !important;
        }

        and still nothing! I am certain it is my theme forcing the color but don;t know what to do!? .. example of a page I want to do this on is here with the form at the bottom: https://peacechurch.cc/connect/nursery/

        any advice?

        thanks!

        Reply
        • Neil Curtis says

          November 11, 2015 at 10:41 am

          Hi Jim. I checked out the form on your website. Have you solved your issue or is it still not right? You have white font and no background colour.

          Reply
  2. Lisa Zarzeczny says

    August 28, 2015 at 3:10 pm

    Hi Neil,

    I am finding your tutorials extremely helpful. Is there a way I can just target one particular field label. I am trying to change the ‘Total’ field label without modifying all field labels.

    Thanks!

    Reply
    • Neil Curtis says

      August 28, 2015 at 3:25 pm

      Hi Lisa. Yes you can definitely do this. Watch this video http://www.neilcurtis.me/guides/styling-and-formatting-gravity-forms/ and skip to 12:20mins. Here I target the individual field.

      Basically you just need to add the ID of the individual field.

      Reply
  3. Trinal9 says

    November 16, 2016 at 5:29 pm

    I tried to follow this but I can’t get it to work for me

    Reply
    • Neil Curtis says

      November 17, 2016 at 8:59 am

      It was a while since this tutorial was created, maybe something has changed with Gravity Forms. When I get a minute I’ll have a look to see if I can get this to work myself and report back.

      Reply
  4. Pdot says

    April 16, 2018 at 3:10 pm

    works for me! thanks! i just changed the wrapper_2 to wrapper_17 (17 is the ID of my gravity form) and boom! my form labels are changed. Preciate the css reminder

    Reply
  5. carly says

    January 10, 2019 at 6:13 pm

    I was having troubles with getting the CSS to apply with using inline CSS. Once I updated the style sheet it worked!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2021 · NeilCurtis.me · Website powered by the Genesis Framework and uses the Maker Pro Theme

/* ----------------------------------------- */ /* Content Template: Guides Layout - start */ /* ----------------------------------------- */ #ninetypercent { width: 90%; margin: 0 auto; } #profilebox { border: dashed 2px #ccc; background: #E8E8E8; padding: 10px; padding-bottom: 15px; margin-bottom: 20px; } #profileimage { float: left; max-width: 150px; margin-right: 3%; } #profilebio { font-size: 90%; } #stepfont1 { float: left; font-size: 30px; font-weight: bold; padding: 5px; padding-left: 3%; background: #f96e5b; width: 100%; min-width: 280px; color: #FFFFFF; } #arrow { float: left; } #UWBwrap { padding-top: 10px; border-top: solid 3px #ccc; border-bottom: solid 3px #ccc; } /* ----------------------------------------- */ /* Content Template: Guides Layout - end */ /* ----------------------------------------- */