Points to consider when designing an interactive response form
Forms Ergonomics
The 'elegance' in any form or data input screen is its transparency to the user. Not surprisingly, HTML forms are often a make or break item for a Website.
Your goal is a properly completed form.
The end-users goal is to do and think as little as possible.
If your form does some of the 'thinking' and 'doing' for the visitor, you greatly increase the chance of a successful submittal.
If you have access to your website's statistics, take a look at how many times a form is viewed versus how many times it is actually completed.
You spend a lot of time, effort and money to get visitors to your site, don't lose them because of an overly intimidating response form.
Error Trapping, Automating, Wiring and Idiot-proofing
Fields should flow in a logical manner, and be of the proper type.
Help should be available, but the elegant form is designed and worded to make its use unnecessary.
Would an Acrobat or Flash form provide a better experience?
Be certain to disable the Submit Button when the form is submitted. This prevents double clicks, duplicate entries, orders, etc.
Be certain to identify and trap all required fields to prevent incomplete submittals.
Error messages should be polite, clear, and to-the-point.
After a visitor throws an error on a field the focus of the form should return to that field after the error messages.
Pay attention to the "Tab Order" of your fields. Make certain that the TAB key takes you through them in a logical manner.
Use Radio Buttons, Check Boxes Menus and Drop-down Lists where possible. This is especially important when information will be stored in a database and a consistent data format is required.
Validate entered E-Mail addresses to be certain that they meet the proper format.
Trap the nasties! If you don't want HTML in your forms results strip it out before making use of the form data. The same goes for scripts which are a popular way to launch "SQL Injection" attacks against forms based databases.
Never make the visitor enter anything twice. If you will need something later, stash it in a SESSION variable and get it when you need it.
Include a checkbox to indicate if Shipping and Billing addresses are the same (or similar situations) and when it is checked, get the field data from the already entered fields and use it to populate the others.
Don't ask for both a State and a Zip Code, ask only for ZIP Code. Use one of the free/cheap ZIP lookup Web services to add the State later.
The Internet is International. Don't make it impossible for those from other countries and cultures to reach you or complete your form. [ rude! ]
Break long or complex forms into easily completed chunks.
Make opt-in/opt-out offers (Mail Lists, etc.) crystal clear and prominent. You may get a lower positive response, but the ones you do get will be better qualified.
Very long forms, surveys, quizzes, etc., should give the visitor the option to save their answers and come back later to finish. If they choose this option, it should trigger an automatic E-Mail reminder to finish the form.
Never underestimate the ability of the end-user to screw up, and occasionally to do so on purpose.
Examples of some Common Forms Issues
Telephone Number
Check for proper length of each item.
Check for Non-Numeric Characters.
Note: If you solicit contacts internationally, make certain that the number format fits the International format.
Unnecessary Restrictions 1
The problem here is that the name on the Credit Card might be J Paul Getty or F. Lee Bailey!
If flexibility might be required, plan for it and deal with its consequences in the design phase.
Credit Card Number
NO SPACES OR HYPHENS PLEASE
Unnecessary Restrictions 2
This places needless limitations on the visitor. It's very easy to strip spaces and hyphens (or any other character) from a string before it is sent.
The same applies to phone numbers and postal codes.. Hyphens and parentheses are easily stripped from entries to make certain they are saved in a consistent format. This is important if the information will be saved in a database.
Customer Note: Click Only One Time
to Prevent Double Charges
Double Click Prevention
It's happened to most of us -- double clicking a Submit button and ending up with multiple submittals of the same order, charge, email or form results.
A couple of simple lines of Javascript can disable the button the first time it is clicked to prevent this from happening.
See how it works by clicking the "Make Payment" button to the Left.
Traditional Date Selection
Drop Downs:
Text Entry:
/
/
mm
dd
yy
Calendar Selection Format
Example 1:
Example 2:
Date Selection Fields
Help the visitor with easy to use Date Selectors. Even a cumbersome new browser window (Example 1) is easier (though not necessarily better) than drop-downs or free-form text entry date fields. Many browsers will block a new pop-up window, (Example 1) and opening additional windows is very time consuming.
A Dynamic HTML Calendar Picker Popup, (Example 2) however, is much better.
Date Selection Calendars provide a consistent and controllable date format. This is especially important when working with databases and spreadsheets.
If you click the Calendar Icon to the Right of the example input fields you can see the examples in action.
Anti-Spambot Features
Automated programs continually crawl the Web looking for E-Mail addresses and forms that they use to spread their wares.
Anti-Spambot features are intended to prevent automated spambots from using your forms. They present a challenge code, distorted or scrambled in a manner to prevent Optical Character Recognition 'bots' from successfully spamming your form.
* * * SORRY * * *
You Must Be At Least
Thirteen Years Old to Play
In Our Cyber Playground!
Age Validation Forms
For mission-critical applications, commercial Age Verification Services may be added to your forms. These services use a variety of sources, from credit bureaus to DMV records to quickly validate a visitors' age. There are subscription fees for these hosted Web services.
For lighter liability applications, where visitor age is still and an issue, however, a Month/Day/Year of birth challenge is recommended. Keep in mind, however, there is nothing to prevent the visitor from plugging in a bogus date.
The Legal Side of Forms Data
If you collect certain personal information on your forms, you should have an updated Privacy Policy for your site. This policy clearly indicates what information is, or may be collected, under what circumstances and how it is, or may be used.
Sensitive forms data should be sent over a secure (shttp) connection. While the likelihood of forms data being intercepted is slim, it can be done.
Drafting a comprehensive privacy policy and having it checked out by an attorney is a prudent idea whenever you collect information from your visitors, especially anything personally identifiable.
For example, it is illegal to knowingly collect and store identifiable personal information on persons under 13 years of age without parental approval.
Before you have a contest with a prize of any value, check with the lawyers. You wouldn't believe the various State hoops you have to jump through to be legal in all 50.
to the Right of the example input fields you can see the examples in action.
