Accessibility
 
Icon or Spacer
   
Intelligent Contact Form
By Al DiMarzio
HB Graphics, Guilford, CT

Filling out forms can be an onerous task for any present or potential customer. But an intelligent form can make the process virtually painless. The question is however, what makes a computer-generated form intelligent? Since it is not the computer, I suggest it is the intelligent, intuitive way the form interacts with the user. And this brings us to the programmer who wrote the form. If we are intelligent programmers, we can create user-friendly Web interfaces that intuitively guide the end user through them. The subject of this article is the creation of just such a form.

First, a few words about designing a user-friendly interface. Though personally rewarding, it does not garner recognition from the user. Why? Because a well-designed interface is invisible to the user. People only notice interfaces that do not work! If you are looking for a "gee whiz" and a "wow" for your efforts, you can skip this entire article. Remember, if you do a good design job, no one will notice.

Understand the Customer

It is best to begin by working with your client (even if that client is yourself) to understand their customer. Research details such as age, salary, preferences, education level, language idioms, and more. Build a mental model of the typical customer and think of icons, images, colors, and words that might be familiar to them and determine how to encourage their participation.

Whether you are designing a form or a Web page consider the following thoughts:

  • Pay careful attention when phrasing any requests for information. Be polite and courteous and do not demand that information be entered. Remember to use please now and then.
  • Do not chastise users for making a mistake. For example, try not to use the word "error" because it implies the user did something wrong. Perhaps the programmer should have predicted that a user might take a particular course of action. A good designer will plan for incorrect choices as well as correct ones. A form must lead users toward making the correct choices.
  • It is only natural that colors should blend in with the rest of the site, however, colors have racial and nationalistic meaning in addition to psychological values. Refer to your mental model and choose wisely.

A Working Example

Let's get practical by working on a typical contact form. The example below was created for an accounting firm that wanted customers to complete certain fields before the form was submitted to them. The scheme was to use a pop-up window (JavaScript alert) to list any incomplete data fields in the form and place the cursor at the first incomplete data field when the alert was cleared.

One approach would be to give each field its own pop-up alert, but that would be truly annoying for the user. Instead, all messages are combined into one alert. It requires more thought and code but creates a cleaner interface. Note also that the alert message starts with "Please enter one of the required fields." Consistent with the recommendations above, the alert message neither blames the user for missing a field nor insinuates that a mistake was made.

Before we go behind the scenes, you can first play with the form.

Please enter contact information
Your Name:      Items in bold
Company:      are required
Address 1:      input fields.
Address 2:
City:  State:  Zip:
Phone:   xxx-xxx-xxxx
E-mail:
Please select your areas of interest
Accounting Financial Statements Corporate Accounting/Taxes
Estate Planning/Taxes Financial Planning
Individual Accounting Taxes Income Tax Examination/Appeals
Tax Research Other
Please enter comments or services not listed above

         

The complete code for a working form is shown below. The discussion is contained within JavaScript and HTML comments so you can cut and paste the entire code section without generating code errors. Read through the comments carefully, and don't panic. It is a lot of code, but much of it is repetitive.


<html>
<head>
<title></title>

<script language="JavaScript">
<!--

	/*  First we set up some global variables to be shared among the functions. */
var checkeditems /*  A status flag: "yes" or "no" if items boxes are checked. */
var message      /*  Variable used to build the alert message string. */
var fieldtofocus /*  Stores the name of the data field to receive the focus. */

/*  The first thing we do is to create a function that checks to 
see if the form has been filled out correctly. Not only must 
the required fields be completed, but also either a check box 
must be selected or text entered in the comments field.

When the Submit button is clicked, the isMailReady()  function 
is called before the form is sent for processing. Hence, validation 
prior to the page being completed. 

The isMailReady() function contains many simple if...then statements.  */

