“Form” Component

Design: zeplin.

Form elements are ubiquitous and used throughout the site, from member profiles to conversation threads and course quizzes. Good, consistent form design based on accessibility and usability principles help ensure pleasant form-filling experiences.

Less is More

For forms, less is better. Reduce or eliminate unneeded forms, because more form fields will reduce the completion rate.

• Remove as many optional fields as possible.
• Mark all optional fields by adding “(optional)” at the end of the field label. This also makes it clear to the designer when a form has too many optional fields.
• Always explain why we ask for sensitive information, such as a person’s phone number or address.

Facilitate Data Input

In most cases, data input is a chore. Help users by making it a faster and easier process.

• Show hint text within a field for potentially confusing or complex fields.
• Don’t show hint text for simple fields—e.g. name—because it may come across as condescending.
• Use geo-location or postcode lookup services to help fill in addresses.
• Whenever possible, don’t split a field up. For instance, ask for “Full name” rather than “First name” and “Last name”.
• Include the proper input type markup so that the right mobile keyboard is shown.
• Don’t show a “Clear field” or “Cancel” button on a form because it will reset all fields. The user can close the window or go to the previous page if they want to abandon the form.
• On password fields, allow users to toggle the visibility of the password they enter.

Errors

• Whenever possible, use frontend form validation. This allows timely error messages to be shown as the user is filling a form up, rather than after the form is submitted.
• Trigger frontend validation only 700ms after a user has stopped typing, or after the user moves to another field. This
• prevents overzealous error messages from appearing as the user is typing.
• Use backend form validation as a last resort, when frontend validation is not possible or feasible.
• Show error messages at the field with the error.
• Error messages should sound human. They should be clear and jargon-free.
• Never blame the user for an error.

<x-text-field
    id="some-input"
    name="some-input"
    label="Field label"
    helpText="Help text"
    defaultErrorText="Please enter field."
    required
    placeholder="Hint text"/>

<x-forms.passwordField
    name="password"
    label="Field label"
    helpText="At least 8 characters"
    defaultErrorText="Please enter field."
    required/>

<div>
    <input type="checkbox" id="check_1" name="check_1" value="on" checked/>
    <label for="check_1">Check Option</label>
</div>

<div class="error">
    <input type="checkbox" id="check_2" name="check_2" value="on"/>
    <label for="check_2">Check Option</label>
    <span class="error">Error text</span>
</div>

<div>
    <input type="radio" value="3" id="radio_1" name="age" checked>
    <label for="radio_1">Default radio</label>
</div>

<div class="error">
    <input type="radio" value="5" id="radio_2" name="age">
    <label for="radio_2">Invalid radio</label>
    <span class="error">Error text</span>
</div>

<x-select
    label="Select" helpText="Help text" name="learning_path"
    defaultErrorText="Please enter field." class="error">
    <option hidden>Get a learning path…</option>
    <option value="ux_designer">UX Designer</option>
    <option value="front_end_developer">Front-End Developer</option>
</x-select>

// Large select
<x-select
    label="Select" helpText="Help text" name="learning_path"
    defaultErrorText="Please enter field." class="select--large">
    <option hidden>Get a learning path…</option>
    <option value="ux_designer">UX Designer</option>
    <option value="front_end_developer">Front-End Developer</option>
</x-select>

<div class="inputGroup">
    <input type="text" id="name" name="name" required maxlength="70" placeholder="Member’s name">
    <div class="inputGroup__addon inputGroup__addon--noBorder">
        <button type="button" class="button button--primary">
            <x-svg-icon name="chevron-right-bold" size="medium"/>
        </button>
    </div>
</div>