Forms

Form

• Apply class="scc-form" to the <form> element.
• For Squiz Matrix forms, this is done via the Form Extra Attribute field on the Form Contents screen.

Rows

• Each form label and accompanying field should be placed in a <div> with the scc-form__row class.
• Use Boostrap rows and columns only when required to align fields next to one another.
• The scc-form__row class controls vertical spacing (margin) between rows/groups. It can appear within a Bootstrap column but should not be omitted.

Examples

An example of a form row that will span the full width of the parent container.

<div class="scc-form__row">
    <label class="scc-form__label" for="firstName">First name</label>
    <input class="scc-form__input" name="firstName" id="firstName" required="required" />
    <span class="scc-form__error-inline">...</span>
</div> 

An example of two form rows that are aligned side-by-side on certain viewports using the Bootstrap grid.

<div class="row">
    <div class="col-12 col-sm-6">
        <div class="scc-form__row">
            <label class="scc-form__label" for="firstName">First name</label>
            <input class="scc-form__input" name="firstName" id="firstName" required="required" />
            <span class="scc-form__error-inline">...</span>
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="scc-form__row">
            <label class="scc-form__label" for="lastName">Last name</label>
            <input class="scc-form__input" name="lastName" id="lastName" required="required" />
            <span class="scc-form__error-inline">...</span>
        </div>
    </div>
</div>

Elements

• Apply classes to all form controls/elements where possible, including the following. For Squiz Matrix forms, this is done via the Extras field on the Details screen of each individual question asset.
  • scc-form__input
  • scc-form__radio
  • scc-form__checkbox
  • scc-btn
• Apply a space and trailing slash to self-closing elements, eg. <input /> and <br /> .
• Labels should always appear before (above) the corresponding field, with the exception of radio buttons and checkboxes.
• Radio buttons and checkboxes:
  • Should be positioned before (to the left) of the corresponding label.
  • Should be wrapped in a <fieldset> with a corresponding <legend> .
  • Should always be aligned vertically.
  • All input elements in the collection should have the same name but a unique id.
• Textarea elements require a sensible width/height (expressed using the cols and rows attributes)
  for situations when CSS styles are disabled. In most cases cols="100" and rows="10" should suffice.

Examples

Text field

<div class="scc-form__row">
    <label class="scc-form__label" for="fullName">Name>/label>
    <input class="scc-form__input" name="fullName" id="fullName" required />
    <span class="scc-form__error-inline">Please enter your name.</span>
</div>

Telephone field

<div class="scc-form__row">
    <label class="scc-form__label" for="telephone">Telephone</label>
    <input class="scc-form__input" name="telephone" id="telephone" required />
    <span class="scc-form__error-inline">Please enter your telephone number.</span>
</div>

Email field

<div class="scc-form__row">
    <label class="scc-form__label" for="email">Email address</label>
    <input class="scc-form__input" name="email" id="email" required />
    <span class="scc-form__error-inline">Please enter a valid email address.</span>
</div>

Radio button

<div class="scc-form__row">
    <fieldset class="scc-form__fieldset">
        <legend class="scc-form__legend">Do you like cake?</legend>
        <ul>
            <li>
                <input class="scc-form__input--radio" name="cakes" id="yesToCake" required value="Yes" />
                <label for="yesToCake">Yes</label>
            </li>
            <li>
                <input class="scc-form__input--radio" name="cakes" id="noToCake" required value="No" />
                <label for="noToCake">No</label>
            </li>
        </ul>
        <span class="scc-form__error-inline">Please choose an option.</span>
    </fieldset>
</div> 

Checkbox

<div class="scc-form__row">
    <fieldset class="scc-form__fieldset">
        <legend class="scc-form__legend">What cakes do you like?</legend>
        <span class="scc-form__note">Tick all options that apply.</span>
        <ul>
            <li>
                <input class="scc-form__input--checkbox" name="cakes" id="carrotCake" required value="Carrot" />
                <label for="carrotCake">Carrot</label>
            </li>
            <li>
                <input class="scc-form__input--checkbox" name="cakes" id="chocolateCake" required value="Chocolate" />                  
                <label for="chocolateCake">Chocolate</label>
            </li>
        </ul>
        <span class="scc-form__error-inline">Please choose at least one option.</span>
     </fieldset>
</div>

Select field

<div class="row">
    <div class="col-12 col-md-6">
        <div class="scc-form__row">
            <label class="scc-form__label" for="cakes">What is your favourite cake?</legend>
            <select name="cakes" id="cakes">
                <option value="Carrot">Carrot</option>
                <option value="Chocolate">Chocolate</option>
            </select>
            <span class="scc-form__error-inline">Please choose an option.</span>
        </div>
    </div>
</div> 

Multiple-select field

<div class="row">
    <div class="col-12 col-md-6">
        <div class="scc-form__row">
            <label class="scc-form__label" for="cakes">Which cakes do you buy most often?</label>
            <span class="scc-form__note">Select all options that apply.</span>
            <select class="scc-form__select" id="cakes" multiple="multiple" name="cakes" required size="3">
                <option value="Carrot">Carrot</option>
                <option value="Chocolate">Chocolate</option>
                <option value="Coffee and walnut">Coffee and walnut</option>
                <option value="Lemmon drizzle">Lemmon drizzle</option>
                <option value="Red velvet">Red velvet</option>
            </select>
            <span class="scc-form__error-inline">Please choose at least one option.</span>
        </div>
    </div>
</div> 

Textarea

<div class="scc-form__row">
    <label class="scc-form__label" for="comments">Comments</label>
    <textarea class="scc-form__textarea" cols="100" id="comments" name="comments" required rows="10"></textarea>
    <span class="scc-form__error-inline"></span>
</div> 

Attributes

• Attributes should be arranged in alphabetical order for improved readability, for example:
  <input autocomplete="" class="" id="" name="" required value="" />
• Classes and IDs should be written using kebab-case or camelCase, unless a third-party system requires otherwise.

Autocomplete

To aid accessibility and usability, use an appropriate autocomplete attribute where possible.

Below are some common autocomplete values:

• Title, such as "Mr" or "Miss" etc: autocomplete="honorific-prefix"
• Full name: autocomplete="name"
• Surname or last name: autocomplete="family-name"
• First name: autocomplete="given-name"
• Email address: autocomplete="email"
• Telephone number, without country code: autocomplete="tel-national"
• House and street: autocomplete="address-line1"
• Locality (optional): autocomplete="address-line2"
• Postal town: autocomplete="address-level1"
• Postcode: autocomplete="postal-code"

Buttons

• If possible, use a <button> element rather than an <input> with the appropriate type attribute.
• Avoid using the name attribute on buttons (unless a third-party system requires otherwise).
• Use the word Submit as the text value, unless something else is more appropriate.
• Next and previous buttons should use the <button> element with the relevant class attributes, for example: class="scc-btn scc-btn--previous" or class="scc-btn scc-btn--forward" . Use the words Next or Previous as the text values.

Validation

• Use the appropriate type of email or tel for email and telephone fields.
• Use required for all fields that are mandatory.
• Do not use asterisks to visually denote mandatory fields. Instead, append (optional) to the end of the label or legend of any non-mandatory fields.

In this section

• Generic form (example)