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.

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.

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.

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.

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

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.

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

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

Multicolumn Example

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.

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.

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

5 Practices Your Clients Will Love

If your business relationships are going to work, your clients have to like you. If they feel comfortable with you, you’ll be on solid ground; a good rapport reduces the likelihood that you’ll get into difficult client situations. When you invest in a relationship — any relationship — the value of that relationship increases and it becomes more likely to bear fruit. So, once you’ve found awesome clients who are fond of you and your work, go the extra mile to ensure their loyalty and esteem. Here are a few ideas to get you started.

1. Don’t Neglect Them

No one likes to feel forgotten. Your clients want to know they can rely on you, now and in the future. Sometimes we forget to stay in touch with clients, especially if their project is a content management system and they can update it themselves once it’s been launched. Upon delivery and during the first stages of CMS troubleshooting, communication between the web professional and the client usually fades. This is less of a problem when you are maintaining the website for the customer, because you have to be in touch about every update.

Be in touch with your clients a couple of times per year at least, regardless of the type of work you did for them. Holidays provide a good opportunity to show customers that you remember them, and you can combine a couple of work-related matters with a friendly "best wishes" email or phone call. Ask about their current projects and whether they have needs or problems. You can advertise your services: suggest a website or logo redesign, a holiday newsletter or the addition of certain features to their website (a banner, new call-to-action buttons, etc.).

Occasionally contacting your clients will remind them that you’re still active and available, but above all, it will make them feel that you enjoyed working for them — enough to send a greeting and to touch base.

2. Predict Their Needs

Large companies have their own analysts to predict marketing needs as well as CTOs and IT managers to make sure their technology is up to date and scales with their demands.

Small and local businesses, on the other hand, rely a lot on their own experience and usually don’t have the luxury of having expert assistance from specialists. For example, the restaurant next door might need an advertising leaflet and know it, and their current design might look unprofessional or lack certain things that would attract more customers. The same goes for their website — if they even have one.

Working online makes one aware of what clients need to enhance their web presence. You can suggest marketing ideas that a customer couldn’t think of on their own: if you’re creating a website for someone, ask whether they’d like a newsletter or a mailing list, too. If you think their business will grow, propose adding an e-commerce service. If you’re designing a new logo for someone and you notice that their website looks unprofessional, let them know that redesigning it could help — and that you can do it for them. They’ll see that you take their advertising strategy seriously, and a thoughtful response will speak to your professionalism and experience.

3. Follow Their Activity

Sticking to your client’s work schedule will help you to both keep in touch with them and predict their future needs — so it’s tied to the two practices we just went over.

Keep abreast of their activities and you’ll learn valuable information about how their work is going and whether you can do anything to increase their exposure, whether by implementing new services or enhancing current ones. Check whether the services you’ve offered so far have been helpful in attracting customers and getting positive reviews.

Track your client’s business activity indirectly — via social networks, for example — or directly by contacting them and asking about their progress. A combination of the two is optimal; it’s accommodating and not intrusive. Also check the overall activity of the market sector your client operates in; get a general idea of current trends so that you can contribute to business conversations.

Nothing’s better than throwing a couple of new ideas into a discussion about market status or business ventures. Once you learn to speak the language, terminology included, they’ll feel more at ease when expressing ideas and concerns, and they’re bound to pay more attention to your marketing suggestions (as opposed to seeing you as someone who’s great at producing web masterpieces but can’t relate to their daily reality).

4. Don’t Make Them Wait

Ever been disappointed when you were expecting, say, an important package that had a specific date of when it would arrive? That’s how your clients feel when they send you a request (an update, question or suggestion) and you reply a few days later. Sometimes we slack a little after delivering the goods, especially if we’re the ones maintaining a website.

If someone sends an update to be posted on the website, upload it within 48 hours — that’s the general rule. A similar rule exists for customers who face technical difficulties: if a client contacts you by phone more than once within a few hours, it means they are going through what they consider to be an emergency, and you should get in touch with them as soon as possible.

To avoid being tardy with service and replies, predefine acceptable waiting times for your clients. You can either detail the matter in an FAQ page or prepare specific guidelines for each of your clients or services. Let clients know what is considered "urgent." For example, when I maintain a conference website, updates about the program or the registration process are considered urgent, whereas a new photo of the conference location can be posted at any time. Urgent updates should be posted within 24 hours. For less urgent updates, decide on appropriate timeframes and let your clients know what they are. Tech issues can be approached the same way.

In any case, let your clients know you’ve received their request, and estimate a time for its completion. Then, when you’ve managed their request, let them know it’s finished and suggest that they look over the result. If you’ve uploaded some news to their website, for example, send a confirmation email that includes a link to the new content.

5. Grant Them Privileges

Awesome clients should be rewarded for their cooperation and constructive criticism. If you’re interested in establishing long-term relationships, inform your clients of the ongoing benefits that come from collaborating with you.

Offer discounts to those who choose your services a second time.

Be understanding and flexible with your pricing and payment methods for clients who have always been punctual with payments and trusting of your ideas.

Offer freebies to customers who have stayed with you for a long period of time — perhaps a new banner, a website enhancement (like a new design for the photo gallery) or a free domain name renewal for the new year (it’s timely and low-cost).

Let them know they’re at the top of your list and that you cater to their needs first. Appreciating good customers will benefit your relationships, build trust and serve as a marketing gesture.

No matter how much you offer, sometimes things won’t turn out the way you planned. Don’t become embittered if a loyal client chooses a new service provider; maybe they want something you can’t offer. Maybe your services could use some more sparkle. If a relationship with a client goes sour, even though you’ve done your best, perhaps it’s because you’ve spoiled them — or perhaps they didn’t deserve those perks in the first place. Rethink the criteria by which you choose clients.

No matter how vitriolic a client turns out to be, don’t unleash your wrath on other clients. If you can’t handle your disappointment or channel it appropriately, you’ll miss opportunities for collaboration. You’re allowed to be a little cautious, but remember that the client has to trust you and your skills first; don’t be afraid to show off your best attributes and client-management tactics.

What’s your suggestion for making clients fall in love with your services? Have you tried any of these tactics? How did it turn out?