10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

Six Revisions
Skip site navigation

Home
All Articles
Tutorials
Freebies
About
Contact
Subscribe: RSS Feed
Follow on Twitter

661 82
Like
10
Tips for Optimizing Web Form Submission
Usability
January 7th, 2011 by Raphael Caixeta | 29 Comments | Stumble It! Delicious

Web forms play a big part in every day web use. If you build and/or run websites, chances are, you have
a web form in it, whether it’s a simple contact form or a rich and robust web app. There are several ways
to make sure your web forms are optimized for your users. Here are some tips for making sure that your
form submission process is user-friendly.

1. Clearly Highlight Required Fields

It’s annoying as a user to submit a web form only to later find out that you’ve missed required input
fields.

A common convention for highlighting required fields is to have an asterisk (*) beside their label.
Explicitly stating that an input field is required or that the field is optional is a safe way to go.

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 1 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

The Zappos.com
registration web form highlights required fields with an asterisk (*). Optional fields are explicitly stated.

2. Provide User-Friendly and Descriptive Error Messages

I’m sure you hate it when you make a mistake in a web form and all the error says is "You must fill out
all of the required fields below," when they should really provide a more specific error message like
"You forgot to enter your e-mail address."

Performing real-time data validation as the user is filling out the web form is a good solution to
ambiguous error messages. For example, immediately after filling out the email address input field, the
web form should check whether it’s in the correct format, and if it isn’t, the user is immediately notified.

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 2 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

Yahoo!’s sign up
form provides meaningful real-time error messages even before the form is submitted.

Read about best practices for hints and error-validation in web forms.

3. Use Client-Side (JavaScript) Data Format Validation

Using JavaScript data validation saves the user time, as well as reduces the amount of work your web
server has to perform to process incoming web form submissions. Client-side error validation allows you
to let users know they’ve made a mistake right away, instead of after they’ve submitted the form. This is
good for any input fields that don’t need to check your database; things such as making sure the provided
email address is in the correct format or that a phone number only contains numbers.

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 3 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

SurveyGizmo’s sign
up form lets you know that the format of the email address you entered is invalid.

4. Visually Style Focused Form Fields to Let Users Know Where They Are
Make sure that you visually style input fields so that it is very apparent which field the user is on. You
can do this by using the CSS :focus pseudo-class selector.

Wufoo’s web form

visually styles the active input field by giving it a distinctive background.

Make the input field have a different border color at the minimum — by default, web browsers will do
this for you, but make sure that the default color is distinctive against your website’s design.

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 4 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

Google Chrome’s
default style for a focused input field is to provide it with a yellow border. In Firefox, it’s a faint blue
border.

5. Show Progress Clearly

If your web form is big and it spans across multiple pages (or has several steps), make sure that you
provide the user with constant feedback on their progress to let them know how much more time they
will require to finish the web form submission process. This is common in cases such as an online survey
form with many questions or an e-store’s checkout process.

All it takes is displaying "Step 4 out of 5," or something of that nature. If they keep clicking "Next"
buttons with no clear vision of when they’ll be done, they’ll most likely stop sooner than you’d like.

Amazon.com’s
checkout process has 4 pages. The form shows you where you are and how much more there is to fill out.

Of course, the better alternative would be to shorten your web form — but barring that option, at least
give the web form user an indication of where they are in the completion process.

6. Save/Cache Form Data Periodically

Forms that go through multiple pages or steps are prone to user errors. To avoid data loss, you definitely
want to implement a way to save your users’ inputs in either a session or cookie variable. This makes the
web form more fault-tolerant, and improves your chances that the form will be completed even after
accidents such as the user navigating away from the web page. Having to re-fill out the web form may
discourage users from completing it.

7. Ditch the Default "Submit" Text

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 5 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

Instead of having your web form’s submit button say "Submit," have it remind the user what it is they’re
doing, like "Sign up now," or even better, let the user know of the advantages of filling out this form.

Basecamp’s
signup form replaces the default "Submit" text with something more useful.

8. Your "Cancel" Button is a Major Distraction

If you were at a store buying a new shirt and the salesperson asked you, "Are you sure you really want to
get this shirt?" would you continue to buy the shirt? Probably not. Maybe you’d be hesitant; is the
salesperson telling you the shirt doesn’t look good on you?

Same goes with your web forms; having a "cancel" button may make your users think twice about what
they’re filling out.

9. Show Users the Proper Input Format

If you’re asking your users for a specific input format — such as a phone number or credit card number
— let them know what you’re expecting. If a password has to have a certain number of characters, or if it
must contain certain combinations of characters, clearly describe these requirements. This reduces
ambiguity and makes filling up the form quicker.

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 6 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

The Geico
registration form provides unambiguous instructions on what format they’re expecting.

10. Single Column Vertical Forms Are Better

According to an eye tracking study by cxpartners, a user experience design agency, scanning down the
form is preferable to scanning from left to right. It reduces the number of eye movements you need to
make in order to fill out the form.

Single Column Example

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 7 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

Backpack’s signup
form is oriented vertically in one column.

Multicolumn Example

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 8 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

