If you have a website, you are likely to have a web form in it. From simple contact forms to full-bodied web applications, web forms play an important part in every day web use. Web forms primarily collect user information such as names, email ids, city, state, phone numbers, and even credit card numbers, bank addresses, etc, to run various online marketing campaigns.

Here are 10 web development tips for optimizing web form submission usability:

1. Highlighting Required Fields

Say you have an ecommerce website. Your website may have 3 different types of forms:
(i) a simple contact form that does not require sign-up and is available to all users
(ii) a user sign-up form for anyone who wants to use the shopping cart facility
(iii) an order form to make a purchase which may, or may not require a prior sign-up.

In all of the aforementioned web form types, specific information like user’s name and email address will be required. You may also require information like city, state, zip code, and phone number, and even credit card information.

The common convention is to highlight the mandatory or required input fields with an asterisk (*) beside the input field label. Explicit statements like ‘required’ and ‘optional’ beside input fields is a safe way to ensure users do not skip mandatory input fields.

Highlighting input fields shows the user the type of information required by your website to give the user what he’s trying to accomplish by filling out the web form: creating a user account, emailing customer service, ordering a product, etc.

2. Providing Descriptive Error Messages

In case of a simple contact form that requires filling out a maximum of 4 input fields, chances of skipping an input field is less. However, in web forms like product order forms or job application forms that require filling out a number of input fields, users are prone to skip entering important information.

Some web forms will allow users to ‘submit’ in spite of skipping required fields. Error pages will typically display a generic error message like “you must fill out all of the required fields”. This is frustrating and often times, borders on the possibility of an exit. In other words, users exit the website without going back and re-checking all input fields and re-entering data.

Specific error messages help a user spot his mistakes without going through all input fields of the web form. Specific error messages like “you forgot to enter your e-mail address” will make the user hit the back button and re-submit the form after making the correct entry.

3. Using JavaScript Data Format Validation

JavaScript can significantly reduce the amount of work a web server performs to process incoming web form submissions. Consequently, it also saves the user time.

Client-side or JavaScript error validation lets the user know when he’s made a mistake, usually immediately after entry of incorrect data format and before he can submit the form. Client-side validation is good for input fields that don’t need database checks to validate input format. Example, email address and phone number formats.

Performing real-time data validation is the smartest solution to ambiguous error messages. Web forms should be able to check the data format for its correctness and notify the user where he’s made a mistake before he can go to the next input field.

4. Styling Input Fields

Visually styling web input fields lets the user know which fields he is on. Visually styling input fields can be done using the CSS pseudo-class selector.

Two common styles are used:
(i) a distinctive background color for the active input field
(ii) a distinctly different border color against website background color/design.

5. Show Progress Clearly

Some web forms are big and will span across multiple pages. These forms are typically frustrating. However, by providing your users constant feedback on how far they are from completion of form, helps reduce irritation.

All it takes is a “Step 1 out of 5” text display to let the user know how much more time is required before final submission. ‘Next’ buttons are comparatively vague and will make users stop midway or exit site altogether.

Short web forms are always better. However, if you cannot help the length of your web form, you can at least make the user experience less tiring.

6. Periodic Saving/Caching of Form Data

Big web forms that span across multiple pages are prone to user errors. Also, filling out big web forms takes much time. In the event of a problem with the user’s Internet connection, data can get lost, consequently forcing the user to fill the web form from the beginning. Usually, when this happens, users exit the website without refilling the form.

To avoid loss of data, implement either a cookie or session to save user’s inputs. A periodic save or cache of form data makes your web form more fault-tolerant and improves chances of completion when the user returns after an Internet problem or if they had previously navigated away from the page.

7. Default ‘Submit’ Text is Passe

A ‘submit’ text has been the conventional favorite of web forms for a very long time. But today’s web users are more tech-savvy, thus more demanding.

A web form’s submit button should remind the user what he is about to do. Is he about to ‘sign-up now’ or is about to ‘create my account’? Submit buttons must let the user know the advantages of filling up a web form.

8. Avoid the ‘Cancel’’ Button

A ‘cancel’ button at the bottom of your web form isn’t helpful. It’s stupid!

You would want to retain your visitors as long as you can, or at least until they take a positive action on your site. A ‘cancel’ button makes them rethink their decision to fill out your web form. It’s very similar to when you go to a store to buy a shirt and the salesman asks you “do you really want to buy it?” and you leave after second, third and multiple thoughts.

The ‘cancel’ button has the same effect on your users; it shows them the exit door from your site.

9. Show Users the Proper Input Format

Passwords, birth dates, phone numbers and credit card numbers typically require specific input formats. Your web form should tell users what you are expecting. If you require passwords to be of a certain length or combination of letters and numbers, your password input field should have it explicitly mentioned beside the label.

Usually, a birth date, phone number and credit card input field will be segmented with specifics on how many numbers can be entered in each segment, either explicitly stated or coded to disallow entry of more 2, 3, or 4 numbers per field.

10. Single Column Vertical Forms

According to eye-tracking studies, web users prefer scanning forms top to bottom instead of left to right. Single line vertical forms reduce eye movement, and consequently eye stress.

Web forms are critical to any website requiring active user participation to run a successful online business. Web forms must be user-friendly and the submission process should be optimized keeping user accessibility and flexibility in mind.