function isMailReady(form) {
	areItemsChecked(form); /* Call this function to see if the item boxes are checked. */
	var passed = true; /* This variable is set to "false" if the mail is not ready. */
	fieldtofocus = ""; /* Data field to receive the focus after the alert is closed. */

		/*  Set up the initial string of the alert message. The "\n" 
		creates a new line for the text string.  */

	message ="Please enter one of the following required fields: \n"

		/* Checks the first required input field for an empty string. */
 if (form.person.value == "") {
			/* If the field is empty, add this to the message. */
    		message += "- - Your Name \n";
			/* Then set the passed variable to "false"...we check this later. */
		passed = false;
			/* Set this as the input field to have the focus after 
				the alert message. */
		fieldtofocus = form.person;
   	 }
		/* This is repeated for each required field. */
   	 if (form.address1.value == "") {
    		message += "- - Address \n";
		passed = false;

		/*  Here we use an "if...then" statement to see if this was the first
		field with a null, and if  it is, we set this as the field to receive
		the focus. */

		if (fieldtofocus == "")  {fieldtofocus = form.address1}
 	  }
	
		/* Continue this process for each of the data fields. */

   	 if (form.city.value == "") {
    		message += "- - City \n";
		passed = false;
		if (fieldtofocus == "")  {fieldtofocus = form.city}
 	   }
	if (form.state.value == "") {
    		message += "- - State \n";
		passed = false;
		if (fieldtofocus == "")  {fieldtofocus = form.state}
	}
	if (form.zip.value == "") {
    		message += "- - Zip \n";
		passed = false;
		if (fieldtofocus == "")  {fieldtofocus = form.zip}
	}
	if (form.email.value == "") {
    		message += "- - E-mail \n";
		passed = false;
		if (fieldtofocus == "")  {fieldtofocus = form.email}
	}

		/*  Now that we have checked the data fields, we need to
		 see if a check box has been checked or a comment added.
The client wants at least one of these items.  */

	if (checkeditems=="no" && form.comments.value=="") {
		message += "- - Check one of the BOXes of interest or enter a COMMENT.";

			/*  Note the capitalization of key words in the above phrase. The 
			trick here is to bring the user's attention to one of these choices.  */ 

		passed = false;
		if (fieldtofocus == "")  {fieldtofocus = form.comments}
		/*  Rather than trying to select a check box, we send the user to
		the comments box.  */
	}

		/*   If there are missing data fields, send out the message
		using a call to the fixFieldInfo function. */    

	if (passed == false)  {
		fixFieldInfo(message, fieldtofocus); 
	}
		/*  We need to return a "true" to the form's submit so that it will send
		the form. If a "false" is returned, nothing happens with the form 
		submittal.  */

	return passed;
}

	/* This function checks to see if any check boxes have been checked 
	and sets the "checkeditems" variable (flag) to "yes" or "no." */
	
function areItemsChecked(form) {
	checkeditems="no";	/*  Set default to "no".  */
	if (form.accounting.checked || form.corporate.checked || form.financial.checked || 
			form.estate.checked || form.individual.checked || form.income.checked || 
			form.research.checked 
		|| form.other.checked) {
	checkeditems="yes";
	}
}

	/*  And finally, we send out the message with the 
concatenated message strings and the field to receive 
the cursor (focus) after the alert message is closed.*/

function fixFieldInfo(message, fieldtofocus) {
	alert(message);
	fieldtofocus.focus();
}

// -->
</script>

<!-- Enough already with the JavaScript. Now onto the 
HTML that creates the form.  -->


</head>

<!-- The onLoad event in the Body tag sets up the first field 
to receive the cursor. It's a neat thing when opening a form. 
The user can begin typing without Mouse-clicking to the first 
input field. Syntax: document.[name of form].[name of field].focus().
This requires that you name your form and text fields. -->

<body bgcolor="#ffffff" onLoad="document.contact.person.focus()">

<div  align="center">

<table border="0" bgcolor="#dddddd" cellspacing="0" cellpadding="10">
<tr>
<td>
	
<!-- If you were using CGI or Cold Fusion, you would set the 
action to the URL of the script or page that would do the email 
formatting. Both Netscape and IE handle email requests differently. 
By using CGI or Cold Fusion, you can format the submitted form 
and be consistent between the different browsers.

If using CGI, then the action would be sent to a Perl or CGI
script such as "mailform.pl." In the case of Cold Fusion, it would 
go to a .cfm page, such as "reply.cfm," which would format and 
send the information.

Next, set the onSubmit event to call the isMailReady() function to 
check if the email is ready. If "return" is "true," then the form will 
be submitted; if "false" then it won't be sent.

And finally, if you want to read the email in a user friendly manner,
 use the enctype of "text/plain."  -->
	
<form name="contact" method="post"  action="send_it_some_place"  
	onSubmit="return isMailReady(this)" enctype="text/plain">

<!-- The (this) in the isMailReady() function above contains the name
of this form.It is a JavaScript short cut -->
	 
<!-- This table holds the form together and positions the input fields.
Paying attention to text and field alignments can make the difference
between a designer who is a wannabe and an iamone.  -->

	<!-- This is the text input area -->
<table width="450" border="0" cellspacing="0" cellpadding="0">
<tr>
	<td colspan="2" align="center">
		<b><i>Please enter contact information</i></b></td></tr>
