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.

Different field background colours

  1. Hi, I am just in the process of transferring a site to a new domain. The old one is on the previous version of GF so not sure if this is something in my styling or a change to the GF code. On the new one, the field backgrounds are different colours for different fields, seeminly at randon.

    Old (OK) form -
    New (problem) form -

    Compare the Name and Email fields. Can you shed any light on this?

    Hope you all had a great holiday, all the best for a successful 2012 to everyone at Rocketgenius.

    Thanks, Chris

    Posted 12 years ago on Tuesday December 27, 2011 | Permalink
  2. kyle

    In the Gravity Forms Settings, you've enabled HTML5 on the new site. This means that instead of the input field having the type of TEXT it has the type of EMAIL and TEL. So your styling needs to be adjusted. In your stylesheet you have:

    input[type="text"], textarea, input[type="submit"], ins {
        background-color: #F0F0F0;

    You'll want to change this to:

    input[type="text"], input[type="email"],  input[type="tel"], textarea, input[type="submit"], ins {
        background-color: #F0F0F0;

    I think you have some other styling for these too in another section (box-shadow for example), so basically if you do a search in your style.css for type="text" you can add the type="email" and type="tel" options to get them to take on the same styling.

    Posted 12 years ago on Tuesday December 27, 2011 | Permalink
  3. Kyle, that's cracking - and thanks for the quick response. For the moment I have disabled HTML5 as the easy way to solve this - I will come back to this when I have finished this and the new site which my dentist wants up and running for 3 Jan...

    Many thanks again for your help, and all the best. Chris

    Posted 12 years ago on Tuesday December 27, 2011 | Permalink
  4. Kyle did a good job above of outlining the problem. He's exactly right. With HTML5 enabled it's going to output HTML5 input types.

    If your theme is configured to style SOME of the HTML5 input types, but not all of them... there could be some inconsistency in how the fields appear.

    You'd need to adjust things so that all of the HTML5 input types are styled in a consistent fashion in your theme stylesheet.

    Closing this topic as it appears you have a handle on this issue.

    Posted 12 years ago on Wednesday December 28, 2011 | Permalink

This topic has been resolved and has been closed to new replies.