Forms

Applies to: T4 Site Manager
Last updated: 05/08/2015
Summary: How to create and style accessible forms.

Before you start

  • These instructions will add a basic web form to your web page.
  • The data input into your form will be sent in the body of an email to an email address of your choosing.
  • Some knowledge of HTML is required to add forms.

Adding and styling a form

To add a form:

1. Create the form

Copy and paste the HTML code from one of the three example forms and then amend the form's HTML to meet your needs.

For comprehensive instructions on the different elements used to build an accessible web form, read Creating Accessible Forms on webaim.org.

2. Set up data forwarding to an email address

Configure your form to forward the data to an email address.

3. Register the form

  1. Publish your form. It's recommended to keep your page hidden from your website navigation for the time being, until the form is activated.
  2. Navigate to your form web page, fill it in with sample input and click the 'submit' button.
  3. When prompted, enter the email address you want the form data to be sent to.

This information is forwarded to the Webmaster Team who will register the form and send a notification to the supplied email address once activated. The process will take a few days.

Note that if you change the URL of the page containing the form then it will need to be reregistered.


Notes on general styling

  • When adding a form don't add any styling code within the form to adjust the layout of the form elements.
  • The form examples already include the correct classes to style the form appropriately.

Notes on specific form elements

Form inputs

  • Do not alter the styling or sizing of form inputs.

Labels

  • Each form field should have an associated label.
  • Labels are aligned above each element, not to the side.
  • Labels should be kept as short as possible.
  • Do not use colons at the end of each label.

Form buttons

  • Form submit buttons should generally be labelled 'Submit' and can be coloured using the button classes. Do use 'reset' buttons.

Form explanatory notes

  • Notes can be added to expand on a label or to add examples of answers to a question.
  • The note text should be wrapped in a <span class="form-note"></span> and placed within the label.
  • Do not use form notes for explanations that are already implicit eg 'choose all applicable'.

Fieldsets

  • On longer or more complex forms, fieldsets can be used to group related form elements together.
  • If using a fieldset you must use an associated legend.

Fieldset styling

  • By default the styling is minimal, just some extra vertical spacing
  • Add class="fieldset-base" within the fieldset element to add top border
  • Add a stone background colour to a fieldset using class="bg-stone"
  • Groups of radio buttons or checkboxes should almost always be wrapped in a fieldset with the legend containing the text for the question.

Required/optional fields

  • This depends on the form, but as a guideline:
    • If most fields are required: indicate optional fields
    • If most fields are optional: indicate required fields
  • Do not mix the two flags on the same form. If you have a lot of optional fields then consider whether collecting this information is really necessary. Forms should be as short and painless as possible.
  • Do not use an asterisk, instead use the full word 'Optional' or 'Required' wrapped in <span class="form-op-req"></span>. This span should be within the label element, after the label text but before any note text.