Guidelines for UX of Forms on the Web

1. Use well-tested standard web controls. Forms are not the place to get creative. Standard and boring controls are accessible to keyboard navigation and screen readers, are easy to navigate and have all the tiny little interaction details that the user expects, right there built-in and for free.

2. Break the form in steps. No one likes being greeted by a huge amount of fields to fill out. In each step, show as few controls as possible to complete that part. Use the information gathered along the way to omit irrelevant fields and steps. If there are more than a few steps, provide some preview at the top of the whole process and highlight in which process the user is in.

3. Provide an extra confirmation step for irreversible actions, such as permanent deletion, any large effect or possibly unexpected large side effect (for example, emailing thousands of users, sharing something publicly, and so on). That allows the user to take a few seconds more to consider that action, which cuts down on unintended actions which effects one may that have to deal with later.

Client-side JavaScript

4. Provide responsive client-side field validation. It's much better to be informed about an issue right after filling in the field than to having to to click “submit” and going back solving a list of errors.

5. That being said, only validate the field after the user is done with it. There's no use in telling the user they are wrong when they aren't even finished yet.

6. Don't change the value of fields below the user's feet! There's few things as frustrating as losing one's piece of one's work without warning.

7. Sprinkle in JavaScript for suggesting completions, validating field values, but also make sure the form still will work without those niceties. Make sure those enhancements don't disrupt how the focus flows from one element to the next while using “tab”. Make sure the active element's focus isn't taken away and changed unexpectedly below the user's feet.

Handling the submission

8. On form submission, provide on the page a visual feedback that the request is being processed, such as graying out the page and throwing in a spinner. Users don't expect the browser's page loading indicator to be their only feedback anymore, and they might think there's some issue submitting the form.

9. On that note, provide a successful submission page or message once the form is verified to be ingested. This ensures users they are done with the form and have achieved their goal. Also provide a submission number or any piece of information as a reference in case they need to contact you (or the support staff) regarding that particular submission later.

10. Consider not having a submission button at all. For example, for forms regarding preferences or settings, make it so that each value changed sends a request to immediately store the new value. Modern user expectations are more in line with “auto-saving” than “paranoid ctrl+s”.

11. Last, but not least, make sure an unsuccessful submission doesn't wipe out the whole form or even any of the fields.

Leveraging the browser

12. Check web standards for naming common fields, such as email addresses, phone numbers, mailing addresses, since this allows your form to leverage the browser's auto-complete.

13. There's an API for requesting the browser to confirm that the user intends to exit the page without saving the current changes. Use it.