<tr>
	<td align="right"><font face="Arial" size="-1"><b>Your Name:</b> </font></td>
	<td><input type="text" name="person" size="30" maxlength="30">
		<font color="#0000FF">Items in <b>bold</b></font></td></tr>
<tr>
	<td align="right"><font face="Arial" size="-1">Company: </font></td>
	<td><input type="text" name="company" size="30" maxlength="30">
		<font color="#0000FF">are required</font></td></tr>
<tr>
	<td align="right"><font face="Arial" size="-1"><b>Address 1:</b> </font></td>
	<td><input type="text" name="address1" size="30" maxlength="30">
		<font color="#0000FF">input fields.</font></td></tr>
<tr>
	<td align="right"><font face="Arial" size="-1">Address 2: </font></td>
	<td><input type="text" name="address2" size="30" maxlength="30"></td></tr>
<tr>
	<td align="right"><font face="Arial" size="-1"><b>City:</b> </font></td>
	<td><input type="text" name="city" size="20" maxlength="30">
		<font face="Arial" size="-1"><b>State:</b> </font>
<input type="text" name="state" size="2" maxlength="2">
	<font face="Arial" size="-1"><b>Zip:</b> </font>
<input type="text" name="zip" size="6" maxlength="11"></td></tr>
<tr>
	<td align="right"><font face="Arial" size="-1">Phone: </font></td>
	<td><input type="text" name="phone" size="12" maxlength="12">
		<font color="#0000FF">xxx-xxx-xxxx</font></td></tr>
<tr>
	<td align="right"><font face="Arial" size="-1"><b></b><b>E-mail:</b> </font></td>
	<td><input type="text" name="email" size="30" maxlength="50"></td></tr>
</table>

	<!-- This is the check box area -->
<table border="0" width="450" cellspacing="0" cellpadding="0">
<tr>
	<td colspan="4" align="center">
		<b><i>Please select your areas of </i>interest</b></td></tr>
<tr>
	<td><input type="checkbox" name="accounting"></td>
	<td width="200"><font face="Arial" size="-1">Accounting Financial Statements</font></td>
	<td><input type="checkbox" name="corporate"></td>
	<td width="200"><font face="Arial" size="-1">Corporate Accounting/Taxes</font></td></tr>
<tr>
	<td><input type="checkbox" name="estate"></td>
	<td><font face="Arial" size="-1">Estate Planning/Taxes</font></td>
	<td><input type="checkbox" name="financial"></td>
	<td><font face="Arial" size="-1">Financial Planning</font></td></tr>
<tr>
	<td><input type="checkbox" name="individual"></td>
	<td width="200"><font face="Arial" size="-1">Individual Accounting Taxes</font></td>
	<td><input type="checkbox" name="income"></td>
	<td width="200"><font face="Arial" size="-1">Income Tax Examination/Appeals</font></td></tr>
<tr>
	<td><input type="checkbox" name="research"></td>
	<td><font face="Arial" size="-1">Tax Research</font></td>
	<td><input type="checkbox" name="other"></td>
	<td><font face="Arial" size="-1">Other</font></td></tr>
</table>

<!-- The comment box area -->
<table border="0" width="450" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
	<b><i>Please enter comments or services not listed above</i></b></td></tr>
<tr>
<td align="center">
	<textarea name="comments" wrap="virtual" rows="5" cols="50" hscroll="no">
	</textarea></td></tr>
</table>

<br>

<!-- And finally the submit and reset button area -->
<div align="center">
<input type="submit" value=" Send ">         <input type="reset" value=" Clear ">
</div>

</form>
</td></tr>
</table>
	
</div>

</body>
</html>

Wow! That is a lot of code, but this is a real-world contact form in use today by a real client. So, what did we learn, other than it was a lot of reading?

Building user-friendly Web pages, such as this intelligent form, takes some thought. It has been my experience that good, working code is made up of 20% functionality and 80% consumer interface. Anticipating what dumb things the customer might do is the challenge. Did I say "dumb" out loud? What I meant to say was that I spend all this time designing solid user interfaces and no one notices them—which means they work.

About the Author

Al DiMarzio's career and business interests in computing technologies, marketing, and publishing span more than 40 years. In a lifestyle change, Al left the corporate world and formed HB Graphics. The company, primarily desktop publishing, move quickly into Web publishing in 1995 and grew from static HTML to interactive, data-driven Web sites.

Al received a BSEE and MSEE from Northeastern University and has completed corporate and post-graduate studies. During his tenure in engineering R&D, he received three patents. He has authored more than 50 articles and reports on computing technology, business management, and marketing, and has conducted seminars on the same topics.