Form Field Hints with jQuery

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.

One thing I like to see in forms in general is default text that disappears when a field is clicked on. This tells the visitor what type of input is expected without getting in their way. The most basic JavaScript code would do this with a call to the onfocus event which would clear out the contents of the field. Nothing new. Better code would replace the default text if the visitor leaves the field (onblur) without entering anything. So I set my sights on coming up with something different to accomplish the same effect. Here’s the result (note that the email field has an easing effect applied to it):

As you can see, the default text here smoothly animates out of view once the field is focused on (via keyboard or mouse). Turn JavaScript off and the form works perfectly; however the effect no longer exists, so it also degrades without a problem. Note that I’m not entering a textual default value for the various fields and then deleting the text with jQuery because if the visitor has JavaScript disabled (both of you) then they would have to manually delete the default text, which is more annoying then helpful.

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):

When we focus on a field we slide the background image out of view, and when we leave the field we check the length to see if it is empty in which case the image needs to be moved back to its original position. The typical JavaScript technique that creates or deletes a text field’s default text usually also needs to check to see if the current value of the text field matches the default text since you don’t want whatever is in the text field to disappear every time the field gets focus. Imagine if you entered your name in a field, realized you misspelled it, then clicked back to correct it only to have the whole thing disappear. We don’t have to deal with that scenario here at all since we only check the length of the text in the text box on the onblur event and don’t care about what was entered as long as something was entered. I’ll leave data validation for PHP on the server side for this form. Come to think of it, this method could probably be extended to highlight required fields and perform some basic error checking.

3 thoughts on “Form Field Hints with jQuery”

Leave a Reply

Your email address will not be published. Required fields are marked *