Creating Bulletproof and Easy to Complete Web Forms

By Jason Fried,Matthew Linderman

Date: Apr 23, 2004

Return to the article

CREATE FRIENDLY FORMS THAT ARE EASY TO COMPLETE

Guidelines covered in this chapter

Highlight either required or optional fields.

Accept entries in all common formats.

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

Explicitly state limits to characters, number of entries, and so forth.

If customers can't choose it, don't show it.

Validate entries (as soon as possible).

Button up: Eliminate the Reset button and disable the Submit button after it's clicked.

Assist form dropouts by saving information.

Introduction

Forms are a hassle. "Invalid" responses, confusing choices, and unacceptable entries constantly gum up the works. It's no wonder that many busy surfers simply give up when faced with forms. Here's what you can do to help.

Guideline 8

Highlight either required or optional fields

Whether it's because they are reluctant to share information online or just in a hurry (or both), many people give up on forms that ask too many questions. That's why your forms must clearly state which fields are required and which ones are optional. Sites often use one or more of these techniques to highlight fields:

• An asterisk (or other icon) next to the field

• The word "Required" or "Optional" next to the field

• Required field titles in boldface

Try to minimize the number of required fields whenever possible. You'll still get the information you need but you'll also let customers decide whether it's worth the time to provide extra data. If you don't identify required fields, customers may become frustrated when told that an unmarked field is actually mandatory. They may even bail out of the process completely.

Victoria's Secret

Turned Off http://www.victoriassecret.com

This "Create an Account" page at Victoria's Secret isn't as clear as it could be. Required fields, such as "Name" and "City," are not clearly indicated. And although some fields are tagged as optional (for instance, "Business Name" and "Evening Phone"), the site neglects to mention that the marketing questions at the end (for instance, "Do you currently receive Victoria's Secret Catalogue by mail?" and "Do you shop Victoria's Secret for yourself?") aren't actually required (you can skip them and still successfully create an account).

It would be better for the site to avoid the impression that these questions are mandatory when they're not. Otherwise, customers who don't want to share this sort of personal information may decide the process isn't worth the effort.

So how should you mark required fields? Use an asterisk or other clear icon to indicate which fields are must-haves.

Figure 4.1

Washington Post

Marked With * http://www.washingtonpost.com

The Washington Post uses a red asterisk to indicate the fields that must be completed. This means customers don't have to wonder, "Can I skip this field without causing problems?"

Figure 4.2

Guideline 9

Accept entries in all common formats

How do you enter a phone number? Do you use dashes, parentheses, spaces, no spaces?

How about credit cards? Do you follow the formatting on the card (with spaces) or do you write it all as one long number without spaces?

For dates, do you use dashes or slashes to separate the date? Two-character years or four-character years?

The fact is people will use different data formats at your site. That's why your forms should accept entries in all common formats. This saves customers the headache of trying to figure out which format is required.

Nordstrom

No Hyphens or Spaces http://www.nordstrom.com

Nordstrom's site only accepts phone numbers in this format: 2125554389. Although the site does at least offer advice on this restrictive format with its "no hyphens or spaces" message, a better solution would be to go ahead and accept all common formats. The site also should allow 212-555-4389 or 212 555 4389 or 212.555.4389.

Figure 4.3

KB Toys

It's All Good http://www.kbtoys.com

KB Toys accepts phone numbers regardless of which entry style is chosen. That means one less barrier facing shoppers.

Figure 4.4

AOL

Autoformat http://www.aol.com

AOL's signup form automatically converts phone numbers into the proper format. I entered "2125436587" and the site's form, via JavaScript, automatically translated it to (212) 543-6587 while I was typing. By automatically reformatting the number into an acceptable entry, AOL removes any possibility for formatting errors.

Figure 4.5

Zagat Survey

They've Got My Number http://www.zagat.com

Credit card numbers with or without spaces are accepted at the Zagat site. There's no need to put up an unnecessary roadblock when customers are trying to give you money.

Figure 4.6

Guideline 10

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 that 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? http://www.etrade.com

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.

Figure 4.7

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 http://www.united.com

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.

Figure 4.8

DeepDiscountCD

Improving the Odds http://www.deepdiscountcds.com

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.

Figure 4.9

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 http://www.expedia.com and http://www.etrade.com

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.

Figure 4.10

Yahoo! and Citysearch

Sample Answers weather.yahoo.com and http://www.citysearch.com

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.

Figure 4.11

Form guidance

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

Dell

Boxed In http://www.dell.com

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.

Figure 4.12

Guideline 11

Explicitly state limits to characters, number of entries, and so forth

