10 Tips for Optimizing Web Form Submission Usability

Jan 7 2011 by Raphael Caixeta | 40 Comments

10 Tips for Optimizing Web Form Submission Usability

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.

Clearly Highlight Required FieldsThe 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.

Provide User-Friendly and Descriptive Error MessagesYahoo!’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.

Use Client-Side (JavaScript) Data Format ValidationSurveyGizmo’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.

Visually Style Focused Form Fields to Let Users Know Where They AreWufoo’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.

Visually Style Focused Form Fields to Let Users Know Where They AreGoogle 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.

Show Progress ClearlyAmazon.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

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.

Ditch the Default "Submit" TextBasecamp’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.

Show Users the Proper Input FormatThe 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

Single Column Vertical Forms Are BetterBackpack’s signup form is oriented vertically in one column.

Multicolumn Example

Single Column Vertical Forms Are BetterA 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.

Alexandru Cohaniuc

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.

Grip'd Custom Facebook Tab Creator

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.

Groupon

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.

KISSMetrics

MobileMe Sign In

Apple’s MobileMe login form is a great example of form design. The call-to-action button is clear and the :focus style on the form field is clearly visible.

MobileMe Sign In

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

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).

40 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.

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

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

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 :)

Thanks for sharing!

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 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

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……:)

R. Moczarski

January 12th, 2011

Really nice informations, thanks for sharing your experience with us

Adrian

January 12th, 2011

A nice little list outlining some of the key basics for designing friendly web forms.

Thanks for sharing :o)

Kelly Queijo

January 17th, 2011

Great info — thanks for sharing. I especially like the section on handling required vs optional fields.

Adam Robinson

January 17th, 2011

Nice collection of great forms.

Good work.

Mohammad Elsheimy

January 21st, 2011

Super-awesome, and really-amazing! Thank you very much! :)

Tri

January 23rd, 2011

Awesome information. I like the progress steps in forms with next pages!

JCM

February 3rd, 2011

Am I the only one having issues trying to print this article?
Can’t get it printed in portrait. Usability?

ik

February 8th, 2011

Great tips!
Thankyou for sharing!

Sexy

November 4th, 2011

Thanks for sharing
Nice tips for take care about

Vin

December 11th, 2011

I prefer jotform over wufoo

vijex

March 4th, 2013

Super-awesome, and really-amazing! Thank you

Leave a Comment

Subscribe to the comments on this article.