Publishers of technology books, eBooks, and videos for creative people

Home > Articles

Bulletproof Your Forms

📄 Contents

  1. Provide sample entries, pull-downs, and formatting hints to ensure clean data
  2. Explicitly state limits to characters, number of entries, and so forth
  3. About This Article
  • Print
  • + Share This
Forms are a hassle. "Invalid" responses, confusing choices, and unacceptable entries constantly gum up the works. It's no wonder busy surfers give up when faced with forms. In this article, Matthew Linderman of 37signals shows you two simple ways to improve your response rates.
Like this article? We recommend

Let's admit it: Things will go wrong online. No matter how carefully you design a site, no matter how much testing you do, customers will still encounter problems. Sites must plan for these inevitable breakdowns with defensive design.

Effective form contingency design is a great way to boost conversion rates. Customers don't want to guess, so be sure to provide examples of how to enter information. Too, let visitors know ahead of time what the acceptable entries are.

Provide sample entries, pull-downs, and formatting hints to ensure clean data

Few things frustrate a form-filler more than being told an entry needs to conform to certain standards after the form is submitted. Give visitors a break by being upfront about acceptable parameters. Use sample entries, pull-downs, and formatting hints to avoid a breakdown. These tools will minimize confusion and help people quickly complete forms. This guideline will show you how to use these techniques to ensure data is properly formatted:

  • Limit the range of entries.

  • Use HTML form elements to ensure valid submissions.

  • Give formatting examples.

  • Provide correct sample entries to prevent confusion.

  • Form guidance.

  • Use form layout to guide people in the right direction.

E*Trade: Which Dates Are Valid?

Figure 10Figure 4.10

I entered "7/2/03" as a date at E*Trade, but this message informs me that this is an "invalid date." Unfortunately, E*Trade never explained the proper way to enter the date prior to entry or why the date entered was invalid (impossible date, bad format, or so on) after entry.

Even worse, E*Trade's error message still doesn't tell me the right format to use. Should it be 7-2-03 or 07/02/03 or something else? E*Trade's unspecific response is an invitation to additional frustration. The site should clearly indicate the proper date format to use.

Limit the Range of Entries

Open-ended text fields leave plenty of room for error. When given free range, visitors often wind up submitting entries that are unacceptable for one reason or another.

How can you make sure visitors stay between the lines? Pull-downs, list boxes, and check box lists can limit the range of entries to only those who you deem acceptable. These tools provide a nifty way to nudge customers in the right direction.

United Airlines: Month Pull-Down

Figure 11Figure 4.11

There's no way to enter an invalid date at United's site because of the pull-down menus used for date selection. This simple technique prevents mistakes and keeps visitors on track. Pull-downs are also used to ensure acceptable responses for the number of travelers, service class, flights per leg, and other fields. Improving the Odds

Figure 12Figure 4.12

DeepDiscountCDs uses pull-downs to keep credit card type, date of expiration, salutation, state, and country data accurate. This improves the odds that I will successfully complete the form on the first try.

Give Formatting Examples

If you don't use HTML form elements to limit entries, make sure you explicitly tell visitors the correct format to use.

Expedia and E*Trade: MM/DD/YYYY and XXX-XX-XXXX

Figure 13Figure 4.13

Figure 14Figure 4.14

What date format should I use at Expedia? The hint "MM/DD/YY" makes it obvious. Should I use hyphens for my Social Security number at E*Trade? Yes, according to their format hint. Without this information, I would be forced to guess the acceptable formats.

Yahoo! and Citysearch: Sample Answers

Figure 15Figure 4.15

Figure 16Figure 4.16

Yahoo! Weather and Citysearch both provide examples of proper search submissions. This lets me know what a "good" entry looks like and increases the odds of a successful search.

Form Guidance

Alternatively, you can also use the structure of your form to make sure people don't make mistakes.

Dell: Boxed In

Figure 17Figure 4.17

What's the right way to enter a phone number at Dell? The site uses separate text boxes to eliminate any doubt. This greatly reduces the possibility of making a mistake.

  • + Share This
  • 🔖 Save To Your Account