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.

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>