Putting the label for a field inside the field itself seems like a good idea – it doesn’t take up any extra space on the page and there’s no question about which field a label is associated with.
BUT. If you’re going to do this, you need to make sure that the label is still visible until the person filling out the form starts to type.
In this form from Shell, the label disappears as soon as you click into the field. So if you’re tabbing through the form and not paying attention to the next field before you hit tab (which is especially difficult given that the form is in two columns), you end up with a blank field wondering what you’re supposed to type in.
Also, in-field labels should not look like the actual data being entered. Usually they’re a lighter shade of grey to indicate that they’re temporary.
Here’s a good write-up from UX Movement on how to pull off putting labels inside textboxes.
This form has a few other issues as well:
- Two columns makes it harder to scan
- Non-normal order of address fields: Mailing Address, Postal Code, Province/Territory… where does city go?
- Everything is mandatory except the marketing opt-in. Don’t bother with asterisks, just mark the optional field.