I’m working on a complete redesign of a site that’s been unchanged for about six years now and among other things, jQuery is being used in the project. I was tinkering with the contact form on this site and was thinking of the bazillions of forms I’ve seen on the web, and how when it comes to forms, contact forms are usually the most basic (although that’s not always the case). Fortunately for me, it is for this form. All that’s needed here is the visitor’s name, email and their comment (all required). Plus a CAPTCHA but that’s not going to change for the redesign. So I was thinking, how could I make this form a) functional (i.e. easy to use) and b) unique? Since this form is pretty basic there wasn’t a whole lot of room to create something that would be useful as well as interesting.
When the user leaves a field, the default text doesn’t return if they have entered something. However if it’s blank, then the default text slides on back in. Unobtrusive, eye-catching, and unique.
All of this is accomplished by manipulating the background image of each text field. jQuery 1.3.2 can animate the background image of an element horizontally (on the x axis) but not vertically. A nice plugin by Alexander Farkas can handle this in case you want to change the effect to look like this (here the comments field has a different easing effect applied to it):