Different field background colours « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Chris Middleton
Member

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 - http://www.southwelldentalcare.com/register/
New (problem) form - http://www.carltonandsouthwelldentalcare.com/southwell/register/

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
kyle
Member
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:
```
[css]
input[type="text"], textarea, input[type="submit"], ins {
    background-color: #F0F0F0;
}
```
You'll want to change this to:
```
[css]
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
Chris Middleton
Member

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
Carl Hancock
Administrator

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.