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.
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
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.
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!
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.
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!
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.
I tried to follow this but I can’t get it to work for me
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.
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
I was having troubles with getting the CSS to apply with using inline CSS. Once I updated the style sheet it worked!