A Quick Guide: How to design a perfect Web Form

Wireframe of Web Form designs

A website’s goal is to share information about the business and most of these websites have one thing in common i.e a Web Form.

Ever wondered why we need a web form? A webform is one of the ways using which a customer can communicate with the company.

Few Tech giants had realized it long back and they are designing forms well, But startups, DIY Entrepreneurs, Young Designers & Front end devs of the industries are doing it wrong.

But not anymore! No matter who you are, These Hacks will make you a Master in Web Form designing.

1. Keep Only Important Input Fields

Before starting any form design make sure you get rid of all the optional form fields, Ask yourself what are important fields and what field can be skipped.

From UX perspective its the thumb rule not to show optional fields, Though if you have any optional fields clearly highlight it out. I believe optional field data can be collected later on from the user.

Here is an example of a Sign-Up form of an Indian E-commerce website Vs Amazon

Amazon and Flipkart's Sign up page - Web form
(Left) Flipkart sign up form | (Right) Amazon sign up form

Eg: An E-Commerce website asking for Mail id and mobile number while signing up. They can collect either mobile number or mail id and another one later on, Instead of collecting both while registration, As both the fields have the same purpose i.e communicating delivery details with users.

2. Auto collect data

Data plays a crucial role for companies, especially now with artificial intelligence and data science, Most of the companies are trying to get maximum data from the users.

It’s all cool if it’s done rightly else it’s a pain for the users. Like in a recent project I was working on the owners needed data like,
if the user is married or Single, their Age, honorific, Gender, Date of birth, and whatnot. The base trick I used here was linking the similar data and using basic JS logic to create answers for further data, Instead of making the user fill it manually.

Do-Don't for web form designing -  - Web form

Eg: User needs to provide their Date of birth and their age, So instead of asking for both the details we just keet the DOB field and on the basis of the current date we can calculate the user’s age. This same trick can be used in a number of situations like gender, honorific, married or single, and so on.

3. Conditional Logics

In the old days when we use to fill in forms on paper, We all use to get one or two irrelevant form fields. Questions like Martial status.

Conditional-Logic-Web-Form-Designing  - Web form

Now even if I tick on the single, the second field will be the date of marriage, which is completely irrelevant to me and as it’s on paper hence designer can’t really do much about it. But even online had seen such form designs too. We need to use conditional logic for such scenarios, where certain fields will be seen by the user only if they answer certain questions. Like in the above case date of marriage will be seen only to those users who click on Married.

4. Pre Defined Answers

Users often feel lazy to give feedback and especially if the user is an introvert. Instead of asking for brief feedback, we can have a bunch of pre-defined answers, and users can choose one and add on a comment if it feels to add.

User Reviews - Web form

5. Explain why you are asking for information

SPAM ALERT!!! that’s what comes to our mind when we see any website or application asking for our mail id or phone number. instead, if we explain to the users why this information is needed, Our users will understand and trust the brand.

6. Multi-Step form

A long-form with lots of fields will always demotivate a user and increase in bounce rate. A better way to tackle this problem is to create multiple steps, this will help users to fill data in chunks and pieces and a progress bar will motivate the user to finish the form.

From here on we are focused on accessibility. Forms with low accessibility create big trouble for people with low accessibility as a designer I feel it’s our responsibility to design accessible forms that can be used by everyone.

7. Don’t Use Placeholders as Labels

Forms without labels are not friendly, especially if there are a bunch of fields, people use placeholders as the label and once the user had clicked in the input field the label goes away, and whatever a person types in takes the place of the label. This creates a big problem when a user wants to validate things before hitting the send button but the user can’t validate things as labels are gone.

I understand labels take up place and make UI slightly cluttered but we can handle it smartly just like G-mail is doing.

Google-Sign-in-screen - Web form
Source: Gmail

8. Use placeholder as guiding text

Placeholders are crucial and can be used to guide users for Eg. A password placeholder can let the user know in advance that use ‘special characters and a combination of letters and numbers’ instead of just showing placeholder as ‘Password’ and show error on submitting the form and then showing up the requirement for a password.

Placeholder-design

9. Error message

Error message needs to be helpful so the user can understand and ignore mistakes further. There are sites that just show a red border around the input field to indicate there is an error in the field and this is the worst idea as a color-blind person will never be able to understand what’s the error. Always have an error message which tells the user what has gone wrong/what’s the requirement.

It’s better to show error messages only for the field in which error has occurred as that helps the user to re-enter data only in that particular field and ignore the right ones.

Note: In case of sensitive details it’s better not to disclose exactly which field is wrong.

Eg: in case of user name and password, instead of highlighting exactly which field is wrong you can show error message as ‘User Name or Password is wrong’ As log in data is sensitive and can be misused by hackers if they got to know which exact field is wrong.

10. On page validation

People often use server-side validation as it’s more secure and its a good practice, but using server-side as well as on-page validation with Java Script creates a better user experience as the user doesn’t need to submit and wait for the server’s response just to realize that few fields were having wrong input type. Java script will inform the user before form submission that an input filed data is wrong and the user can fix it before submitting the form This will save the user’s time.

11. Size of a field

Often people want the form to look ascetically perfect and to do that they will have the same size field for Age and Name Which looks way to spacious for filed like Age and often confuse users. An input field size should be as per the data that is going to be entered by the users.

Thank you for the read. I hope this article will help you with your next project. Let me know which hacks you use to design forms or what I had missed out here.

Are you a Content Creator? Here is a must-read article for you! Create Content like a Pro

I hope this article was help full to you.