Forming the Form: 10 Best Practices for Creating Website Forms

Forming the Form: 10 Best Practices for Creating Website Forms

Forms. As easy as they may be to develop, even the smallest of issues on them could impact subscription, purchase, registration, sign up, etc. therefore dramatically hampering business.

If your customer reports  poor conversions on the  webpage you built for him, it could very well be a result of an ill designed form. You want to make sure you get this one right because forms can be a make or break a business. If your website is the elevator pitch, a form is the act of collecting the business card!

Types of Forms

Forms come in various shapes and sizes, some common types of forms are:

  • Checkout forms: These forms allow for subscription for a paid service, purchase of a product etc. They allow for transactions over the internet.
  • Registration / Signup forms: These may or may not include transactions. An example of this could be registration for an event or for a Twitter account.
  • Data submission forms: These forms allow for knowledge sharing on groups, forums, blogs, social media sites etc.
  • Conversation forms: These could include forms on Contact Us pages that have fields like Name, Email address and message fields. Also in the more recent years, conversation forms have extended to include chat box pop-ups with chatbots (or support team members) like this one:

10  Best Practices to follow to Create Forms

1. Allow sign up with social accounts: Almost everyone’s logged into Facebook or their Gmail accounts on their phones. In most cases where the collection of data is not too strongly tied with legal  / compliance requirements, allowing a registration or sign up with one of these two social accounts through a single click saves the user the trouble of filling anything at all.

2. Labels are important: Labels are the literally the label you give to your input fields. Some best practices with labels are:

  • To keep it short, crisp & specific
  • Left placement is probably the best placement for easy skimming through of your form
  • Ensure equi-distance between the label and field again, for easy viewing

3. Refrain from overusing the mandatory field asterisk: LET THE ASTERISK GO*

*Unless absolutely necessary 😉

I know it’s tempting to use an asterisk on all fields because it helps you derive maximum information that could be useful for you or your client but this could put off your potential customer. Especially if there are a bunch of fields to fill.

Long forms definitely increase bounce rate and to add to it, mandatory fields can make the user uncomfortable. This is especially true if the user does not want to give out personal information like phone number. If you can let it go, please do!

A better alternative is to display the fields that are optional. It makes the user feel less pressured and the experience more pleasant.

4. Avoid spinners: The fat fingers struggle is real.

Although HTML5 allows for brilliant tools, the number field spinner is not one of them. Reason being, it can get really difficult to use on a mobile phone even if you have small fingers like I do. Inadvertently, it takes almost 3 -4 tries at least to get the right number. A better idea is to use a dropdown.

5. Launch calendar for date fields:  Dates are tricky ones (yes, these kind of dates too). If a user is only presented with a single blank for a date, chances are, he wouldn’t know what format to fill it in, defeating the purpose of collecting this information.

04/05/2015 could be both MM/DD/YYYY or DD/MM/YYYY depending on which part of the world you are in. The easiest way to tackle the ambiguity is to launch a calendar.

6. Force data formats where necessary: It can be confusing when a user is filling out a form that requires him to input data that has various units. For example, a field for his weight could mean he could input the figure in Kilograms or pounds.

Similarly with currency. For a website that receives traffic from various parts of the world, lack of specification of currency in the transaction form could be confusing for the user. To avoid confusion, add the format of the data against each field.

Additionally, you could use data validation like ‘_’s to indicate how long/ short the data should be for say, a pin code, to avoid validation errors and confusion. However, ensure the validation you use is easily understood and not extremely aggressive either.

7. Allow pre-fill and auto-fill forms where possible: It’s just so much easier to fill a form when there are less fields to fill. Allowing for pre-filling for details such as email, name, IP detect country, phone code etc. could enable your user to subscribe quicker, make a purchase faster etc.

8. Display error messages next to the field: If an error is present when a user is done filling a form, ensure the error is highlighted next to the field. Failing to do so could leave the user frustrated trying to find the error.

9. Use smart tooltips / help text: Instead of hiding information like minimum character limit or purpose of the field, display it on/ above/ below the field input. It could help the user understand what it is that you’re expecting from him.

10. Use field length as an affordance: What this does is gives the user an idea of how long the number should be to avoid confusion.

Conclusion

We hope we were able to give you some guidelines to building forms. Remember, a user wants to get away with minimum effort to join / subscribe / sign up / purchase on a platform. Anything that minimizes his effort is a plus and a job well done from you!

Keeping this as the brief can help you design some A-class forms!

What are some best practices you use while creating forms? We’d love to hear it in the comments section below.

It's only fair to share...Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0Share on Tumblr0Digg thisPin on Pinterest0Email this to someoneShare on Yummly0Share on VKShare on StumbleUpon0Flattr the authorShare on Reddit0
Buffer this page