Forms are everywhere on the web – it's the primary way users can interact with a web-based system. If your site or app uses forms (and we'd bet that it does) those forms need to be well designed, or users aren't going to follow through. They may not sign up for your service, they may not fill out their demographic information, they may not even log in again after sign up.
We love well-designed forms here at ZURB, and recently we've been exploring some cool new tricks for how we can display form inputs and labels in a concise, usable and totally awesome way.
Inline labels are nothing new – in fact the easiest way to label a field is to simply set the field value up front and blow it away when the field gains focus. Easy, right? But what if the browser focuses on the first field right off the bat...what field is it? The label is gone, so to find out what we're supposed to type we have to switch out, then back...what a terrible interaction! This little jolt could be the difference between a conversion and an abandoned form. Happily, there's a better way.
The first implementation we saw of this was over on the MobileMe login screen. We sniffed around a little and figured out how to create that type of interaction ourselves in an abstracted fashion – now we can use it when we want with a simple plugin. You can too. Check it out:
Nothing shocking here: in order to get the effect we want you need three elements.
- A container div for the input (we'll use span.wrap)
- A label (label.overlay)
- A form input (input.input-text)
The CSS is dead simple. For our example we'll set all our inputs to a width of 200px and a font-size of 18px. You don't have to use static widths for this to work but it simplifies our example.
Now we position the label behind the form element and set the form element background to "none." The label then becomes the form element background and between the two we can still create any form element design we'd like.
- When the user clicks into an element, reduce the label opacity by half
- When the user starts typing, reduce the label opacity to 0
- When the user switches out of the field check if the field is empty - if so, bring the label back to the original opacity
Et Voila! Super Awesome Form Labels
When you've got these few pieces in place you'll have forms that look more or less like these. We added some styles to the form inputs for the grey borders, etc – but you can handle all that. We also threw in some sweet CSS3 transitions that make these elements really sing in cutting-edge browsers.
This is a cool effect that solves an obnoxious little usability problem for inline labels, and we're getting some great use out of it already on the public facing pages for Notable, our upcoming feedback tool – but we don't use it everywhere and neither should you. It has strong novelty appeal to help you get that conversion, and the interaction is pretty smooth, but in a large form ease of comprehension is more important than slick presentation. Use your best judgement: we trust you.