Too many sites give speeding tickets without ever posting speed limit signs. If there is only a narrow range of acceptable characters or entries (for example, a text box with a limit of 20 characters or a field that allows a maximum of 10 emails), make sure you clearly explain the limit. Frustration is sure to ensue if you're not upfront about the limits visitors need to conform to in order to succeed.

Yahoo!

Then How Many? mail.yahoo.com

Yahoo! Mail won't send my message because the "Bcc field contains too many addressees." Unfortunately, Yahoo! doesn't tell me how many addressees I can submit. I have to guess and guess again to get the right number. It's a frustrating process that takes too much time to figure out. Obstacles such as this make me want to find a new group mailing list provider.

Figure 4.13

A similar process occurs when a site requires a limit to the number of characters in a form field. Customers carefully word their entries, so it's essential that you communicate, at the point of entry, the allowable amount of text.

CDNow

What's the Limit? http://www.cdnow.com

CDNow tells me my "Address Exceeds Maximum Allowable Length" but doesn't tell me the actual maximum length I can use. As a result, I'm left with the tedious trial-and-error method as the only way to determine how much text is allowed. Plus, who uses language such as "exceeds maximum allowable length?"

Figure 4.14

Your visitors need to know about these sorts of restrictions before they waste time crafting unacceptable entries. Be forthright about any limits and place this information at the point of data entry.

It's also a good idea to offer a countdown feature and use the "Maxlength" attribute (more to follow on this) to cap the number of characters that can be entered in the field. If customers do enter too much text, make sure you clearly explain the problem and how to fix it.

Google

25 Max http://www.google.com

Google helpfully informs me of the maximum number of characters I can enter. The site also uses the Maxlength attribute, so I'm unable to enter more than 25 characters.

Figure 4.15

<input type="text" name="fieldname" maxlength="50">

Head to Head

Message Limits

Paypal http://www.paypal.com

Paypal tells me my message is too long and asks me to enter a shorter message. Unfortunately, the site waits until after I submit my entry with too much text before even telling me a limit exists.

Then, the site neglects to tell me the actual limit. The only choice I have is to guess. I remove a few words and submit the text again. Still too much. I remove a few more words and try again. Still too much. Finally, I give up.

Figure 4.16

SprintPCS http://www.sprintpcs.com

SprintPCS tells me there is a limit of 160 characters for messages. As I start typing, the number in the "Remaining Characters" box counts down to zero. When I hit the maximum, the site prevents me from entering more text and displays a JavaScript alert that says, "Maximum message length reached. Your message has been truncated at 160 characters."

What's nice is that SprintPCS is upfront about the maximum message length and clearly tells me the limit. The helpful countdown feature also gives me instant feedback on how much additional text I can type. Finally, the site stops me when I reach the text limit and tells me why. This approach prevents mistakes and keeps messaging quick and efficient.

Figure 4.17

Guideline 12

If customers can't choose it, don't show it

Another way to make life easier for your customers is to eliminate unavailable options (a.k.a. prevalidation). If I can't choose an entry, don't show it to me in the first place.

Google

Then Don't Offer 2003 http://www.google.com

I'm choosing the date to stop running an ad on Google. 2003 is listed as one of the year options. (In fact, it was the default selection.) When I choose a date in 2003, however, the site informs me that 2002 is the latest year I can select.

It's frustrating to select a default option and then find out it's invalid. If I can't go past 2002, Google shouldn't even present 2003 as an option.

Figure 4.18

Ticketmaster

Why Not Tell Me It's Sold Out? http://www.ticketmaster.com

I tried to buy tickets to a sold-out concert at Ticketmaster. Unfortunately, the site never actually told me the show was sold out. Instead, it displayed the show's information and let me select tickets before it actually spilled the beans that tickets for this event were not available.

Even then, this ambiguous error message still leaves me scratching my head. If Ticketmaster knows the event is sold out, then why not just say so? It's no wonder customers wind up ticked off at the ticket behemoth.

Figure 4.19

Peapod

Only Show Available Times http://www.peapod.com

Peapod normally offers a range of delivery times throughout the day. On Saturday, however, the grocery service only has a limited number of slots available. Instead of displaying Saturday's later time slots that can't actually be chosen, the site shows only the times that are valid selections.

This is helpful because I don't want to select a time slot and then find out it's unavailable. By preventing this sort of wrong turn, Peapod prevents backtracking and gets me one step closer to checkout.

Figure 4.20

EasyJet

Easy Picking http://www.easyjet.com

Here, EasyJet eliminates invalid airport options. Selecting Athens as my "From" point automatically filters the options in the "To" field to display just "London Luton," the one destination available from Athens. After all, it's easyJet that knows exactly where their planes fly, not their customers.

Figure 4.21

Guideline 13

Validate entries (as soon as possible)

