- Added on: v4.2.0 (14/09/18)
Single page form
Use this template to rapidly create a standard form within your project.
Design and usage
Structure
Desktop
- All content sits within the first six columns and is left aligned.
- If a right-hand sidebar is used, it sits in the last 4 columns and is horizontally aligned with the content that sits underneath the page header on the left.
- If a right-hand sidebar is used, Call us panel content should all be left aligned, but otherwise follows the same rules as the standard Call us panel organism.
- If a right-hand sidebar is not used, an 8-column max-width container should be used to restrict the content; follow standard form width rules within that max-width container.
- Spacing above section header should be 80px.
- Unless there is only one form input, the spacing above final button / button group should be 60px; the exception is on login/register pages, where the spacing should be the standard 30px.
- Page end (before footer) should be 60px
Tablet
- All content is left aligned and follows standard form rules.
- If a right-hand sidebar is used, it stacks beneath the main content, separated from that by a keyline.
- Spacing above section header should be 60px.
- Unless there is only one form input, the spacing above final button / button group should be 60px; the exception is on login/register pages, where the spacing should be the standard 30px.
- Page end (before footer) should be 40px
Mobile
- All content is full width and is left aligned.
- If a right-hand sidebar is used, it stacks beneath the main content, separated from that by a keyline.
- Spacing above section header should be 60px.
- Unless there is only one form input, the spacing above final button / button group should be 60px; the exception is on login/register pages, where the spacing should be the standard 30px.
- Page end (before footer) should be 40px
All breakpoints
- Page heading must be H1 regular (#5C596D).
- Section heading must be H2 semi-bold (#5C596D).
- Subtitle must be H3 light (#5C596D).
- Labels must be H3 regular (#5C596D), and space above them should be 15px.
- Body copy (16px #444).
- Section titles should have a #CCC key line underneath with a top padding of 15px.
- Space above field label should be 15px.
- Vertical space between form components should be 30px.
- All vertical spacing adheres to new vertical spacing rules.
- Right-hand sidebar content is divided with a horizontal 1px keyline #CCC and 30px padding top and bottom.
- Call us panel title should not have a keyline under the title.
Errors
- Notification card errors follow existing rules.
Non-JS requirements and considerations
- Follows standard form rules for non-JS.
Interactive examples
With right-hand sidebar
A static example is shown below, and a working example can be seen on the single page form - with sidebar page.
Without right-hand sidebar
A static example is shown below, and a working example can be seen on the single page form - no sidebar page.
Code examples
With right-hand sidebar
In this instance, sections and columns should be nested within a single l-content-container so that the columns function as expected and the padding rules for the in/out sections are correctly applied within them.
<div class="l-content-container">
<div class="l-section l-section--in">
<h1 class="a-heading a-heading--1 u-margin--top-none">Blank template</h1>
<h2 class="a-heading a-heading--2 a-heading--light u-margin--bottom-none">Subheading</h2>
</div> <div class="l-columns l-columns--66-33-large u-margin--top-none u-margin--bottom-none">
<div class="l-columns__column">
<div class="l-section l-section--in">
<div class="m-heading-group m-heading-group--underline u-margin--top-none">
<h2 class="m-heading-group__item a-heading a-heading--2 a-heading--semibold">Product section heading</h2>
<h3 class="m-heading-group__item a-heading a-heading--3 a-heading--light">Heading subtitle/policy number</h3>
</div> <div class="l-max l-max--form">
[ Form elements ]
</div>
</div>
</div> <div class="l-columns__column u-margin--top-none">
<div class="a-divider-line a-divider-line--horizontal-solid a-divider-line--columns"></div>
<div class="l-section l-section--in-out">
[ Call us panel ]
</div>
<div class="a-divider-line a-divider-line--horizontal-solid a-divider-line--30-all"></div>
<div class="l-section l-section--in-out">
[ FAQ panel ]
</div>
</div>
</div>
</div>
Without right-hand sidebar
When no sidebar is present, standard section rules should be applied, with content containers nested within each section. This allows for the correct implementation of full width coloured sections, for example the Call us panel.
<div class="l-section l-section--in">
<div class="l-content-container">
<div class="l-max l-max--left l-max--8-column-large">
<h1 class="a-heading a-heading--1 u-margin--top-none">Blank template</h1>
<h2 class="a-heading a-heading--2 a-heading--light u-margin--bottom-none">Subheading</h2>
</div>
</div>
</div><div class="l-section l-section--in">
<div class="l-content-container">
<div class="l-max l-max--left l-max--8-column-large">
<div class="m-heading-group m-heading-group--underline u-margin--top-none">
<h2 class="m-heading-group__item a-heading a-heading--2 a-heading--semibold">Product section heading</h2>
<h3 class="m-heading-group__item a-heading a-heading--3 a-heading--light">Heading subtitle/policy number</h3>
</div> <div class="l-max l-max--form">
[ Form controls ]
</div>
</div>
</div>
</div><div class="l-section l-section--in-out">
<div class="l-content-container">
<div class="l-max l-max--left l-max--8-column-large">
<div class="m-heading-group m-heading-group--underline u-margin--top-none">
<p class="m-heading-group__item">Framing assumptions</p>
<h2 class="m-heading-group__item a-heading a-heading--2 a-heading--semibold">Assumptions heading</h2>
</div>
[ Other content - include any form controls within an l-max--form div to constraint them to the correct width ]
</div>
</div>
</div><div class="l-section l-section--in-out t-accent-light t-accent-light--3">
<div class="l-content-container">
[ Call us panel ]
</div>
</div><div class="l-section l-section--in-out">
<div class="l-content-container">
[ FAQ panel ]
</div>
</div>Inserting form controls
Within the l-max l-max--form div, form controls should be included as per their individual documentation; the l-max--form class constrains the width as required, so m-form-row--full-width is not required.
<div class="l-max l-max--form">
<div class="m-form-row">
[ Form control ]
</div>
<div class="m-form-row">
[ Form control ]
</div>
...
</div>To expand a control outside the restricted width so that it fills to the full width of the outer container (for example, a segmented control with many/long options), use the l-max--form-breakout class, eg:
<div class="l-max l-max--form">
<div class="m-form-row">
[ Form control ]
</div>
<div class="l-max--form-breakout">
<div class="m-form-row">
[ Form control expanding to full width of container ]
</div>
</div>
...
</div>Development and test
Notes for developers
The code examples below show how to set up the basic elements within the page. They are not prescriptive, as the form can contain as many sections, form controls or other elements as required, but this can be achieved easily by duplicating the required code blocks and inserting elements wher required.
Documentation for other helpful modules/organisms when seting up your form may include: