Create a fancy web form with field hints using only CSS3

A Skyrocket Labs demo

« Read the original post for a breakdown of the code used for this effect

The What & the Why

Just a quick way to add some additional style to your web forms using CSS3 as well as implementing form field hints without Javascript.

Demo

Hover over each input, the textarea and the submit button to see the hint.

Note that I did not apply a hint to the SELECT list but did add one to the submit button for kicks (not that I would urge you to use one for a submit button).


Please include both your first & last name

Your email address will never be sold!

Please be as specific as possible so we can serve you quickly

Make sure your info is correct before sending!

Known Issues

1. The effect does not work when you tab through the form.

2. It would be better to show the hints on focus instead of on hover, which would resolve the usability issue but I've had some problems in getting the other method to work across browsers. I might stick at it and see.

In the end, this is just an experiment and I do not recommend using this in practice.

Download

Download .zip

Terms & Support

Tested in: Firefox, IE 8, Google Chrome and Safari. The effect works in IE8 but without the CSS3 effects.

You are welcome to use and modify this script as you like. I'd appreciate a link back to my site.

Due to my need to focus on client support, i can't guarantee that I can respond to requests for help but you can email me at skyrocketlabs(at)gmail.com.

© 2009-2010 Skyrocket Labs