You can improve conversion rates and make customers' lives easier by validating form responses on the spot. Check to make sure that email addresses contain an at sign (@) and no spaces, numbers are actually numbers, and other fields are filled in with acceptable responses.

AOL

New York, Alaska? http://www.aol.com

I entered an invalid email (".og" rather than ".org") along with an impossible city/state/zip combination (that is, the city is New York, the state is Alaska, and the zip code is in Illinois) at AOL's sign-up page. Yet AOL accepts all this information and allows me to continue with the sign-up process. Instead, the site should validate entries such as these to make sure that my email address is properly formatted and that the city/state/zip combo is real.

Figure 4.22

UPS

Match City and Zip http://www.ups.com

UPS knows zip code errors are a common cause of shipping mistakes. That's why they validate zip codes and make sure the city and zip match up before a shipment order is submitted. That way, both the customer and company come out a winner.

Figure 4.23

In this case, I accidentally entered my destination as a city in Illinois with a New York zip code. UPS catches the error and offers a pull-down menu with recommended alternatives (including appropriate matches for both the city and zip code I entered).

Most sites don't validate addresses on the spot, meaning this sort of error isn't caught until it's too late. UPS's smart validating saves me time and keeps my shipment on track.

Motley Fool

Enter a Valid Number http://www.fool.com

The Motley Fool site spots an improperly formatted phone number right away. This message explains the proper format for the entry. The site could go a step further and provide an example, too.

Figure 4.24

NBA

Invalid Email http://www.nba.com

The NBA site gives an alert that the email field is not completed properly. (It was left blank.) Friendlier language could be used, however. A better message would read, "You didn't enter a valid email address (for example: shaq_oneil@lalakers.com). Please try again."

Figure 4.25

ATI

Check Compatibility http://www.ati.com

I went to download a driver at ATI. I selected "Mac OS" as my operating system, but then mistakenly chose a non-Mac product. Thankfully, ATI checks to make sure that the OS and product are compatible. The site spots the error and informs me that I need to select a Mac product before moving on. This saves me time and frustration.

Figure 4.26

Overvalidation

Don't overvalidate forms, however. If you have international visitors, you may have to account for country-specific data (for instance, no zip code, an international phone number with a plus sign [+] at the beginning, and so on). You want to make sure you don't shut down these visitors with excessive validation techniques. In some cases, you may want to allow visitors to override error messages and submit the data as is.

Guideline 14

Button up: Eliminate the Reset button and disable the Submit button after it's clicked

When it comes to buttons, one wrong click can ruin an otherwise successful form experience. Inadvertently clicking Reset can delete an entire form's data. Accidentally double-click Submit and you may wind up submitting information twice (resulting in multiple accounts, purchases, or some other unintended consequence).

People rushing through forms don't carefully read explanatory text or buttons before submitting a form and often make one of these mistakes. Make sure this sort of misclick isn't a deal breaker.

Eliminate reset buttons

Reset buttons (a.k.a. Clear or Cancel) are an invitation to frustration. These buttons are rarely useful and pose a dangerous threat to visitors who are trying to complete forms: One wrong click and all that labor-intensive data entry is lost. Reset buttons also increase confusion because they force people to process the impact of different buttons to determine the proper next step.

There isn't much benefit to Reset buttons. Visitors can easily use the browser's Refresh button to clear form information or just type over the existing data. So when it comes to Reset buttons, just say no.

Bank One

Reset Only http://www.bankone.com

Bank One's student loan application features one button at the bottom of the screen. Clicking that button will submit my information and take me to the next step of the process, right? Actually, no. The one button displayed is Reset—one click and all the data on this page is erased.

It turns out the Continue to Step 3 button appears only after the final pull-down option is selected. Bank One would be doing its customers a service by eliminating the Reset button altogether and showing the Continue to Step 3 button as disabled until all necessary conditions are met.

Figure 4.27

FedEx

Asking for Button Trouble http://www.fedex.com

Here, FedEx makes a mistake by placing a Clear Fields button adjacent to the Send Request button. The Clear Fields button adds confusion and will cause problems when visitors in a hurry click it by mistake. How often is someone going to want to delete everything he just typed anyway? Just because the site can include a Clear button doesn't mean it should.

Figure 4.28

Confirm deletions

In the rare instance that a form does require a Clear or Reset button, try to confirm the action to minimize the chance that a visitor deletes data accidentally.

University of Washington

Are You Sure? http://www.washington.edu

I clicked the Erase Form button on this page at the University of Washington's site. The site uses a JavaScript alert to confirm my intentions. It's always a good idea to confirm data deletion to prevent the dreaded "Where'd all my info go!?"

Figure 4.29

Disable submit button once pressed