A counter-example,
eBay’s multi-column signup web form requires users to fill out the form up and down as well as left to
right.

Showcase of Excellent Web Forms

For inspiration, here are a few excellent web forms.

Alexandru Cohaniuc

Alexandru Cohaniuc’s web form looks absolutely stunning as far as design and functionality goes. It
clearly lets you know whether he’s available for freelance work, it has easy-to-read labels and has input
fields with clear and legible type.

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 9 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

Grip’d Custom Facebook Tab Creator

Grip’d's custom Facebook tab creator lets you know exactly what step you’re in, along with big buttons
that attract a user’s attention to keep going through the process of generating a custom Facebook tab.

Groupon

Groupon’s web form clearly lets you know where you are in the process of signing up. They do an
amazing job at effectively using a multi-step registration form.

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 10 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

KISSMetrics

KISSMetric’s form shows a great example of web form design along with JavaScript validation. When
you make a mistake, you’ll know about it right away.

MobileMe Sign In

Apple’s MobileMe login form is a great example of form design. The call-to-action button is clear and

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 11 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

the :focus style on the form field is clearly visible.

Web Form Tools and Resources

Here are a few resources and tools for working with web forms.

Wufoo

This web app allows you to generate your own forms and gives you the code necessary to embed the
form in your web pages. They handle analytics and even payments for you!

Contactable

A jQuery plugin that lets you easily create contact forms and feedback forms anywhere on your site. It’s
extremely easy to use and provides a great result.

Changing Form Input Styles on Focus with jQuery

This is a tutorial showing you how you can use jQuery to let your users know where in the form they
currently are.

Form field hints with CSS and JavaScript

A tutorial that will teach you how to show form hints when users click on a field. This is a great way to
show your users specific formats for phone numbers and other fields.

LiveValidation

A way to easily provide live field validation as the user types with JavaScript. You can configure it to
work in pretty much any way you want.

Related Content
25 Stylish Examples of Web Forms
20 Websites to Help You Master User Interface Design
40 Exceptional jQuery Interface Techniques and Tutorials
Related categories: Usability and User Interface

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 12 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

About the Author

Raphael Caixeta is a PHP and iOS developer and co-founder of Grip’d. He likes to blog
about web and iOS development at raphaelcaixeta.com. If you’d like to connect with him, you can follow
him on Twitter @raphaelcaixeta and add him on Facebook (raphaelcaixeta).

29 Comments

Channel Frog

January 7th, 2011

Thanks Raphael for providing this info. I visited your site for the first time & subscribed.

Form filling plays a very important role in sales. Although, many websites knows their best to optimize
their forms to the best for the visitors but some are lacking in those also. We need to provide forms
simple, easy, precise & to be SHORT. Long forms may tend the users to leave the page.

Jonathan

January 7th, 2011

Definitely a great post for the fundamentals of form submission.

Great work!

Anthony

January 7th, 2011

Great write up Raphael.

As a seasoned web professional, these tips are common to me. However, this article serves as an
excellent reminder and has great examples. I work in a Java development shop building a web based
software application, stuffed full of forms and the like. I am printing this and distributing it today. Very
useful, very informative, well written and explained.

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 13 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

Giacomo

January 7th, 2011

Nice article!

p.s. I might be wrong… but isn’t 7 supposed to follow 6 and precede 8? :)

Vivek Parmar

January 7th, 2011

Contact form is necessary for every website and its more important for popular website.
Optimizing contact foorm is necessary when you are selling a product so that it may benefit you.
For bloggers it is not necessary that you have to put too much emphasis on optimizing contact form.

Steve

January 7th, 2011

#3: “Using JavaScript data validation saves the user time, as well as reduces the amount of work your
web server has to perform to process incoming web form submissions.”

Shouldn’t you use BOTH client-side AND server-side validation checks for security purposes?

Greg Givan

January 7th, 2011

Fantastic list. Every tip spot on.

Adam Fairhead

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 14 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

January 7th, 2011

Great read, thanks for that. I really like the look the of the KISSmetrics and new MobileMe sign in box.

gedit

January 7th, 2011

A nice overview on validation technics on prominent site.

I miss a hint on HTML5 form types and validation features.

Dheeraj

January 7th, 2011

Very good article for developers. You can always judge a good application by the quality of its forms.
All 10 points are very relevant.

Ejaz

January 7th, 2011

Very good article and showcase Raphael, just a small thing

your point no 8 is coming after 6.

Dawn LeBlanc

January 7th, 2011

Very useful article. Whilst I would have thought of some of these, you made some good points that aren’t
so obvious.

Kyle

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 15 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

January 7th, 2011

One thing not mentioned that drives me insane is tab ordering. Don’t make the user have to go back to
their mouse to move to the next field. The tab key should move the focus fluidly through the entire form
in the correct order.

Jacob Gube

January 7th, 2011

@Giacomo: Thanks. Fixed.

@Steve: Yes, you still want to do data validation after the form has been submitted in case JS is disabled
and for security. However, that point is for client-side data validation versus Ajax data validation (where
you send the data to the server, have your server-side script validate, send back a response, update).
Some things you just don’t need server-side validation. For example, checking to see if a form field is
not blank when the user moves away from it to go to another field — that can be done client-side.
However, when the form has actually been submitted, you still want to validate the input to make sure
it’s clean and that your JS validation worked (if you’re storing it in your DB).

