Forms, without a doubt play an important role in our day to day activities. Whether you're trying to apply for a visa, or you're trying to sign up on an e-commerce platform to purchase an item.

As a developer, making sure these forms are usable should be a top priority. There are a lot of things to worry about already, no one wants to worry so much about filling a form.

In this article, I'd be listing some points I feel can improve the overall experience of filling forms.

Keep Validations Simple

While it can be tempting to add a lot of validations to your form fields, try to keep them as simple as possible. Don't make assumptions based on what you already know. For example, it's very common to find name fields that are restricted to only alphabets when there are names that have hyphen and apostrophe in them.

Another example is validating phone numbers to make sure it matches a certain format (xxx-xxxx-xxxx). Instead, give the users some level of freedom and allow formats like:

• 01234567892
• 012 3456 7892

You can then format the phone number in the background before sending it to the backend.

Show Error on Blur

A painful part about filling a form field is when you keep seeing errors as you type ("let me finish typing for God's sake"). Instead of showing errors immediately a user begins typing in an input field, consider waiting until the user is done typing and is about moving to the next field. Another option is to add a delay, say about 500ms after user has stopped typing before showing the error message.

Break Forms Into Steps

Seeing a very long form can be intimidating so it's usually better to split them into steps with some sort of progress indicator. This way, users are more likely complete the form.

Don't Just Disable The Submit Button

A very popular practice is to disable the submit button whenever all validations have not been met. This works, but can be made better but allowing the users click the submit button, then if there are any invalid fields, scroll to that field and show the corresponding error message. This has a better user experience and is also more secure. Just adding the disabled attribute means the user and toggle the attribute from the devtools and be able to submit the button regardless

Use Either Confirm Password Or Toggle Password Visibility

If you have a password field with the options to toggle visibility, then there's no much need to have a confirm password field. Why do I have to confirm password when I can already see the password I entered?
One way to implement this is to check if the password is visible, if yes, then hide the confirm password field, otherwise, show it.

Avoid Clear or Reset Button

While this might seem like a handy feature, it can become painful when a user has filled a long form and is about to click submit, but mistakenly clicked the clear button

Use Appropriate Input Type

This allows the device to show the corresponding keyboard for a particular input. Like showing an @ for en email type, or a number pad for a type tel