Last updated:
24 June 2024

Messages

Find out how to use messages on forms.

Error messages

If the user submits a form with missing inputs that are mandatory, display a summary of errors at the top of the form page. Point the users to where the error is actually happening, and double the visual language at the point where the errors occurred, by turning the title red, bolding it and inserting a line of text directly below the input field that tells you how to resolve the error. This will let people quickly find an error without having to rely on a single bit of colour coding.

Give people a way to resolve the error/s by providing actionable remedies that allow them either to get out of  that state or fix the problem.

Progress indicators

For transaction based forms with multiple steps, consider removing distracting user interface elements and focus only on presenting those that are required for task completion. Further assist the user by grouping fields into logical groups. For example, as is often seen during the checkout process on e-commerce forms.

Set your users expectations

Will your user need to set aside 5, 10 or 15 minutes to complete the form? Tell your user how long it will take them and if they need to gather key information before they start to fill in the form.

Indicating if the form is secure

User have been educated to look for a padlock symbol when sending sensitive information through a website, so ask yourself whether your users will be comfortable providing the information you've requested. Consider highlighting how secure the web service is.

Mind your manners

Make sure your users are redirected to a different page after submitting a form. This is a helpful way of acknowledging receipt of the form, putting your user at ease. It is also a perfect opportunity to  inform your user how long they can expect to wait before they will receive a reply (if applicable) and a great way to encourage the user to continue exploring your website.