GET YOUR FREE QUOTE +65 6789 9852

How Not To Design Web Forms

how to design web forms

Web forms are at the heart of every design project, and web designers need to master how to design web forms. Forms are integral part of any site after taking center stage for more than 2 decades, many designers are still having trouble designing web forms that resonate with the users.

In this article, we look at the challenges facing web designers while designing web forms as well as how to design web forms.

Label Everything 

Most web designers feel like in-field labels improve appearance of the page. Unknown to them is that is is actually one of the common form design problems. While web forms are integral to web page, users deem them as the least aesthetically pleasing on-page design elements.

In-field labels pose a significant challenge not only to cognitively impaired people but for everyone. This is because most people fill the forms in autopilot and do not pay attention to what they are entering in the fields. It is therefore important to have in-field labels that remind the user what information they are supposed to enter. With that said, this does not mean that you should only stick to the standard form design practices.

how to design web forms

The solution here would be to have them magically despair when a user clicks on the field, or if you have time for it, you can add them above the fields. You could also make the labels remain persistent when the user starts to type in the details.

Removing the Option of Signing Via Social Media

Most users prefer a one-click sign in, and while most would be at pains handing out their social media credentials, it is a time saver. It might also not be a future friendly option, given that social media networks can close down, case in point, Vine, but it is more satisfying than having only one option.

For most users with a social media account, especially Facebook or Twitter, it feels as though they have the key to the entire internet. Besides, using social login takes out the hassle of filling out several fields. With that said, there is a multitude of reasons why you would opt out of using social media login, but designers looking to learn how to design web forms should make it easy on the users to use social login.

If you decide to use social logins, ensure to undertake the following

get google ranking ad

  • Give users an email login option, in case they are not comfortable giving out their social media credentials
  • Outline what the website will and not do when they get access to the users’ social media accounts such as making a post without their consent

Use Terms Such As “Invalid” In Error Messages

Terms such as invalid when used on error messages are a bad omen to the website’s user experience. This is because some users have special characters in their names and other details required in the web forms.

Using such terms is not only offensive, but it is also not helpful since it does not explain what a valid entry should look like. The goal when writing error messages is to be helpful and informative. Read more on the effects of terms such as invalid in error messages.

Asking the User for Their Username

User anonymity on the internet is now more negligible than ever, and asking for a user’s username is only allowed if you need a security layer between the users’ avatar and their identity. However, you should do away with this option if you do not have a major security concern.


For most people, it adds an unnecessary cognitive load, which increases the chances of the user clicking on the “Help me log in” icon. With that said there are some websites where it is necessary, but for most websites, it is not necessary.

Users carry a general feeling that you are trying to make their life harder than it already is, and so if you ask for a username, you should tell them why it is necessary that you need them to input their username.

how to design web forms

Hide All the Need-To-Know Information from the User

There is nothing worse than finishing filling out a web form only to be given details about how you need to create a username or password. It is frustrating since the information was not available when you started.

Most users feel that it is necessary that you outline the information of what needs to go to the fields, such as the users should avoid the use of spaces, special characters, and more. However, this is not only applicable to the login form design, but it applies to other parts of the website, and this will streamline their workflow and boost user experience.

Hide What the User Is Typing

This is a common phenomenon when a user is typing the details in the form fields; they display bullets instead of the actual character. This is used as a security protocol just in case someone is looking over the user’s shoulder.

However, most people log in to their online accounts in the comfort and privacy of their homes or offices, and it is not necessary that you should design the web form without allowing them to see what they are typing.

However, there is a new hack; you can give the user the option of viewing the information they are typing using the information reveal icon. This gives users the option of typing in the details blindly or making the information visible.

How to Improve Your Web Forms

Looking at the above points, the only thing you need to master when learning how to design web forms is to ensure that there is excellent communication. This includes

  • Making the in-field labels visible instead of vanishing when a user clicks the field
  • Avoid words such as invalid in error messages
  • Reveal the need-to-know information beforehand
  • Allow social and email sign in options


For anyone learning how to design web forms, you should be focused on communicating effectively with the user. On top of this, limit the questions to need-to-know information, and you will be designing web forms that improve user information in no time. Contact us for professional web design services in Singapore.


engaging the top social media agency in singapore

get brand consulting singapore

copywriting services contact singapore


More Posts