Forms: 5 considerations and useful resources


4 min read

Posted by Brian Grogan on June 08, 2021

Forms: 5 considerations and useful resources

In this blog post, I would like to focus on forms best practice. I will provide five important considerations when designing forms and include useful references to explore each topic further.


Forms are an integral part of most websites. It is important to ensure that design, accessibility, and development patterns are all considered to provide users with an intuitive user experience. Please note, these are only general guidelines however there are different exceptions, constraints, and considerations for every project.

Useful resources:

1. Form Layout

Form layout is important to ensure forms are balanced and easy to scan. In general, medium sized forms should be vertically stacked with top aligned labels. This layout approach assists users to scan through forms, fill out sequentially and complete quickly.

  • Labels should be top aligned
  • Align labels and form controls left
  • One column layout - Avoid multi column layouts

2. Form clarity

Keep forms simple and clear by minimising the number of fields required. This reduces the effort for users to complete, improves clarity and prevents users from becoming frustrated from imparting sensitive or unnecessary information.

  • Minimise number of fields – Only include what is necessary
  • Group related fields
  • Clearly label required fields
  • Ensure users are clear what fields are optional
  • Make sure call to actions are highly contrasted

3. Labels, Help text and placeholder text

Labels and help text can reassure users or offer support for more complex form controls. Language is important, by being open and communicating in a clear language you show the users that you care.


  • Always display a field label
  • Ensure labels are concise, clear, and descriptive
  • Top left aligned labels are best for readability

Help text

  • Ensure Password guidelines are clear
  • If input is required in a specific format, communicate this in advance
  • Include help text when sensitive data is required to be open and transparent on usage

Placeholder text

  • Placeholder text should only be used only if it is necessary and helpful
  • Repeating the label text is unhelpful

4. Form validation

When users make mistakes in forms, communicate this clearly and allow them to easily find and correct the error.

  • Ensure validation is inline
  • Ensure warning / error messages clear and concise
  • Don’t make validation too strict

Useful resources:

5. Form accessibility

Form accessibility ensures forms are usable for all users. It is important to consider users who with cognitive disabilities and use assistive screen technology.

  • Forms should be logical and easy to use
  • Forms can be navigated via keyboard with clear focus states
  • Ensure all form controls have associated labels
  • Ensure design and contrast is clear
  • Do not rely on colour alone – provide text or icons to communicate to message to users whenever colour is used to convey a message

Useful resources:

Bonus – Form controls resources

Each type of form control has its own unique considerations and best practice. The following articles provide detailed guidelines and best practice in terms of usage. Thanks to vponamariov for putting together an excellent tweet; “How to design almost any UI element”.

Text fields


Radio buttons


Are you planning a website redevelopment? Get in touch to discuss your options.

About the Author

Brian Grogan
Brian Grogan

Brian is a senior UI and UX developer at Arekibo. He specialises in user experience design and frontend technologies.