T05. Online form template
Release notes
Date | Update | Updated by |
---|---|---|
13 Jan 2021 | Template finalised | @Steven Mao (Unlicensed) @Japneet Kaur (Deactivated) |
Overview
The online form is a reusable template that enables a user to fill out a single-page form and submit it to Legal Aid.
This page provides some guidance on how a form can be built and designed on the website. See P05. Forms (Complaint form) as an example the online form in action.
Application:
This template can be applied to existing forms such as:
Request a talk: https://www.legalaid.nsw.gov.au/what-we-do/workshops/request-a-talk
Complaint form: see P05. Forms (Complaint form)
Guidelines for creating a new form
Our principles
What fields can a form include?
Short text boxes - used for fields like name or phone number
Long text boxes - used for fields like users typing a description
Dropdown - users select from a list of predefined options (only one can be selected with the other selections hidden)
Radio buttons - users select from a multiple choice list (only one can be selected) All options are shown. Denoted by a circle.
Checkboxes - users can select multiple options from a multiple choice list. Denoted by a square box.
Date picker - users can select a date from a calendar
Verification - users verify they are not a bot
Tips for creating a great forms experience
Progressive reveal: if a question relies on the user selecting a certain answer, wait for the user to select it before showing the question. This will reduce the perceived length of the form and make it less overwhelming for users.
Remove ambiguity: remove any ambiguity around what the question is asking the user. If required, find a simpler term, always use the simpler explanation or provide additional context around it. You can sense check questions using this language checker: Hemingway Editor to improve readability scores.
Business rules
Note: the following business rules can be applied to all online forms
BR-# | Business rules |
---|---|
BR-1 | Online forms are content authorable with flexibility to add/remove/modify fields. |
BR-2 | User inputted data on the form will be captured in the CMS once they click ‘Submit’ |
BR-3 | The forms solution should integrate with APIs and backend systems where appropriate. |
BR-4 | On selection of the "Submit" button (successful):
|
BR-5 | On selection of the "Submit" button (unsuccessful):
|
BR-6 | Validation of the form occurs on submission of the form. |
BR-7 | Once the user submits a form, the CCMS (Customer Contact Management System) should capture customer data such as name, mobile, email address etc. |
BR-8 | The call to action (CTA) label of the ‘submit’ button is configurable. |
BR-9 | The API endpoint for data submission should be configured as required. |
BR-10 | The template should also contain a recaptcha/captcha component (if required). |
BR-11 | For fields on the form that are optional an (Optional) label will appear underneath the field. All fields will be presumed to be mandatory unless this optional label is displayed. |
Designs