Popup-free form help

In Form Help without Popups, Gez Lemon describes a nice way of providing the user with help text for fields in web forms without using popup windows.

It’s a simple concept that I’ve used a few times: use JavaScript to hide the help text until the user chooses to display it. No annoying popups, and if scripting is disabled the help text is still available.

Posted on October 15, 2005 in Accessibility, JavaScript, Quicklinks, Usability

Comments

  1. Ok, I’ll be bold here, and show something from a project-in-the-works of mine… http://registrerdeg.no/statoil/5

    The script itself ain’t 100% polished concerning usability I’m sure, but I think it works pretty well in modern browsers. Be sure to try filling out a field with invalid characters, or leave it empty, then go back to edit it again. And no, the submit button is not disabled in HTML, only through Javascript, and there’s backend validation as well for those with JS disabled.

    Site is in norwegian, but I guess you will be able to figure things out Roger :-)

  2. I really like that script Frode, any chances you will be releasing the code when it’s finished?

  3. Thank you proph3t. Yeah, I’ve been thinking of releasing some of my scripts, as I’ve got a few more laying around as “proof-of-concept” as well. But I’ve been waiting for myself to get my blog together when doing it, so I could write up some info about them too..

    If you’d like to be notified or maybe shipped the code when I’ve tidied and bulletproofed it some more, just send me an e-mail. You’ll probably find my e-mail on my site, but it’s quite simple: my first name at my last name dot net.

    I think my code will be easy for others to adapt, at least once I’ve written some more comments, as I strive to write as unobtrusive and auto-discoverable code as I can :-)

  4. Man, Frode, that’s really pretty. But I have to point out the obvious: the help is just not there without JavaScript. Maybe you want to make it foolproof by applying Gez’s idea to your concept?

  5. Thanks Matthias! And yeah, as I said, it’s not ready for prime-time with your nitpickin’ yet ;-) The help is there in semantic HTML, and will be provided without JS or CSS, no doubt about it!

    It’s just a habit I have when doing the conceptual development and demoing it to the designers who think visually, to hide stuff using CSS (it’s just a simple switch!) when I’m gonna show it in some other form through Javascript.

    But thanks for your comments and constructive critiscism, both of you! :-)

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.