Stop for a moment and consider the goals of your website. Regardless of whether it’s a purchase through a shopping cart, a lead generation, white paper download, or a email opt, I’m going to bet every one of these actions requires a customer to use a web form.
With web forms playing such an important role in the completing goals, it goes without saying that we should optimize the heck out of them. Below are 25 tips for doing just that.
Ditch the Captchas: Captcha’s are great for blocking spam, but some evidence suggests they are just as good at blocking conversions. A little spam isn’t the end of the world, and definitely isn’t worth losing conversions over. If you must use a Captcha, make sure it’s easy to read.
Remove Unnecessary Fields: Do you really need to ask for your customers date of birth and gender? Even if your customers aren’t concerned about privacy issues, odds are they’re lazy and might just abandon your excessively inquisitive form. Here’s some great advice from Get Elastic on registration forms.
Keep It Simple: Just because we can use CSS to do all sorts of fancy things with text boxes, doesn’t mean we should. Keeping form fields simple will ensure that customers understand their purpose and won’t confuse them with design elements.
Clear the Clear Button: Having a clear button next to the submit button just makes it easier for customers to accidentally delete what they’ve entered. Skip this unnecessary feature.
Cancel the Cancel Button: In the case of long or multi-part form pages, such as checkouts, don’t give customers the option to cancel their decision. That’s equivalent to a commission driven salesperson asking, “Do you really want to buy this?”
Label Required Fields: People want to do as little as possible. For this reason, let your customers know what they are required to fill out with an asterisk or similar label.
Use Point of Action References: If customers are getting confused by the information you’re asking for in a particular field, include a small note with a popup link with more information. For example, one of the most common POA references is an explanation of the 3 digit CVV code found on the back of credit cards.
Show Formatting Examples: Some fields should have notes showing how to format them, depending on your database requirements. For example, you might want phone number formatted in a certain way, with or without parenthesis, dashes, etc. In general though, keep these formatting requirements to a minimum in order to keep it simple for customers.
Make it International Friendly: Forms requiring an address can be confusing if they’re built only with US residents in mind. Check out these detailed guidelines for building international friendly forms.
Allow Easy Forward and Backward Movement: Customers rarely maneuver through our website the way we intend them to. In order words, they hit the back button, the forward button, refresh, etc. Depending on how your forms pass data, this could cause error messages such as “this page has expired”. Make sure you test the forward and backward flow of any multiple page forms on your site.
Logical Tab Sequence: Don’t you hate it when you hit tab, and rather than going to the next field, the focus moves somewhere else on the page? This problem is likely due to the way the form is laid out with HTML tables. Make sure your forms tabs in a logical sequence to prevent customers from accidentally skipping fields.
Server Side Validation: There’s 2 ways to ensure that your visitors are entering correct data into fields. You can use client-side scripting (such as Javascript which is browser dependent) or server side error processing. In addition to server side validation being less reliant on the user’s browser settings, it’s also more secure.
Clear Error Messages: When displaying error messages when customers enter invalid data, make sure your messages are clear and well placed. This means saying “Please enter an email address” rather than something vague like “you must fill out all fields.” A best practice is taking them right back to the field with incorrect data, and displaying the error message next to it.
Show What’s Needed When Its Needed: It’s best to hide form fields until you know they are absolutely needed. For example, if you already know your user is from the US, you can dynamically hide the province field and show the state drop down box instead.
Logical List Order: When using drop down lists or radio button lists, make sure you order them in a logical way, listing items higher if they are selected more often. In other words, if 90% of your customers buy from the USA, don’t list Afghanistan as your first option, and United States at the very bottom.
AJAX Validation: Some sites have begun to validate form inputs as soon as the user tabs out of the field. This can be very effective, since it does not break the flow of the process. Its easier to correct an error immediately after entering it rather than after the whole form is completed.
Remember Me Feature: For login forms, allow customers to choose a “remember me” option, which uses a cookie to fill in login information the next time. Who wants to remember all those passwords anyway?
Set Focus: When a page loads containing a forms, sending the cursor to the first required field will prevent users from having to click into the field in order to start typing. This can be accomplished with a simple JavaScript function.
Avoid Obnoxious Password Requirements: Ever received this annoying error? “Your password must contain at least one letter, number, and be least X number of digits.” Requiring passwords to be formatted a certain way may help security, but it will likely discourage return visits since visitors must now remember an unfamiliar password.
Progress Indicators: For forms that span multiple pages, include a progress indicator letting people know where they are in the process. These are most commonly seen during checkout and would include steps such as “Shipping Info > Payment Info > Receipt Confirmation.”
Minimize Scrolling & Pages: A good case can be made to limit the number of pages in a a multi-part form in order to prevent customers from abandoning. However, an opposing case can also be made than ridiculously long, single pages forms that require scrolling can scare off customers. There’s no sure-fire rule here, its a perfect opportunity to perform your own a/b test.
Strong Call to Action Buttons: Sometimes “Submit” just doesn’t cut it. In other words, be specific and action oriented with your form buttons.
Use External Labels: Have you ever used a form that labeled the field with text that disappears when you click into it? This can be a great space saver, but extremely confusing if a customer forgets what the field is for since the label has disappeared. Here’s a great example of why external form labels are more effective.
Prioritize Size and Location of Multiple Button Forms: On a form with multiple action buttons, make sure you emphasize the most important button leading to the conversion. For example, if your final order confirmation screen has 2 buttons, “Finalize Order” and “Edit Order”, make sure the “Finalize Order” button is larger and more prominent.
Clear Confirmations: Have you ever filled out a long, tedious form, clicked submit, only to be returned to what seems like the same page with the form empty? You can do everything right with your form, but if you drop the ball on the confirmation, your customers will be helplessly confused. In addition to making a clear confirmation message, check out these other tips to prevent wasting your confirmation page.