General Guidelines

Guidelines for Form Design

Click here to see a good example of form design

1) The path to completion should be clear

Avoid multiple columns
Left align labels and fields
Use wizards to break long forms
Indicate completion progress and if possible, allow users to save progress
Make primary and secondary call-to-action buttons distinct and obvious
Call-to-action labels should be short and clear

2) The form should be easy to understand

Choose field types appropriately - this reduces confusion and makes data collected easier to process
Group related fields
Label fields as optional instead of compulsory
- Avoid using asterisks to mark compulsory fields
Do not use placeholders to replace labels
Use autocomplete

3) Feedback on interaction should be given

Field validation should be inline (Display errors next to the field)
Avoid using aggressive tone in error messages
Validate inputs in real-time

A good example of Form Design

This is an interactive demo for you to experiment with some general form elements.

Note: The hint text here is made visible intentionally for the purpose of demonstration. It should not be visible in actual usage, unless necessary.

Name

Username

This username is available

This email is invalid

Subject

Code

    
<div class="row">
  <div class="col is-8">
    <form>
      <div class="field">
        <label class="label" for="name">Name</label>
        <div class="control">
          <input class="input" type="text" id="name" />
        </div>
      </div>
      <div class="field">
        <label class="label" for="username">Username</label>
        <div class="control">
          <input
            class="input is-success"
            type="text"
            value="Username"
            id="username"
          />
        </div>
        <p class="help is-success">This username is available</p>
      </div>
      <div class="field">
        <label class="label" for="email">Email</label>
        <div class="control">
          <input
            class="input is-danger"
            type="email"
            placeholder="Email input"
            value="hello@example.com"
            id="email"
          />
        </div>
        <p class="help is-danger">This email is invalid</p>
      </div>
      <div class="field">
        <label class="label" for="select-example">Subject</label>
        <div class="control">
          <div class="select" id="select-example">
            <select>
              <option>Select dropdown</option>
              <option>With options</option>
            </select>
          </div>
        </div>
      </div>
      <label class="label">Category</label>
      <div class="field has-addons">
        <div class="control">
          <input class="input" type="text" />
        </div>
        <div class="control">
          <a class="sgds-button is-info">
            Search
          </a>
        </div>
      </div>
      <div class="field">
        <label class="label" for="message">Message</label>
        <div class="control">
          <textarea
            class="textarea"
            placeholder="Textarea"
            id="message"
          ></textarea>
        </div>
      </div>
      <div class="field">
        <div class="control">
          <label class="checkbox">
            <input type="checkbox" />
            I agree to the <a href="#">terms and conditions</a>
          </label>
        </div>
      </div>
      <div class="field">
        <div class="control">
          <label class="radio">
            <input type="radio" name="question" />
            Yes
          </label>
          <label class="radio">
            <input type="radio" name="question" />
            No
          </label>
        </div>
      </div>
      <div class="field is-grouped">
        <div class="control">
          <button class="sgds-button is-link">Submit</button>
        </div>
        <div class="control">
          <button class="sgds-button is-text">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</div>