Ready
Forms
Forms are a groups of related input controls that allow users to provide data or configure options.
Best Practices
Keep it simple
The fewer fields you ask users to fill out, the more likely they are to complete the form. Only ask for the information you absolutely need. ⁴
Use a single-column layout
Single column layouts are easier to read and navigate, especially in more narrow content areas.⁴ Fields that may be perceived as two parts of one piece of data can aligned horizontally. For example, first and last name or address and unit number.
Do
Don't
Group Related inputs
Inputs that request similar type of information should be grouped together. For example: Contact information fields such as email and phone number should be grouped together.⁴
Do
Don't
Use a clear call to action
Tell the user what they need to do next, such as "Submit" or "Click here to continue." ¹
Do
Don't
Avoid Disabled Buttons
Avoid using disabled buttons when the user has not entered required information. This can make it difficult for users to identify what fields they have missed. Instead, leave the button active and use it to trigger error messages on the relevant fields.³
Step Progress Bar
Complex forms should be broken into in to multiple steps using a Step Progress Bar. ³
Do
More
Related Pages
Additional Reading
Form UX: How to Design a User-Friendly Form https://blog.hubspot.com/marketing/form-ux
Designing More Efficient Forms: Structure, Inputs, Labels and Actions https://uxplanet.org/designing-more-efficient-forms-structure-inputs-labels-and-actions-e3a47007114f
Form UI Design https://designlab.com/blog/form-ui-design-best-practices/
Website Forms Usability: Top 10 Recommendations https://www.nngroup.com/articles/web-form-design/