It’s a subtle point.

Mike

January 7th, 2011

Good article with great examples. If you are doing 508 or WCAG work make sure the error messages are
at the top of the forms. It can work better in many cases for sighted users as well.

Marco Barbosa

January 7th, 2011

Very nice Raphael.

My favorite is #10:

“10. Single Column Vertical Forms Are Better”

That applies also to labels on top of inputs imo :)

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 16 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

Thanks for sharing!

Mohan Arun

January 8th, 2011

One more: Top-align form labels

http://uxmovement.com/forms/faster-with-top-aligned-labels

Vijay Joshi

January 8th, 2011

Good usability tips once again. I really liked #8. I never thought of the cancel button in this way.

Theo

January 8th, 2011

Another great article with good examples on form usability!

Chisty

January 9th, 2011

Finally, a great article about forms. Thank you so much! I use http://www.quickwebform.com for my
contact form. Does anyone use it? I highly recommend it for simple contact forms.

Jake

January 9th, 2011

Nice article. Funny you mentioned quickwebform.com. Just found it last week. Cool concept. I wish you

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 17 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

could add fields though.

Karuna Murti

January 9th, 2011

Disable submit button for a few seconds after sending.

Jan

January 9th, 2011

Very nice checklist. I only miss 1 thing. That is: as less form fields as possible. Users are not very
motivated to fill in lots of fields. I would say: if fields are not mandatory, skipp them.

Nawaz Khan

January 10th, 2011

In response to “Clearly Highlight Required Fields”. I slightly disagree with this approach. websites
shouldn’t be collecting information which is not required. Even it needs to , it should give it as an
secondary group on a different option. Also the asterik sound bad for a screen reader user like it will read
“Start Name Edit type in text” . For each field it will read start which is meaningless. Alternatively we
can set aria-required attributes for such required fields. But for a visual users also it will look like spotted
deer :-)
Regards

Umer

January 10th, 2011

I agree Clearly Highlighting the Required Fields is very important for Web Forms

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 18 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

Usman

January 10th, 2011

Thanks for sharing this useful article. I agree the required field should be labeled clearly so that user’s
input information in the required fields

Jun Baranggan

January 10th, 2011

Great examples there Raphael. Very useful in optimizing landing page forms.

Cheers!

Caroline Jarrett

January 11th, 2011

A nice selection of tips, but you’ve missed the most important one: make sure that the questions you ask
are appropriate to the context.

That is: if you don’t need the answer, don’t ask the question. If the user doesn’t understand why you
need the answer, don’t ask the question. If you can avoid having a form at all, remove it.

People are willing to provide answers to questions if they clearly understand why that effort is important
to their ongoing relationship with your organisation / web site / service. If not: you’ll get rubbish,
refusals, or an annoyed user.

best
Caroline

baltech

January 12th, 2011

Thanks for this useful information……:)

Leave a Comment

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 19 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

Name (required)

email (will not be published) used for Gravatars (required)

Website

Subscribe to the comments on this article.

Submit Comment

Advertise Here

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 20 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

Advertise Here

Search
Search

Topics
AJAX
CSS
Design Showcase / Inspiration
Flash
Freebies
Graphic Design
JavaScript
Photoshop
Project Management
Resources
Tools
Tutorials
Usability / Accessibility
User Interface
Web Applications
Web Design
Web Development
Web Standards
WordPress

Recent
Free Exclusive Download: MacX DVD Ripper Pro (Win/Mac)
Giveaway: 5 Memberships to JoomlArt Magento Theme Club
5 Practices Your Clients Will Love
Is Web Copy Ruining Your Design?
10 Tips for Optimizing Web Form Submission Usability

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 21 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

Buy our Book

Purchase a copy of MooTools 1.2 Beginner's guide on Amazon.com. Read more here. Also
available on Packt and Barnes & Noble.

Friends
1stwebdesigner
Addictive Fonts
AddToDesign
App Sheriff
Blog.SpoonGraphics
BrushLovers
Burbia
Chris Wallace
CSS Globe
Design Bump
DesignOra
Designmess
DesignM.ag
Desizn Tech
fudgegraphics
Function
InstantShift
LaptopLogic.com
Marcofolio.net
MyInkBlog
Naldz Graphics
NETTUTS
N.Design Studio
Noupe
Onextrapixel
psdfan.com
PSDVIBE
Queness
[Re]Encoded.com
Smashing Apps

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 22 of 23
10 Tips for Optimizing Web Form Submission Usability 12/01/2011 18:33

Smashing Magazine
Stylegala
Speckyboy Design Magazine
Stylized Web
Technology.am
TheBestDesigns.com
Vandelay Design
Walyou
Web Designer Help
Webdesigner Depot
Web Design Ledger
WPBeginner

Become a Facebook Fan of Six Revisions. Advertise - Contact - RSS Feed ©2008-2011 Six Revisions.
Six Revisions mobile version by Mobify.

http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ Page 23 of 23