How to indicate formatting or input requirements in your form

It's important we let people know if there are any formatting or input requirements for fields in your form. Helping people identify and meet these requirements is a great way to prevent them from making an error. It will also improve the user experience on your form. There are a few ways you can accomplish this.

Indicating formatting and input requirements on web forms

Use hint text

The main way to indicate there's a formatting or input requirement on a web form is to use hint text. Hint text helps people understand what you need from them. Use hint text for the following.

• To explain formatting requirements. For example, if the person has to add a date or their Social Insurance Number in a specific format, you can show them an example of the format.
• To give people context they might need to determine what information to add to a field. For example, maybe you have asked for their business name. You can use hint text to define what you mean by business name. For example, "This is the name your business is comomly known by. This is not your legal business name."

UX rules for applying hint text to web forms

• Hint text should always be visible. Do not use placeholder text in form fields. As soon as a person starts typing, the placeholder text disappears. If the person makes a mistake and has to go back or if they will not be able to refer to it. 
• Hint text should sit above a form field.
• Ensure hint text can be read correctly by screen readers.

Apply input masks

You can also apply input masks to automatically format text as people enter it. This makes it easier for people to:

• focus on the information they're inputting and less on the formatting; 
• spot any entry errors they may have made; and
• fill out the form. 

Indicating formatting and input requirements on PDF forms

The forms designer will advise on this, but generally speaking, hint text is either:

• greyed out and appears in the background of the form field; or
• it will be added in brackets at the end of the form field label.