Main menu
Staff & students

Pattern Library

We have identified a few patterns associated with forms. The full interaction cycle is considered as well, including successful form submission and submission of form with errors for users’ amendment.

Primary page content

The next interaction pattern includes all elements that can be used when users are required to fill in a form to access a particular service. The form is therefore grouped within the category of prompts to action (CTAs) which makes use of the dynamic insets and, in the same way, it is accompanied by a specific icon with yellow accent.

Particular form elements are included and can be used as needed, ranging from standard input fields to checkboxes, from radio buttons to text areas. Error messages are also considered.

Below we can see cases where a form also includes a data protection statement which is to be accompanied by the information icon, to differentiate it from user input areas.

The full cycle of interaction includes the feedback message of successful completion (grouped as information), and an inset for prompt to action with error summary for users’ amendment at the start of the form, also visible below.

Book a disability adviser appointment

Required information (*)
Error: You need to give your name
Error: You need to give your full date of birth
* Date of birth
Error: You need to provide a valid email
Error: You need to provide a valid web address
Error: Pick one of the options
* Choose your radio button option
With a line of help
Error: You need to provide your address
* Address
Do not include personal or financial information, like your National Insurance number or credit card details.
Error: Choose at least one of the options
* Reason for visit:
Select all options that apply.
Error: Choose at least one time slot
* Availability
Select all options that you could attend.
9am 10am 11am 12pm 2pm 3pm
Monday
Tuesday
Wednesday
Thursday
Friday

Data protection and confidentiality
We will store and use the information you send in order to provide our service to you. Read our Data Protection and Confidentiality Statement to understand how we will use what you send us.

The full user experience cycle of interaction through forms can include cases where users’ input is incomplete or needs amending. For these situations there’s an inset to prompt users to action indicating errors with summary of problem. This inset is displayed after users click to submit form.

There is a problem with your application. Please amend the following entries, correcting the errors below:

Entry field Error summary
Full name Enter your full name.
Student number The number of digits is incorrect. Please amend.

Book a disability adviser appointment

Required information (*)
Error: You need to give your name
Error: You need to give your full date of birth
* Date of birth
Error: You need to provide a valid email
Error: You need to provide a valid web address
Error: Pick one of the options
* Choose your radio button option
With a line of help
Error: You need to provide your address
* Address
Do not include personal or financial information, like your National Insurance number or credit card details.
Error: Choose at least one of the options
* Reason for visit:
Select all options that apply.
Error: Choose at least one time slot
* Availability
Select all options that you could attend.
9am 10am 11am 12pm 2pm 3pm
Monday
Tuesday
Wednesday
Thursday
Friday

Data protection and confidentiality
We will store and use the information you send in order to provide our service to you. Read our Data Protection and Confidentiality Statement to understand how we will use what you send us.