Sign up

Best practices

  • Sign up forms should only include fields that are absolutely necessary.
  • If a longer form is necessary, consider breaking the process into steps.
  • Accompany forms with microcopy explaining the benefit(s) of signing up.
  • Investigate CAPTCHA alternatives.

Example

Sign up

Create an account to view and manage your utility usage.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. 


<h3>Sign up</h3>
<p>Create an account to view and manage your utility usage.</p>
<form>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="email">Email</label>
        <input id="email" type="email" class="form-control">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <div class="input-group">
          <input aria-describedby="passwordHelpBlock" id="passwordInput" type="password" class="form-control">
          <div class="input-group-append input-group-addon">
            <button id="passwordToggle" class="btn btn-outline-secondary" type="button"><i aria-label="Hide/show password" class="far fa-eye"></i></button>
          </div>
        </div>
        <small id="passwordHelpBlock" class="form-text text-muted">
          Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
        </small>
      </div>
      <div class="form-group mt-4">
        <input disabled class="btn btn-primary" type="submit" value="Sign up">
      </div>
    </div>
  </div>
</form>

Add the following JavaScript for the hide/show password functionality:

$("#passwordToggle").click(function(){
  $("#passwordToggle i").toggleClass('fa-eye fa-eye-slash')
  if($("#passwordInput").attr("type") == 'password'){
    $("#passwordInput").attr("type", "text");
  }else{
    $("#passwordInput").attr("type", "password");
  }
});