Rule #1 Make it short
When designing a form, think about how much data you actually need. I came across lots of whitepaper or PDF download forms that require unnecessary information, for instance, the company size, the seniority of my position as if I am filling out a job application form. A long form with unnecessary questions only makes people frustrated, especially when the answers require a specific format. Keeping your form short and simple, your visitors are more likely to complete it and hit the submit button. If more questions are necessary, try to use logic jump to shorten to form. Logic jump makes your form appear shorter by displaying additional questions only if the users answer a previous question in a certain way.
Rule #2 Make it smart
Inline validation is a smart feature that tells the visitors as soon as the online form fields are not completed or in the wrong format. This feature is so useful but surprisingly, not many websites has this in their codes. Most of the time, your users do not think like you do and they are not aware that they enter the wrong information. By telling the users the errors before hitting the call to action button can save your visitors’ time as they could correct the mistakes right away. Inline validation also helps you collect cleaner data so you don’t have to tidy it up because it is the wrong format. For instance, some people include “-” in their telephone number, some include “( )”, by telling the visitors the right format, it could make your life easier later on. Below example is Snapchat’s sign up form. The messages in red tell the visitors what are missing or wrong:
In addition to this, I like the fact that Snapchat skips the drop down boxes for “Day” and “Year” as for people like me, it’s not so nice to scroll all the way down to look for my year of birth. 🙂
Rule #3 Make it secure
Online forms, especially those involve sensitive information and online transaction require extra security to make sure the data transmission is secure. HTTPS, Hypertext Transfer Protocol Secure encrypts data sent between the visitors and your web servers and it is a must for many websites. Apart from HTTPS, you should also make sure your data storage is safe from any possible data leakage. By implementing secure data handling procedures, your visitors would feel more confident when visiting and using your website and service.
Rule #4 Make it social
Don’t underestimate the power of your online forms. You can easily show your brand personality by adding a little extra to the forms. Let’s look at the example on Typeform below:
Typeform ditched the traditional and boring support contact form (actually they are an application for creating awesome online forms) and replace it with a series of casual questions to make the whole form filling process more fun and less tedious. It feels like I am talking to a real person. I particularly like the second question for asking about my mood — it’s good to know how the customer is feeling when he or she bumps into a problem when using your product and service.
Rule #5 Make it speedy
If you have a contact page or other pages that contain an online form, make sure the pages load fast on both desktop and mobile. Your users literally would give you a few seconds for loading your page. To shorten the page load time, think about removing unnecessary decorative images and video, decorative means aesthetic elements that do not do anything with the conversion. They make your page look good but possibly drive people away because of the long page load time.
Rule #6 Make it sequential
Making your form sequential means making the fields in logical order. For instance, the address in Sweden should be in this order:
Street Name, House Number, Postal Code, City Name, Country.
I would feel a bit confused if a Swedish website doesn’t follow this order and most likely I would not trust this website.
Similarly, for an online store, the credit card payment form should follow the order of the info on a credit card, this makes filling in the payment form easier and faster:
Card Number, Expiry Date, Cardholder Name, CVV.
Short, Smart, Secure, Social, Speedy and Sequential are the 6S’s you should keep in mind when designing your online forms. The last thing you want to do is to make your form boring and confusing. An online form is not simply a digital copy of a paper form, it has more purposes than just collecting information. Designing it right, your visitors would have much better experience on your website.