Log in & sign up

The Log in / Sign up pattern provides users with a predictable way of logging in or signing up when using a product from Energy Saving Trust.

Usage guidance

  • Using predictable and consistent language is important to avoid confusion.
  • We always say ‘Log in’ as a noun or ‘Login’ as a verb when referring to existing users accessing their account.
  • We always use the terms ‘Sign up’ as a noun or ‘Signup’ as a verb when directing new users to create an account. In certain instances we also use the term ‘Create an account’ but never ‘Register’.

Log in form example

example@gmail.com
example: est123

No account? Create an account

HTML
<div class="mb-4">
  <label for="email" class="form-label">Email address (required)</label>
  <div class="form-text">example@gmail.com</div>
  <input type="email" class="form-control" id="email" required>
</div>
<div class="mb-4">
  <label for="password" class="form-label">Password (required)</label>
  <div class="form-text">example: est123</div>
  <div class="password-input-wrapper">
    <input class="form-control" id="password-input" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="password-input-toggle" aria-controls="password-input" aria-label="Show password" aria-expanded="false">Show</button>
  </div>
</div>
<div class="form-check mb-4">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Remember me
  </label>
</div>
<div class="mb-4">
  <button type="button" class="btn btn-primary">Login</button>
</div>
<p>No account? <a href="#">Create an account</a></p>

Sign up form example

example@gmail.com
  • Must be at least 10 characters in length
  • Must contain both upper and lowercase characters

Have an account? Log in now

HTML
<div class="mb-4">
  <label for="name" class="form-label">Full name</label>
  <input type="text" class="form-control" id="name">
</div>
<div class="mb-4">
  <label for="email" class="form-label">Email address (required)</label>
  <div class="form-text">example@gmail.com</div>
  <input type="email" class="form-control" id="email" required>
</div>
<div class="mb-4">
  <label for="password" class="form-label">Password (required)</label>
  <div class="form-text strong">
    <ul>
      <li>Must be at least 10 characters in length</li>
      <li>Must contain both upper and lowercase characters</li>
    </ul>
  </div>
  <div class="password-input-wrapper">
    <input class="form-control" id="password" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="password-input-toggle" aria-controls="password" aria-label="Show password" aria-expanded="false">Show</button>
  </div>
</div>
<div class="form-check mb-4">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    By submitting this form you consent to Energy Saving Trust contacting you. You can opt-out from receiving these updates at any time. Please read our privacy policy for more information.
  </label>
</div>
<div class="mb-4">
  <button type="button" class="btn btn-primary">Create account</button>
</div>
<p>Have an account? <a href="#">Log in now</a></p>