21 Ways to Improve Your Forms

k.singh
Kay Singh Director (E-Commerce), Noble Infosys

Posted on February 1st 2013

21 Ways to Improve Your Forms

Forms are a very important element of any website. Forms make a website interactive and allow businesses to collect valuable data from customers. Forms are also one of the most effective ways for businesses to generate leads from websites.

Although most businesses use forms on their website, very few businesses get the desired results. Many forms suffer from poor conversions and as a result fail to generate sufficient leads for the business.

There are many factors that affect the performance of forms. The design and placement of the form, effective use of call to action and the overall usability – all play a role in determining the results of forms on a website.

In this article, we take a look at simple techniques to improve for your web forms and get better results. These tips will help you to boost conversions and get more out of your website.

Here are some simple ways to improve the performance of your website forms:

1. Use Clear Field Labels

Clearly labelled fields are an easy way to improve the usability of forms whilst ensuring the quality of data that is collected. Clear descriptive labels also reduce ambiguity of the information that needs to be entered.

 

Form Design - Labels

2. Use Descriptive Default Text in Form Fields

Displaying default text in form fields is a simple way to improve the usability of forms. It can be used to complement the field labels or even used instead of the labels. It gives a clear idea to users about the information they need to enter.

Form Design - Default Text

3. Make Input Field Text Disappear On Click

When displaying default text in form fields, it is important to ensure the default text disappears when a user clicks on the field. Not doing this interferes with the information entered by users which can be annoying for the user.

Here is a simple JavaScript function that you can use to make the default text in your input field disappear when the user clicks on the field:

4. Use Good Form Validation

Appropriate form validation helps to ensure that users provide the correct information and complete all the required fields before submitting the form. It makes the form easier to use by making sure it has been completed correctly in the first attempt. It also helps to ensure the data they enter is properly formatted and gets rid of characters that can harm or damage your database.

5. Use Good Design and Layout

The design of the form can play an important role in both, usability as well as conversions. A well designed form that is visually appealing with clear fonts against a contrasting background is easy to read and use.  Well designer forms get easily noticed and is a sure-shot way to generate more leads.

Good Form Design

6. Place Your Form Prominently

The placement of form on the website plays a major role in determining conversions. Important forms should be placed above the fold if possible. Well placed form is noticed easily and has better conversions.

Form Design - Prominent

7. Simply Your Form

Try to simplify your forms as much as possible. Forms that use fewer fields and steps are much easier to use and tend to produce better conversions. Try to keep your forms as simple as possible. Keep it single step as far as possible.

Form Design  - Simple Form

8. Display Inline Error Messages

Error handling is an essential part of web design, and is particularly important on forms. Correct error message make it easy for users to complete the form correctly and ensures good quality of data for the business.

Error messages can be displayed in an alert box, on the confirmation page after the form has been submitted or inline next to the respective fields. Inline error messages can improve usability, minimise the number of clicks required and make it easy for users to complete the form.

Form Design - Inline Errors

9. Use Special Email Validation/Number validation

Special validation on email and numeric fields are particularly important on website forms. It helps to maintain the quality of data collected by the business and ensures users provide the correct information. It also minimises spam.

Form Design Tips - Validation

10. Add Tooltip

Tooltip is a message that appears when a cursor is positioned over an icon, image, hyperlink. It is used to offer more information about the fields. Adding tooltip next to form fields is a very effective way to improve the usability of forms whilst offering an interactive experience for users.

Form Design - Tooltip

11. Take Advantage of Directional Cues

Directional cues like arrows have become very popular on websites in recent years. They are particularly effective on forms. It is a great way to redirect the user’s attention towards important elements of your form or towards the form itself. It is a great way to boost conversions.

12. Take Advantage of Landing Pages

Creating dedicated landing pages for your forms is a widely used technique to promote the form and highlight the benefits.  A dedicated landing page offers more space to highlight the benefits of completing the form and motivates the user to complete the desired action.

Form Design - Custom Landing Page

13. Ask For Less Information

No one likes to share their personal information with businesses. The amount of information requested in your form has a direct impact on conversion rate. Try to minimise the number of fields in your form. If a field is not needed, remove it.

14. Highlight The Privacy Of Data

Privacy of their data is a major concern for users and often one of the main factors that prevents them from filling out forms on websites.

