Helping a User Fill Out a Form

A while back I ran across an article about giving a user feedback as they are filling out a form. I can’t remember where I saw the article (I wish I could), but I really liked the idea.

The article wasn’t talking about validating a form and sending the user a message in an alert box, but something more ajaxy, a form assistant of sorts… something that helps them as they go along. This might seem like overkill for the simple form to follow, but it could be really helpful for a long, complicated form.

The idea has been on the back burner of my mind for a while and last night while driving home I started to think about it again and wanted to throw together a demo.


The Demo

1.jpg

First off, we have a simple form for some sort of registration. Style sheets are used to define the look of the forms. As usual, required fields are noted, in this case with a red outline.

2.jpg

Now, if a field is tabbed to, or the user places the mouse over it, I wanted to give them a little feedback about the field they are about to, or are, using.

3.jpg

Tabbing through the fields will allow the focused form element to display its “notes”.

4.jpg

Now, we do have some required fields, so let’s look at entering in some data. Once the form loses focus, JavaScript checks to see if the user left anything in the field. If so, we want to turn the border to green, representing that the required information has been supplied.

5.jpg

Originally, I had a submit button, but I thought that might be a bit boring for this example. Instead, if the form field has something in it, we want to save it. So now that the user has tabbed out of the field, notice the “progress” icon appearing in the field.

6.jpg

In this demo, I’m not really saving the data, but if I was, once the readyState returned 4, I would change the “progress” icon to a “saved” icon. And, after a second of two, we fade that away.

That’s basically what I was thinking for this demo. And I think it turned out kind of cool. With that, let’s take a quick look at how it’s done. You can download the prototype if you want. The link is near the bottom of this article.


How it’s done

First off, we create a basic form using a table. Each row needs its own ID, such as:

<tr id="fnameRow" style="height:32;width:370;" height="32">

Notice that I’m also setting the height and width of the TR via STYLE, this is important for the placement of the feedback DIV, which I’ll get to later. Another thing that is important, for my coding method, is the name of the ID. fname is the name of my form field, and when JavaScript looks at what field I’m editing, It will know at the same time which row needs to change.

In that row, I need my form fields, and they look something like this:

<input 
	class="textboxR" 
	type="text" 
	name="fname" 
	size="40" 
	maxlength="255" 
	onfocus="inputFocus(this)" 
	onmouseover="inputFocus(this)" 
	onmouseout="inputBlur(this)" 
	onblur="inputBlur(this)"
>

Notice the class; I have a textbox style for fields that are not required, and a textboxR for fields that are, the only difference being the border color. Now that I think about it, I probably should set this via JavaScript (with the fR_xxxx vars that follow).

Now that we have our form set up, I need to set some JavaScript variables. They are, for the most part:

  • borderReq – The color of a required border
  • borderReg – The color of the regular field border
  • borderYellow – What color yellow to use for the border.
  • borderGreen – What color green to use for the border.
  • bgRowOver – What color to use for the row background when it’s highlighted.
  • bgRowNorm – What color to use for the row background when it’s not highlighted
  • fI_fname – (fI = fieldInput) The text I want to appear in the note for form field fname. There is one of these for each field.
  • fR_fname – (fR = fieldRequired) Whether or not the field is required. There is one of these for each field.
  • lastRowTop – The top of the last row (of placing saving div)
  • lastRowWidth – The width of the last row (of placing saving div)

First, the field “notes” are displayed by aligning 4 DIVs, and changing the background color of the row. I couldn’t just place a div over it, because then it would cover (and disable) the interaction with the form field behind it; the onmouseover and onmouseout would stop working.

7.jpg

Here, let me turn on borders (in orange) on the four DIVs to illustrate. Notice the top left and right, and bottom left of the highlighted row has DIVs containing PNGs to create the round corners… I couldn’t stand the squarish look of just changing the row background color. Right below the bottom left rounded corner DIV is the DIV for the feedback, which contains it’s own round corners and DIV for content.

Back to the form fields… You can see that onFocus and onMouseOver call inputFocus (and pass it that form element) an onBlur and onMouseOut call inputBlur.

Now, let’s look at onFocus. Here’s the pseudocode:

  1. Get the name of the form (form.name)
  2. Get the content of the form (form.value)
  3. Set the background color of that row
  4. Set the border color of the form field to yellow
  5. Align my DIVs
    1. I need to get the location of the row in relation to the upper left of the browser. I don’t want to manually figure out each X/Y position of each row, and I might decide to move the form, so we have to do it with code. Two great functions (getAbsoluteLeft and getAbsoluteTop) to do this can be found here.
    2. I need to get the row width and height so I know how big to make note window (and how far down to push it). This is why the ROW had a STYLE with its width and height set. If you try to get its dimensions without specifying them, JavaScript will return nothing.
    3. Now that I have these, align my 4 DIVs in relation to that row.
  6. Put the note message you want to display into message area.
    1. I have a variable for each form element with the message I want to display.
  7. Turn on the visibility of all DIVs

Now, when we leave that field, let’s hide the note (inputBlur):

  1. Get the name of the form (form.name)
  2. Get the content of the form (form.value)
  3. Reset the background color of the row.
  4. If the field content contains nothing
    1. If it is required, set the border to red
    2. If it is not required, set the border color to gray
  5. Otherwise, they did type in something so
    1. Change to border color to green
    2. Compare what they typed to the original content we collected when they focused on it.
    3. If the contents differ (they added content to a blank field or edited a field they previously typed something in) save the data.
      1. Position the saving DIV
      2. Save the data

If you would like to download the working prototype, click here. If you do anything really cool with it, let me know.


Wrap up:

Some things I would like to do with this next:

  • Use an image for the checkbox… it just doesn’t match the other fields visually
  • Improve the graphic design of the form. I tried to keep this simple and didn’t spend too much time with it.
  • Figure out why I need those adjustors when lining up my DIVs.
  • Add form checking, so for instance, we can make sure the email address is an email address and if not, put an additional comment in the form note.
  • Optimize some of the HTML
Advertisements

4 comments


Comments are closed.