Title
- Meaningful title and description who form is for
- If need to use link text/ alert info then use Advanced html rather than Basic html
- Name of form needs to be Heading 2
- Any further html headings used in the form must be H3 or lower.
Customer contact details
- “Name”/ “First name”/ “Last name”- text field
- “Email”- text field
- “Contact number”- text field, min and max digits 11, error message “Enter you contact number. It must be 11 digits long”
Customer personal details
- “Date of birth”- text field with description text “dd/mm/yyyy”
- “NHS number”- text field, minimum and maximum digits set at 10, description text “10 digit number that can be found on a letter or prescription from your GP”
- “National Insurance number”- text field, description text “9 digits long. For example, AB123456C.”
- “Religion”- select field, include UK Civil Service standard
- “Ethnicity”- select field, include options from UK Civil Service standard, ask the service what most popular are so these can be prioritised on the list.
- “First language”- select field, ask the service what most popular languages are so these can be prioritised on the list.
*Must have legal basis to be asking for and storing this information
Radios
To be used when a customer needs to select 1 option.
Checklists
To be used when a customer needs to select more than 1 option.
Check box
To be used when customer must check a box to confirm something.
Select (drop downs)
Only to be used when there are more than 8 options for a customer to review. If it is less than 8 then Radio or Checklist field should be used instead. This is because select drop downs are not fully accessible when using a key pad. Ideally we would not use them at all, but if a list is longer than 8 (such as religion/ ethnicity) then over-all usability means it should be a drop down. It should also be very rare that questions like religion and ethnicity are asked for.
Description text
To be used on a field to show an example of the answer required or information to help the customer complete the task.
Placeholder text
Avoid as adds to cognitive load on customer (having to remember what the placeholder text was as it disappears when they start typing).
Text field vs text area
Text fields are for one to three word answers or numbers. Anything longer like a description or explanation should be a text area so that the customer can read what they’ve written as they type.
Adding logic (hide/make fields visible)
If a customer doesn’t need to complete questions on a form unless they meet certain criteria, then we shouldn’t show them these questions until they’ve indicated they meet these.
Adding pages
If your form asks more than 10 questions it might be worth considering breaking it into separate pages. On a case by case basis you’ll need to review if one page or multiple is too overwhelming. All questions asked must be vital as adding additional questions prevents task completion on the customer’s end.
Error messages
e.g. “This field is required”
An error message appears when a customer tries to submit an incomplete or wrong field.
Some fields will have specific error messages (like contact number- “Enter you contact number. It must be 11 digits long”)
For generic required fields error messages should be “Enter your ((name of field))”
e.g. Enter your name
Enter your date of birth
Enter your post code
File uploads
If one file set to 5 MB maximum. If 2/3 set to 10 MB maximum
Why 5MB? Allows customer to take a photo there and then of fly tip rather than taking a photo, screenshotting to reduce size then uploading.
GDPR statement
This should sit above submit button:
By clicking the submit button, you agree to the information you provide on this form being processed in line with our data protection policy.
Captcha
This needs to be added above GDPR statement
Confirmation message
Thank you
We’ve received your ((application/report)).
Let the customer know what happens next, how many days until they’ll hear back or if they won’t hear back at all.
Email handlers
The email to the customer should include the information in the confirmation message, it acts as a email receipt.