Form structure

Forms should have a natural flow and feel like a conversation between the site and the user.

A form consists of most of the following features. Using these features across all forms helps create a structure and language that users identify with.

Heading

Easy to understand title of the form.

Introduction text

Helps the user know they are in the right place. A brief description of what the purpose of the form is, with links to any guidance.

forms_header example
Consider that users could land in the wrong place. Help them get to the right place by linking in text before they spend any time filling in the form.

Progress

Helps the user know how much they have still to do and encourages them to finish. For long forms users should have the option to save at any stage and pick it up later. If steps within the form can be skipped then “steps # of #” should be changed to “part # of #”.

Supporting text

Indicate to the user which fields need to be filled in.

forms_support_text example
Reduce the number of avoidable errors by clearly telling users what the from expects of them.

Error playback

If there is an error, after a submission or on next step there should be a bulleted list of errors indicating the field(s) with the issue. The help on how to fix it should be in plain English and each list item (in the playback box) should link to the affected field. The field validation text should be displayed directly below the field as well as any extra error messages. https://www.nngroup.com/articles/error-message-guidelines/

forms_error_playback example
The Playback box is triggered after the user tries to submit or progress to next step when there are fields in error state.

Elements

The fields of the form should be ordered in a logical and structured manner making it easier for the user to fill out the form.

forms_elements example
Where fields are of a similar nature it makes sense to order a mandatory field before an optional field.

Forward and backward buttons/pagination

On multipage forms the user should always be able to navigate forward and back without losing their answers. The only thing that should stop a user progressing is an invalid input.

forms_next_btn example
Buttons are aligned left: ‘Previous’ left; ‘Next’ right.

When entering personal details, it is important that users know what is going to happen with that data and that they are given the opportunity to consent to this use. Users will not be able to submit without consent. For long consent statements an accordion can be used to hide and show content.

forms_consent example
Ensure the hit area of the checkbox is large enough across all devices.

Captcha

Robotic submission is a problem with any forms. It is important to reduce these submissions as much as possible. The Captcha plugin is used to ensure that submissions are human, by using visual or audio challenges to test their humanity. https://www.google.com/recaptcha/intro/index.html

forms_captcha example
Example of new Captcha plugin which is based on picture recognition.

Submit

There should be a button that finalises and submits the user input. When submitting, there should be a spinner to show that there is an action, followed by a success page, failure page or playback error message.

forms_submit example
Users will pause before pressing this button. They will read the text. And after pressing they will want to know that something is happening.