PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Changing Style of Form Title and Description Text

  1. Website: http://www.afullyengagedlife.com/free-stuff-selections

    I would like to change the size, font family and color of the form title text and the description. I've tried to do this in my main theme stylesheet but I can't seem to locate the proper code for these particular elements of the form.

    Can you tell me how/where to change the code to make these type of changes? Where do I find the code, perhaps to do a simple copy? And do I put it in the theme's main stylesheet? Also, where do I find the form's css or stylesheet?

    Thank you!

    Posted 14 years ago on Tuesday October 19, 2010 | Permalink
  2. The title is contained within an H3 tag and has the class gform_title applied to it. In order to target it with css you would use the gform_title class.

    For example:

    .gform_title {font-face: arial;}

    That would change the form title to use the arial font.

    The description gets output in a SPAN and has the class gform_description applied to it. In order to target it with css you would use the gform_description class.

    For example:

    .gform_description {font-face: arial;}

    That would change the form description to use the arial font.

    You would add this custom CSS to your theme stylesheet at the bottom of your CSS file.

    If you need to get the element, id or class names that Gravity Forms uses for various elements all you have to do is view the source of your page and look at the HTML that makes up the form.

    If you ever have a problem applying a style to an element you may have to use the !important declaration to force the style to override any existing styles that were applied elsewhere in your theme or plugin stylesheet.

    For example:

    .gform_title {font-face: arial!important;}

    Posted 14 years ago on Tuesday October 19, 2010 | Permalink
  3. Tried to put these two code lines in my CSS but absolutely nothing happened on the form. Here is the code that I added for .gform_title and .gform_description (footer code was changed at another point and does work):

    /***** Gravity Forms Mods ********************/

    .gform_footer .button {background-color: #933f40; color: #FFFFFF;
    }

    .gform_title {font-face: arial; font-color: #933f40;
    }

    .gform_description {font-size: 12;
    }

    I put it at the top of my CSS file and in exactly the form above. Did I miss something?

    Thanks so much for taking another look at this!

    URL: http://www.afullyengagedlife.com/free-stuff-selections

    Posted 14 years ago on Wednesday October 20, 2010 | Permalink
  4. Looks to me like the button rules worked but not the others.

    Try this instead. There were a couple of problems with your CSS.

    Also, It's always best practice to add the new custom styles to the end of your theme's CSS file. That way, they will hopefully override any previous rules set earlier in the file.

    .gform_footer .button {background-color: #933f40; color: #FFFFFF;}
    h3.gform_title {font-family:arial, sans-serif; color: #933f40;}
    .gform_description {font-size: 12px;}
    Posted 14 years ago on Wednesday October 20, 2010 | Permalink
  5. Hmm, tried this new code and code placement in the CSS but still no change to font style and/or color. Might another code sequence work or could there be another problem, e.g. a handshake between the main theme css and the form.css?

    Posted 14 years ago on Wednesday October 20, 2010 | Permalink
  6. Change the code that you have to this:

    .gform_footer .button {background-color: #933f40; color: #FFFFFF;}
    .gform_title {font-family:arial!important; color: #933f40!important;}
    .gfield_description {font-size: 12px!important;}

    The issue with the form title is you need to use the !important declaration to override what is already being set on the H3 elsewhere in your stylesheet.

    The issue with the description is you said form description when you really meant field description. So instead of targeting gform_description you need to target gfield_description.

    Posted 14 years ago on Wednesday October 20, 2010 | Permalink