Energy Saving Trust logo Design System

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

Open this example in new tab
example@gmail.com
example: est123

Forgotten password?

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>
  <p><a href="#">Forgotten password?</a></p>
</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

Open this example in new tab
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>