A simple message next to the form informing users that their personal information will not be shared and kept confidential can prove very effective for addressing this concern.  You can also consider displaying a link to your privacy policy next to the form.

Form Design - Privacy

15. Use cookies to Remember Preferences or Pre-Fill Form Fields

If feasible, consider using cookies to remember preference or pre-fill the form with user’s information. It improves user experience and makes it easy to use the form again.

A perfect example of this is comment form on blogs where, if you have commented before, your name, URL and email fields are usually pre-filled with your data when you visit next, making it easy for you to comment again.

16. Use Call to Action in Button Text

The button on your form plays a very important role. A well designed button is known to increase conversions. Another useful technique is to use call to action in your button text instead of generic words like ‘Submit’ or ‘Send’ e.g. if using a booking form, it is to use ‘Make a Booking’ as button text instead of ‘Submit’. Similarly, you can use ‘Make an Enquiry’ or ‘Get in Touch’ as your button text on enquiry forms.

Form Design  - Call to Action in Button

17. Use a Descriptive Heading

Use of clear descriptive heading above your form is an easy way to let users know what the form is form. Use of clear bold fonts and compelling call to action can prove very effective for attracting the attention of users and increasing conversions.

Form Design - Heading

18. Use Good Confirmation Page

Not redirecting users to a confirmation page on submission or not displaying appropriate success message on completion of the form is a common usability mistake that many businesses make on website forms. Displaying a confirmation screen is vital for good usability. It informs the user that the form has been submitted and lets them know what will happen next.

19. Display Small Forms Inline

There are two ways to use forms on your website. You can either keep your forms on a dedicated page or display it inline on the page itself. If your form is simple and has a few fields e.g. request a call back or make an enquiry, it may be better to display the form inline or embed it on the page itself. This will provide more focus to your form and reduce the number of clicks required to access the form.

20. Use Steps on Long Forms

Although we have discussed the importance of keeping the forms on your website simple, there are times when this is not feasible to do. For complex forms that required dozens of fields, dividing your form into several steps may improve usability and make it easier for users to absorb the information.  A complex booking or registration form is one example.

Form Design -Steps

Alternatively, for lengthy forms, you can split the fields into sections on a single page if you want to use multiple steps. Many designers prefer this approach.

See image below for example.

Form Design - Sections

21. Use Auto-Complete Where Feasible

Auto-completing fields where possible is a great way to make your forms interactive. It improves the usability of your forms by making it easier to complete. It also minimised the scope of error on important fields.

Form Design - Autocomplete

Conclusion:

Forms are an essential component of professional websites. Businesses and web designers all over the world use it to capture leads on the website. It is a simple but very effective way to build your customer databases, generate leads and increase sales. The tips above highlight the top ways to improve the usability of your web forms and see your results skyrocket/boost your sign-ups and conversion rates.

k.singh

Kay Singh

Director (E-Commerce), Noble Infosys

K.Singh is an E-Commerce Consultant from London with over 12 years of experience consulting and training  with prestigious businesses. He is the Director of Noble Infosys, the London based New Media Agency & the Editor of the Internet Marketing Blog.

He is also the founder of SmallBusinessEcommerce.co,uk, a service that offers Professional Websites for £49

See Full Profile >

Comments

ctimpson
Posted on February 1st 2013 at 11:50AM

I love how this post is broken down. Thanks for sharing!

k.singh
Posted on February 5th 2013 at 10:18AM

Dear Cierra,

I am pleased to  know you like my post. I have put a lot of attention in making sure I have included screenshots to illustrate each point. In fact, I have since put together new images explaining some of the points that were originally missed. I will be updating it soon.

maneetpuri76
Posted on February 4th 2013 at 12:25AM

Good going Kay! Website forms are one of the most underrated and ignored aspects of a website. If utilized properly website forms prove to be one of the most effective communication channels that a web master could have with his target audience. I have covered some exceptional points in my own article by the title “Web forms their importance and how to improve them”. Do tell me if you find the info useful!  

k.singh
Posted on February 5th 2013 at 10:17AM

Dear Maneet,

I also think that there is a shift in the attitude and attention given to forms by web masters. Over the past few years, I have definitely seen a noticeable increase in the quality as well as use of forms on websites. Websites seem to be utilising forms far more effectively than they did a few years ago.