Too many sites scare customers with this sort of tough button talk:

"Click the Order button one time only and then wait for your order to process. If you click the button more than once, you will be charged for multiple orders!"

Ominous language and false charges? Not the way to make friends online.

Whether on purpose or by accident, customers will sometimes wind up double-clicking form buttons. There is a way to prevent duplicate submissions, however. Use JavaScript to disable buttons once they are clicked. Then, the script can change the button (for instance, fade it out to show it's been pressed and/or present new text that explains the situation, such as "Please wait while we process your order").

E*Trade

Click Only Once http://www.etrade.com

Creating a new account at E*Trade? Hopefully you're not trigger-happy. After you click Continue, you'll have to wait up to a minute for your entry to process. And if you mistakenly click the button twice (or click Stop and then click Continue), you'll end up with multiple accounts. E*Trade could prevent this messy scenario by disabling the button after it's clicked and changing the text to "Processing, please wait. This may take up to a minute." Alternatively, the site could provide an intermediate status page between the submission of the form and the results page.

Figure 4.30

Applied Biosystems

Disabling a Button http://www.appliedbiosystems.com

Applied Biosystems realizes customers may click a button more than once. To prevent duplicate submissions, the site uses JavaScript to disable the button after it's pressed. The code also changes the button's value from Continue (the button's original state) to Wait (the disabled state) so that visitors know what's happening. It's a nifty solution to a common problem.

Figure 4.31

Guideline 15

Assist form dropouts by saving information

Let's say I'm in the middle of filling out a lengthy registration form and my browser crashes. Or maybe I'm completing a gift purchase but realize I don't have the recipient's address on me. Or perhaps I'm late for dinner and don't have time to complete an account profile.

In any of these situations, I'll be forced to bail out and return to the site in question. When I come back, will I have to start from scratch or will my information be saved? The answer may be the difference between a lost customer and a satisfied one.

Just because a visitor abandons a form, it doesn't necessarily mean he or she won't come back to complete it later. Your site can help visitors like this get back in the saddle by saving data as it is entered. It's a great way to make an application, registration, or checkout process easier to complete. Customers will appreciate your proactive efforts and conversion rates will increase if you follow these measures:

1. Save customer data. Automatically save in-progress forms (or let visitors choose to save this data).

2. Tell form-fillers the data is saved. Use your site or email to remind visitors that they can easily jump back into an abandoned form process.

3. Provide easy access. Enable people to quickly access and complete abandoned forms.

What are the real-world applications of this technique? You can hold items in a customer's shopping cart so that they can be purchased later. Or store sign-up information so a customer doesn't need to start over from scratch. Or save a mortgage application when the applicant doesn't have all the required information at that moment.

Discover

It's Now or Never http://www.discoverhomeloans.com

While filling out a home equity loan application at Discover, I realized that I did not have all the information I needed (that is, I didn't know the total square footage of my property).

Unfortunately, Discover doesn't let me save the other information I've entered successfully, meaning I'll have to re-enter it all again. Discover should allow me to save this application so that later I can pick up where I left off.

Figure 4.32

Bank One

Saving for Later http://www.bankone.com

Bank One realizes lengthy loan applications can be difficult to complete in one sitting. That's why the site lets student loan applicants save applications and retrieve them later.

Figure 4.33

Netflix

Finish Up http://www.netflix.com

I abandoned the Netflix free-trial sign-up process at the final stage because I wanted to browse the video selection library more. The site wisely offers a persistent "Finish Sign-Up" link at the top of each page as I browse the rest of the site. This way I'm never more than one click away from returning to where I left off in the sign-up process.

Figure 4.34

After I leave the site, Netflix even goes a step further by sending an email to let me know my information is saved. The message also notifies me of the information that's still needed to complete the process. The email closes with a helpful link to "Finish signing up for your free trial." Tactics such as this are part of the reason Netflix recently doubled its subscription base in less than a year.

Forms are a hassle. "Invalid" responses, confusing choices, and unacceptable entries constantly gum up the works. It's no wonder that many busy surfers simply give up when faced with forms. Here's what you can do to help.

Chapter Summary

Effective form contingency design is a great way to boost conversion rates. Highlight required fields so that people know which ones are optional. Customers don't want to guess at acceptable entry types, so make sure you accept entries in all commonly used formats. Also, provide examples, pull-downs, and formatting hints to prevent data entry miscues. If there are limits on certain form fields, be upfront about them so that visitors don't wind up frustrated later on. Prevent bad data from entering the system by eliminating unacceptable options and validating entries on the spot. Eliminate button confusion by omitting Reset buttons and disabling Submit buttons after they're clicked. Finally, let people save lengthy forms so that they can complete them later.