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.
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.
Read about best practices for hints and error-validation in web forms.
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.
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.
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.
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.
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.
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
Showcase of Excellent Web Forms
For inspiration, here are a few excellent web forms.
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.
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’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.
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.
Web Form Tools and Resources
Here are a few resources and tools for working with web forms.
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!
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.
This is a tutorial showing you how you can use jQuery to let your users know where in the form they currently are.
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.
- 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