Forgot your password

Best practices

  • Always include a secondary escape hatch alongside the ‘Forgot password’ email input field. This could include contact information or other next steps should the user be unable to use the form.
  • Provide clear and assistive feedback immediately if an email address isn’t recognized and what to do if a recovery email isn’t received within a predetermined time period.
  • Provide copy at each step that tells the user what to expect next. E.g ‘Enter the email address associated with this account and we’ll send you a link to reset your password.’
  • Ensure the password reset fields are accompanied by password requirements and the option for users to see their password as they enter it. If possible, use a dynamic password checker and feedback tool to provide immediate feedback as password requirements are met.

Password reset process

Remembering and entering a correct password can be a challenge for users of all abilities. Password reset processes typically consist of the following steps:

  • Selecting a clear ‘Forgot password’ link in close proximity to the login form.
  • Entering an email address in a text input field.
  • Receiving an email with a link leading to a password reset form.
  • Entering a new password in the password reset form.
  • Authenticating using the new password.

Example

Forgot your password?

Enter your email below and instructions to reset your password will be emailed to you.

Contact us for help with your email/username or password.

 


<h3>Forgot your password?</h3>
<p>Enter your email below and instructions to reset your password will be emailed to you.</p>
<form>
  <label for="email">Email</label>
  <div class="form-row">
    <div class="col-md-5">
      <div class="form-group">
        <input aria-describedby="helpBlock" type="email" class="form-control" id="email">
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <input disabled type="submit" class="btn btn-primary" value="Reset my password">
      </div>
    </div>
    <small id="helpBlock" class="form-text text-muted">
      <p><a href="#">Contact us</a> for help with your email/username or password.</p>
    </small>
  </div>
</form>