General Guidelines

General form design guidelines

See example form

Make the path to completion clear

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

Make the form 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

Give feedback on interactions

  • Field validation should be inline (display errors next to the field)
  • Use a non-combative tone in error messages
  • Validate input in real time

A quick example of a common form

The form below is a generalised consisting of common form elements. Note that hint text is always visible in this example, but in actual usage should not be visible unless necessary.

This username is available

This email is invalid

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>