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
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>