Get Rid of Yellow Form Fields Once and For All
Have you ever created a website form and wondered why when you go to the form on the website that certain fields have a yellow background in the form field?
This is the Google toolbar that turns these fields yellow. On the toolbar there is an “auto fill” option. This tells the user that they can use this option to auto fill certain fields on your form (which are marked in yellow).
The Problem
In CSS if you declare a background color of your form fields this will typically change the background color for all the fields except the fields that are marked by Google for auto fill.
For example, CSS code that looks like:
input {
background: #F3F4EC;
}
Results in a form that looks like:
Not only are some of the fields an ugly yellow color, but the coloring is also misleading to users. Most web users are unaware of the yellow, “auto fill” option and instead assume that yellow indicates a required field. In the case of the form above, the Phone field is yellow even though it’s not a required field.
As you can probably guess, these yellow fields are bad news:
Confusing Forms = A Drop in Conversions
The Fix
To override the yellow background all you have to do is declare your background as important.
Change the CSS to:
input {
background: #F3F4EC !important;
}
Then the form looks like this:
Problem solved. The yellow fields are gone and the form is much more user-friendly.
Tags: tips, yellow fields
August 4th, 2008 at 12:44 am
Nice post. I like seeing styled forms. I think it adds character to an interface and shows visitors that the designers took a little time to make their site look just a bit more original.
August 8th, 2008 at 7:42 am
Hey there, thank you so much for this.
You are right, and there are many more reasons why this is not a good feature of google toolbar. Any kind of confusion is very bad for consumer trust.
I’d wager that most people know not that their toolbar is the thing doing the highlighting.
I wouldn’t have known if my IE didn’t have the toolbar either.
Google said they have change it in an updated version to only highlight when a user has their cursor over their “fill forms’ but plenty of users have the old one.