- Added on: v4.2.0 (14/09/18)
Login / register form
Use this single page form template to rapidly create a standard form page within your project.
Design and usage
Design
Desktop
- All content sits within the centre six columns (600px) and is left aligned.
- Spacing above section should be 80px.
Tablet
- All content sits within the centre six columns (526px) and is left aligned.
- Spacing above section should be 60px.
Mobile
- All content sits within the four columns (280px) and is left aligned.
- Spacing above section should be 60px.
All breakpoints
- Header has the Abeille Assurances logo centred on a #FFD900 background at 60px high.
- Page heading must be H1 regular (#5C596D).
- Section heading must be H2 semi-bold (#5C596D).
- Subtitle must be H3 light (#5C596D).
- Field labels must be H3 regular (#5C596D).
- Body copy (16px #444).
- Section titles should have a #ccc key line underneath spanning the 6 columns.
- Space above field label should be 15px.
- Forgotten password/username link is aligned right and sits in-line with the top of the field label.
- Vertical spacing adheres to new vertical spacing rules.
- Primary CTA button should only be used once; any other buttons should be secondary or tertiary buttons.
- Login link sits next to the page subtitle but retains its font size, weight and colour (16px bold #004FB6).
- Terms of use / Privacy policy copy and links always precede primary CTA.
- GDPR link copy always sits close to the top of the page (after the page title and subtitle).
- Contact us panel title should not have a key line under the title.
- Contact us panel content is all left aligned and can have a maximum of three phone numbers (essentially follows the same content rules as the current Contact us page element).
- Keyline can be used between sections when the content is light so that it doesn't look overly separated (2 sections only).
Errors
- Notification card errors follow existing rules.
Non-JS requirements and screen readers
- Follows standard form rules for Non-JS.
Placement
- All content on login/registration pages sits within the centre six columns on desktop and tablet and is full width on mobile with the content left aligned.
Interactive examples
Global login template
A static example is shown below, and a working example can be seen on the global login template page.
Confirmation page template
A static example is shown below, and a working example can be seen on the confirmation page template page.
Further information page template
A static example is shown below, and a working example can be seen on the further information page template page.
Code examples
Global login template
While the form can be created using standard elements, be sure to place the controls with the specific wrappers as shown below to ensure that spacing between them is correct; of particular note is the 'Remember me' standalone checkbox - this should immediately follow the username text input field within the same m-form-row__content div to ensure the specific padding required in that instance.
<div class="l-content-container">
<div class="l-section l-section--in">
<fieldset>
<legend>Log in</legend>
<div class="m-form-row u-margin--top-none">
<h1 class="a-heading a-heading--1 u-margin--top-none">Log In</h1>
</div> <div class="m-form-row m-form-row--has-explanatory-text-link">
<label class="a-label" for="text">Username</label>
<p class="m-form-row__explanatory-text-link" id="..."><a href="#example">Forgot username</a></p>
<div class="m-form-row__content">
<input type="text" id="text" class="a-textbox" aria-describedby="..." /> <label class="a-checkbox a-checkbox--standalone" for="checkbox-1k">
<input class="a-checkbox__input" type="checkbox" id="checkbox-1k" value="2" />
<span class="a-checkbox__label"><span class="a-checkbox__label-inner">Remember me</span></span>
<span class="a-checkbox__ui"></span>
</label>
</div>
</div> <div class="m-form-row m-form-row--has-explanatory-text-link">
<label class="a-label" for="password">Password</label>
<p class="m-form-row__explanatory-text-link" id="..."><a href="#example">Forgot password</a></p>
<div class="m-form-row__content">
<input type="password" id="password" class="a-textbox" autocomplete="off" aria-describedby="..." />
</div>
</div> <!-- Optional small print -->
<div class="m-form-row">
<small>...</small>
</div> <div class="m-form-row u-margin--bottom-none">
<button class="a-button a-button--primary" type="submit">Log in</button>
</div>
</fieldset>
</div> <div class="l-section l-section--in-out">
<div class="m-form-row u-margin--top-none">
<h2 class="a-heading a-heading--2 u-rule-bottom u-margin--top-none">Register for MyAviva</h2>
<hr class="a-divider-line a-divider-line--horizontal-solid" />
</div> <div class="m-form-row">
<h3 class="a-heading a-heading--3 a-heading--light">...</h3>
</div> <div class="m-form-row u-margin--bottom-none">
<p class="u-margin--bottom-none"><a class="a-button" href="...">Register</a></p>
</div>
</div>
</div>Confirmation page template
The main part of the page should use an l-max maximum width column with to ensure consistent horizontal spacing with the contact us panel below, and have nested m-form-row--full-width divs to ensure conpliance with vertical spacing rules.
The Contact us section can use the standard markup and rules from the Call us panel, with the only exception being the change in class for the main title from a-heading--1 to a-heading--2 a-heading--semimbold.
<div class="l-content-container">
<div class="l-section l-section--in-out">
<div class="l-max l-max--6-column-medium l-max--6-column-large">
<div class="m-form-row u-margin--top-none">
<h1 class="a-heading a-heading--1 u-margin--top-none">...</h1>
<p>...</p>
</div> <div class="m-form-row">
<h2 class="a-heading a-heading--2 a-heading--semibold u-rule-bottom u-margin--top-none">...</h2>
<p>...</p>
</div> <div class="m-form-row">
<hr class="a-divider-line a-divider-line--horizontal-solid" />
</div>
</div> <div class="o-call-us-panel o-call-us-panel--left o-call-us-panel--one l-max l-max--6-column-medium l-max--6-column-large u-margin--bottom-none" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
<h2 class="a-heading a-heading--2 o-call-us-panel__heading">Contact us</h2>
...
</div>
</div>
</div>Further information page template
This page could contain any number of different elemnents, so the below is a basic example fo how to set up a simple structure. Be sure to follow the spacing rules and div orders as indicted above to ensure your layouts meet requirements.
As with the confirmation page template, the Contact us section can use the standard markup and rules from the Call us panel, with the only exception being the change in class for the main title from a-heading--1 to a-heading--2 a-heading--semimbold.
<div class="l-content-container">
<div class="l-section l-section--in">
<fieldset>
<legend>...</legend>
<div class="m-form-row u-margin--top-none">
<h1 class="a-heading a-heading--1 u-margin--top-none">...</h1>
<p>...</p>
</div> <div class="m-form-row">
<label class="a-label" for="first_name">First name</label>
<div class="m-form-row__content">
<input type="text" id="first_name" class="a-textbox" />
</div>
</div> <div class="m-form-row">
<label class="a-label" for="last_name">Last name</label>
<div class="m-form-row__content">
<input type="text" id="last_name" class="a-textbox" />
</div>
</div> <div class="m-form-row m-form-row--has-explanatory-text">
<label class="a-label" for="postcode">Postcode</label>
<p class="m-form-row__explanatory-text" id="...">The postcode we hold for your policy</p>
<div class="m-form-row__content">
<input type="text" id="postcode" class="a-textbox a-textbox--7-character" aria-describedby="..." />
</div>
<p class="u-margin--top-none"><a class="a-button a-button--tertiary" href="#example"><span class="a-button__inner">I don't live in the UK or there is a problem with my postcode</span></a></p>
</div> <div class="m-form-row">
<small>...</small>
</div> <div class="m-form-row u-margin--bottom-none">
<button class="a-button a-button--primary" type="submit">Continue</button>
</div>
</fieldset>
</div> <div class="l-section l-section--in">
<div class="m-form-row u-margin--top-none">
<h2 class="a-heading a-heading--2 a-heading--semibold u-rule-bottom u-margin--top-none">...</h2>
<hr class="a-divider-line a-divider-line--horizontal-solid" />
</div> <div class="m-form-row">
<h3 class="a-heading a-heading--3 a-heading--light">...</h3>
</div> <div class="m-form-row u-margin--bottom-none">
<ul class="m-button-group u-margin--bottom-none">
<li class="m-button-group__item"><a class="a-button" href="...">...</a></li>
<li class="m-button-group__item"><a class="a-button" href="...">...</a></li>
</ul>
</div>
</div> <div class="l-section l-section--in-out">
<div class="o-call-us-panel o-call-us-panel--left o-call-us-panel--one l-max l-max--6-column-medium l-max--6-column-large u-margin--bottom-none" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
<h2 class="a-heading a-heading--2 o-call-us-panel__heading">Contact us</h2>
...
</div>
</div>
</div>Development and test
Notes for developers
The code example below shows how to set up the basic elements within the page. It is not prescriptive, as the form can contain additional sections / form elements if required, but care should be taken to stay as close to the suggestion as possible for the key Login section containing the username, password and button controls to ensure consistency of spacing.
Documentation for other helpful modules/organisms when setting up your form may include: