Build HTML Forms The Right Way β
The dos and don'ts of UX for HTML forms + some JS π
π§΅π
The dos and don'ts of UX for HTML forms + some JS π
π§΅π
1. Request as little as possible π
Entering more data than necessary is annoying and that's a fact.
If you really only need an email, consider not asking for first name, last name, and phone number.
Smaller forms == higher conversion rates.
Entering more data than necessary is annoying and that's a fact.
If you really only need an email, consider not asking for first name, last name, and phone number.
Smaller forms == higher conversion rates.
2. KISS = Keep It Simple S... π
By sticking to simple designs that use standard input types, you're creating a more cohesive experience, not only across your site but across the internet.
Users are less likely to get confused by some fancy & novel input. Stick to the classics.
By sticking to simple designs that use standard input types, you're creating a more cohesive experience, not only across your site but across the internet.
Users are less likely to get confused by some fancy & novel input. Stick to the classics.
3. Semantics Are Good for a11y & UX π
Choosing the right input types improves the experience on many levels: semantics, accessibility, & UX.
Folks are used to the way inputs work across the web, so we can take advantage of that by using the same inputs for the same things.
Choosing the right input types improves the experience on many levels: semantics, accessibility, & UX.
Folks are used to the way inputs work across the web, so we can take advantage of that by using the same inputs for the same things.
4. Put Country Selector Before City/State πΊ
If you're going to ask for a userβs country, put that before the city and state fields.
By putting the country first, you maintain the flow of the form, which is especially nice for users that use the keyboard to navigate.
If you're going to ask for a userβs country, put that before the city and state fields.
By putting the country first, you maintain the flow of the form, which is especially nice for users that use the keyboard to navigate.
5. Paginate Long Forms 1οΈβ£2οΈβ£3οΈβ£
Ideally, you shouldn't have too much data. However, in some cases, it cannot be helped.
It might make sense to paginate a form so that the information is not overwhelming. A good practice is to show the user some sort of UI about their progress.
Ideally, you shouldn't have too much data. However, in some cases, it cannot be helped.
It might make sense to paginate a form so that the information is not overwhelming. A good practice is to show the user some sort of UI about their progress.
6. General rule: Prevent Browser Refresh π₯΅
Have you ever been filling out a long-form & accidentally refreshed the page, losing all your work? Itβs the worst
The browser provides us with the "beforeunload" event. We can use it to inform the user they're about to lose any work.
Have you ever been filling out a long-form & accidentally refreshed the page, losing all your work? Itβs the worst
The browser provides us with the "beforeunload" event. We can use it to inform the user they're about to lose any work.
7. General rule: Store Unsaved Changes πΎ
Along the same lines as the previous point, there are times when we accidentally lose all our work on a long form. Fortunately, we can avoid causing this grief to our users by taking advantage of browser features like "sessionStorage".
Along the same lines as the previous point, there are times when we accidentally lose all our work on a long form. Fortunately, we can avoid causing this grief to our users by taking advantage of browser features like "sessionStorage".
8. Input Functionality: inputmode β¨
inputmode is an HTML input attribute that lets you tell the browser the input format. This may not be immediately clear, and if you are on your desktop computer then you wonβt notice it, but for mobile users, it makes a huge difference.
inputmode is an HTML input attribute that lets you tell the browser the input format. This may not be immediately clear, and if you are on your desktop computer then you wonβt notice it, but for mobile users, it makes a huge difference.
9. Input Functionality: autocomplete π
The autocomplete attribute is another built-in feature.
Many websites use forms to request info from users. A nice feature is the ability for users to save their own information so that it can be auto-completed across different forms.
The autocomplete attribute is another built-in feature.
Many websites use forms to request info from users. A nice feature is the ability for users to save their own information so that it can be auto-completed across different forms.
10. Input Functionality: autofocus π
The last built-in attribute Iβll mention is autofocus. By adding it to an input, the browser will place focus on an input, select, or text area (Chrome also supports using it on <button>, <a>, and elements with tabindex).
The last built-in attribute Iβll mention is autofocus. By adding it to an input, the browser will place focus on an input, select, or text area (Chrome also supports using it on <button>, <a>, and elements with tabindex).
11. Auto-expanding textarea β
A textarea that automatically expands to match the content in it is much appreciated!
That way you donβt have to deal with text areas that are huge, or those that are too small and need a scrollbar to get around.
A textarea that automatically expands to match the content in it is much appreciated!
That way you donβt have to deal with text areas that are huge, or those that are too small and need a scrollbar to get around.
12. Disable Scroll Event on Number Inputs π
If you're not familiar, there is a browser feature on number inputs that allows you to increment or decrement the value using a mouse wheel.
This can be a nice feature if you need to quickly change the value and do not want to type.
If you're not familiar, there is a browser feature on number inputs that allows you to increment or decrement the value using a mouse wheel.
This can be a nice feature if you need to quickly change the value and do not want to type.
13. Validation: Delay Validation to Blur or Submit Events β
With HTML5, itβs easy enough to add some client-side validation to your forms. You may decide to enhance it with some JavaScript as well, but when you choose to validate inputs matters.
With HTML5, itβs easy enough to add some client-side validation to your forms. You may decide to enhance it with some JavaScript as well, but when you choose to validate inputs matters.
14. Validation: Donβt Hide Validation Criteria π€
Clearly tell users upfront what makes an input valid or invalid.
By sharing that information, they already know that their π password needs to be 8 char long, contain upper & lowercase letters, & include special characters.
Clearly tell users upfront what makes an input valid or invalid.
By sharing that information, they already know that their π password needs to be 8 char long, contain upper & lowercase letters, & include special characters.
15. Validation: Send All Server Validation Errors Back at Onceπ
Another annoying experience-> having to resubmit the form multiple times.
It can happen b/s the server validates 1 field at a time & returns the errors immediately, or b/s an input has multiple validation criteria
Another annoying experience-> having to resubmit the form multiple times.
It can happen b/s the server validates 1 field at a time & returns the errors immediately, or b/s an input has multiple validation criteria
16. Submissions: Submit With JavaScript π»
Regardless of how you feel about the explosion of JS into every part of our lives, there is no denying that it's a useful tool to make UX better.
Rather than waiting for the browser to submit the form, use JS & avoid a page reload.
Regardless of how you feel about the explosion of JS into every part of our lives, there is no denying that it's a useful tool to make UX better.
Rather than waiting for the browser to submit the form, use JS & avoid a page reload.
17. Submissions: Including Status Indicators π©βπ»
This tip ties in very closely with the previous one. If we are going to be submitting forms with JavaScript, we need to be updating the user on the status of their submission.
This tip ties in very closely with the previous one. If we are going to be submitting forms with JavaScript, we need to be updating the user on the status of their submission.
18. Submissions: Scroll to Errors πΌ
In the event that your form does, itβs best to let the user know exactly what went wrong & where.
Especially on long scrolling pages...
JS can help us out here by searching for the 1st invalid input element in the form & focusing on it.
In the event that your form does, itβs best to let the user know exactly what went wrong & where.
Especially on long scrolling pages...
JS can help us out here by searching for the 1st invalid input element in the form & focusing on it.
Are you still here?! Wow, thanks! π€©π
You can find forms pretty much everywhere.
Observe what works and what doesn't, then, code accordingly. π
What tips would you add?
You can find forms pretty much everywhere.
Observe what works and what doesn't, then, code accordingly. π
What tips would you add?
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
