This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Sunday, April 13, 2008

Improve form usability with auto messages

Animated auto messages are useful to improve FORM usability and Scriptaculous is a great framework to use in this case.

This tutorial explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field.



I used Scriptaculous toggle effect to implement it. For more info download the full code or take a look at how it works.

Download this tutorial


Step 1: include scriptaculous libraries
Create a new page index.html and add a link to prototype.js and scriptaculous.js in the <head> tag of your page:

<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>


Step 2: HTML code
Add an input search field with an hidden input field with ID msgstatus to "save" the actual status of auto message (0=hidden; 1=visible):

<input type="text" name="name" id="name" onfocus="javascript:showMsg(1)"/>
<input id="msgstatus" type="hidden" value="0" />
<div class="msg" id="msg1" style="display:none;">
...some html code here...
<a href="#" onClick="javascript:hideMsg(1)"> Close </a>
<div/>

<input type="text" name="email" id="email" onfocus="javascript:showMsg(2)"/>
<input id="msgstatus" type="hidden" value="0" />
<div class="msg" id="msg2" style="display:none;">
...some html code here...
<a href="#" onClick="javascript:hideMsg(2)"> Close </a>
<div/>


If you want to add other input fields remember to use a progressive numeration for each message ID (id="msg1", id="msg2", id="msg3", id="msg4"...) and change the value of the parameter in input to hideMsg() and showMsg() functions.

Step 3: JavaScript functions
Now, in order to enable Scriptaculous fade-in and fade-out effects, add this code into the page on your page for the function showMsg() which displays an auto message when an user click on input field:

<script language="javascript">
function showMsg(idElement){
idEl= idElement;
statusMenu = document.getElementById('msgstatus');
if(statusMenu.value==0){
statusMenu.value=1;
Effect.toggle('msg'+idEl, 'appear'); return false;
}
}


...and this code for hideMsg() function to hide the menu when an user click on the link "close":

function hideMsg(idElement){
idEl= idElement;
statusMenu = document.getElementById('msgstatus');
if(statusMenu.value==1){
statusMenu.value=0;
Effect.toggle('msg'+idEl, 'appear'); return false;
}
}</script>


How you can see code and structure are very simple to understand and ready to reuse in your projects. Download the zip file with the full code, including CSS and Scriptaculous framework.

Download this tutorial

blog comments powered by Disqus
Gary Barber said...

Nice Tutorial. I would have made a few changes.

Use unobtrusive Javascript techniques

And I would have put the message in the content as a div before the input instead of doing a javascript insert.

Then I would have pushed in far left (off the screen). Just have the on focus change the location

Also use a mouse over on the label.

This way you add an element of accessibility too!

Abhisek said...

Very nice. But I'd prefer independent javascript funcs to prototype/scriptoculous scripts.

Avatar said...

Very nice! I'd like to analyze and study he single parts of a web page in this way too.

Maybe the same work with mootools whould have been more simple, you know by adding a simple class to the input elements + new effect.
Or even using a the Tips feature

Anyway I agree with Gary, you can use the same technique to improve usability but accessibility too, and that's important.

Oli said...

as gary says .. i'd start with something like this in your javascript file (ala rails in your application.js)


$$("input").each(function(field){
Event.observe(field, "focus", function(input) {
input.adjacent('p.hint').show();
});
Event.observe(field, "blur", function(input) {
input.adjacent('p.hint').hide();
});
});

maybe structure the field like this (this is generally how we work already)

-div class="row"-
-label for="bar"- Foo -/label-
-input type="text" name="bar" id="bar" value="Waay Cool"/-
-p class="hint"-How cool is this?-/p-
-/div-

but you know, with real html ;)

sinan said...

thank you for this tutarial

Matt Radel said...

Only problem I have is with the SIZE of the js libraries. I haven't found a good compressed version for either yet. Anyone know of one?

Abhisek said...

@matt radel, jquery minified is a good option.

osaru said...

Very nice!
It' so cool!! Thank you.

wesbird said...

Is this work with select? I tried toggleVal of jQuery but it only work with input-text and textarea only.

Thanks,

Izzyme said...

hey bro, thanks for the tutorial ive had a good time using it.
i do though have one hiccup. every time i function comes in the screen it pushes the what evers below it further down the screen. i thought if i useed z index in my css to resolve it but i have yet to find sucess! any help? PLEAASEE! :(
check out my site to get a better idea of that goes wrong
My Search View Prototype

thanks alot George Dickson

Angel said...

I love this blog

YA76OO said...

Thank you, I like

bertrand said...

Thanks a lot for all the informations gathered into your blog.
Keep the good work.

Freelance Web Design said...

I love this idea. Thanks for the tutorial.
Can this type of thing work with other javascript libraries like jQuery?

Web Design Glasgow said...

In addition to using unobtrusive javascript, you might consider putting the message in an attribute of the input tag (is rel allowed?), and then using javascript to create a div, give it a close button, and then insert the appropriate text and position as appropriate for each input element on the page.

For example:

var message = new Element('div')
.adopt(new Element('p'))
.adopt(new Element('a')
.setText('Close')
.addEvent('click', function () {
message.setOpacity(0);
});

$$('input').each(function (input) {
input.addEvent('focus', function () {
message.getFirst().setText(input.getAttribute('rel'));
var coords = input.getCoordinates();
message.setStyles({
left:coords.left,
top:coords.top+26
});
message.setOpacity(1);
});

input.addEvent('blur', function () {
message.setOpacity(0);
});
});

Toan Nguyen said...

Well, if you use prototype + scriptaculous, why do you have to use the lengthy method getElementById?
Moreover, id is unique, however you have 2 element with the id "msgstatus"

camp185 said...

I just title the input field. Descriptive text pops up, and requires no additional sript. Just title=

Sam said...

Very nice way of guiding the users to fill up the forms. Will use this for the job portal I am coding to enable candidates to fill up their Resume.

Thanks for that tutorial. Good Work!

Shane said...

I have a slight problem.

Everytime the hint pops into place it pushes anything below it down then back up again when the hint fades away.

Is there anyway to fade in as an overlay? the less disruption the better it would be for my clients use.

many thanks in advance

kia auto parts said...

Improving usability with automatic messages is great for quick responsing. Have in mind that the response is also directed to the indivuals them self. So it has to friendly and its theme not to strong, rather calming.

-Kelly

jeff said...

Some nitpicking:

1. If you're using an XHTML doctype, then "onClick" should be "onclick" (all lowercase)

2. Inside an event handler attribute, it is assumed that javascript will be used, hence the pseudo-protocol "javascript:" is redundant.

  onclick="javascript:hideMsg(2)"

should just be

  onclick="hideMsg(2)"

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News