Ask users for Access codes
Important information:
This pattern requires documentation
Example: Access code contents
Nunjucks
{% extends "layout/_template.njk" %}
{% from "components/access-code/_macro.njk" import onsAccessCode %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/panel/_macro.njk" import onsPanel %}
{% from "components/details/_macro.njk" import onsDetails %}
{%
set pageConfig = {
"header": {
"title": "Study title"
}
}
%}
{% block main %}
<h1 class="ons-u-mt-2xl">Start study</h1>
{{
onsAccessCode({
"id": "access-code-example",
"name": "access-code",
"postTextboxLinkText": "Where to find your access code",
"postTextboxLinkUrl": "#0",
"label": {
"text": "Enter your 16-character access code",
"description": "Keep this code safe. You will need to enter it every time you access your study"
},
"securityMessage": "Your personal information is protected by law and will be kept confidential"
})
}}
{{
onsButton({
"text": "Access study",
"classes": "ons-u-mb-2xl ons-u-mt-s"
})
}}
<h2>If you do not have an access code</h2>
<p>
If you have lost or not received an access code, you can <a href="#0">request a new access code</a>. This can be sent to you by text
or post.
</p>
{% set content %}
<p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p>
{%
call onsPanel({
"variant": "warn"
})
%}
Someone in your household must still complete a study using this household access code
{% endcall %}
{% endset %}
{%
call onsDetails({
"id": "details",
"title": "Need to answer separately from your household?"
})
%}
{{ content | safe }}
{% endcall %}
{% endblock %}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | ID for the input |
| classes | string | false | Classes to add to the panel wrapping the access code input |
| label | Label (ref) | true | Settings for the input label |
| type | string | false | Sets the type attribute on the access code input. Defaults to text |
| name | string | false | Sets the name attribute for the access code input |
| maxLength | integer | false | Maximum length for the access code not including spaces. Defaults to 16. |
| groupSize | integer | false | Number of characters or digits before a space is automatically added. Defaults to 4. |
| securityMessage | string | false | The security message to place below the input. If not set, the message and icon will not be displayed. |
| postTextboxLinkText | string | false | The text for the link following the access code input |
| postTextboxLinkUrl | string | false | The url for the link following the access code input |
| error | Error (ref) | false | Configuration for validation errors |
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Example: Access code</title>
<link rel="stylesheet" href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/css/main.css" />
<link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/css/print.css" />
<meta name="theme-color" content="#206095" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:title" content="" />
<meta property="og:image" content="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/favicons/opengraph.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:description" content="" />
<meta property="og:site_name" content="Study title" />
<meta property="og:locale" content="en" />
<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/favicons/favicon.ico" />
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/favicons/favicon-32x32.png"
sizes="32x32" />
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/favicons/favicon-16x16.png"
sizes="16x16" />
<link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/favicons/safari-pinned-tab.svg"
color="#000000" />
<link rel="apple-touch-icon" type="image/png"
href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/favicons/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/favicons/manifest.json" />
</head>
<body>
<!-- prettier-ignore-start -->
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' :
'ons-js-enabled');
</script>
<!-- prettier-ignore-end -->
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-to-content" href="#main-content">Skip to main content</a>
<header class="ons-header" role="banner">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="208" height="20"
viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path
d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div
class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<div class="ons-header__title">Study title</div>
</div>
</div>
</div>
</div>
</header>
<div class="ons-page__container ons-container">
<div class="ons-grid">
<div class="ons-grid__col ons-col-12@m ">
<main id="main-content" class="ons-page__main ">
<h1 class="ons-u-mt-2xl">Start study</h1>
<div class="ons-panel ons-panel--info ons-panel--no-title ons-u-mb-s">
<span class="ons-panel__assistive-text ons-u-vh">Important information: </span>
<div class="ons-panel__body">
<div class="ons-field ons-question__answer">
<label class="ons-label ons-label--with-description" for="access-code-example"
aria-describedby="description-hint">Enter your 16-character access code</label>
<span id="description-hint" class="ons-label__description ons-input--with-description">Keep this
code safe. You will need to enter it every time you access your study</span>
<input type="text" id="access-code-example"
class="ons-input ons-input--text ons-input-type__input ons-access-code__input ons-js-access-code ons-u-mb-2xs"
name="access-code" maxlength="19" data-group-size="4" autocomplete="off"
autocapitalize="characters" aria-describedby="description-hint" />
<a class="ons-u-fs-s ons-input__post-link" href="#0">Where to find your access code</a>
</div>
</div>
</div>
<div class="ons-panel ons-panel--bare ons-u-mb-s">
<span class="ons-panel__assistive-text ons-u-vh">Important information: </span>
<span class="ons-panel__icon ons-u-fs-r"><svg class="ons-icon" viewBox="0 0 10 13"
xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
title="ons-icon-lock">
<path
d="M12.25,6h-.72V4.49a3.5,3.5,0,0,0-7,0V6H3.75A.77.77,0,0,0,3,6.75v6.5a.77.77,0,0,0,.75.75h8.5a.77.77,0,0,0,.75-.75V6.75A.77.77,0,0,0,12.25,6ZM5.54,4.49a2.5,2.5,0,1,1,5,0V6h-5ZM9,11.66a.3.3,0,0,1-.26.34H7.29A.29.29,0,0,1,7,11.69v0l.39-1.82a1,1,0,1,1,1.4-.18.77.77,0,0,1-.18.18Z"
transform="translate(-3 -0.99)" />
</svg></span>
<div class="ons-panel__body"> Your personal information is protected by law and will be kept
confidential </div>
</div>
<button type="submit" class="ons-btn ons-u-mb-2xl ons-u-mt-s">
<span class="ons-btn__inner"><span class="ons-btn__text">Access study</span></span>
</button>
<h2>If you do not have an access code</h2>
<p> If you have lost or not received an access code, you can <a href="#0">request a new access code</a>.
This can be sent to you by text or post. </p>
<div id="details" class="ons-details ons-js-details">
<div class="ons-details__heading ons-js-details-heading" role="button">
<h2 class="ons-details__title ons-u-fs-r--b">Need to answer separately from your household?</h2>
<span class="ons-details__icon">
<svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor" role="img" title="ons-icon-chevron">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg></span>
</div>
<div id="details-content" class="ons-details__content ons-js-details-content">
<p>If you need to answer separately from the people you live with, you can <a href="#0">request an
individual access code</a>.</p>
<div class="ons-panel ons-panel--warn ons-panel--no-title">
<span class="ons-panel__icon" aria-hidden="true">!</span>
<span class="ons-panel__assistive-text ons-u-vh">Warning: </span>
<div class="ons-panel__body"> Someone in your household must still complete a study using this
household access code </div>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
</div>
</div>
<!-- prettier-ignore-start -->
<script>
(function() {
var s = ['https://cdn.ons.gov.uk/sdc/design-system/72.1.2/scripts/main.js'],
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
<!-- prettier-ignore-end -->
<div class="embeddable"></div>
<style>
body {
height: auto;
}
</style>
<script src="/js/main.js?t=1734532073318"></script>
</body>
</html>How to check access codes
To help users enter a valid access code, you should:
- allow them to paste the code
- check they have entered something in the code field
- check that what they have entered is valid
- show an error message if they have not entered anything or what they have entered is not valid
Error messages
Use the correct errors pattern and show the error details above the access code field.
If the access code is missing
Use “Enter an access code”.
If the access code is too long or too short
Use “Enter a 16-character access code”.
If the access code is the correct length but is not a real code
Use “Access code not recognised. Enter the code again.”
Example: Access code error contents
Nunjucks
{% extends "layout/_template.njk" %}
{% from "components/access-code/_macro.njk" import onsAccessCode %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/panel/_macro.njk" import onsPanel %}
{% from "components/details/_macro.njk" import onsDetails %}
{%
set pageConfig = {
"title": "Study title"
}
%}
{% block main %}
{%
call onsPanel({
"title": "There is a problem with this page",
"variant": "error"
})
%}
{% from "components/list/_macro.njk" import onsList %}
{{
onsList({
"element": "ol",
"itemsList": [
{
"text": "Enter an access code",
"url": "#access-code-error",
"variants": "inPageLink"
}
]
})
}}
{% endcall %}
<h1 class="ons-u-mt-2xl">Start study</h1>
{{
onsAccessCode({
"id": "access-code",
"name": "access-code",
"postTextboxLinkText": "Where to find your access code",
"postTextboxLinkUrl": "#0",
"label": {
"text": "Enter your 16-character access code",
"description": "Keep this code safe. You will need to enter it every time you access your survey"
},
"securityMessage": "Your personal information is protected by law and will be kept confidential",
"error": {
"id": "access-code-error",
"text": "Enter an access code"
}
})
}}
{{
onsButton({
"text": "Access study",
"classes": "ons-u-mb-2xl ons-u-mt-s"
})
}}
<h2>If you do not have an access code</h2>
<p>
If you have lost or not received an access code, you can <a href="#0">request a new access code</a>. This can be sent to you by text
or post.
</p>
{% set content %}
<p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p>
{%
call onsPanel({
"variant": "warn"
})
%}
Someone in your household must still complete a study using this household access code
{% endcall %}
{% endset %}
{%
call onsDetails({
"id": "details-access-code-error",
"title": "Need to answer separately from your household?"
})
%}
{{ content | safe }}
{% endcall %}
{% endblock %}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | ID for the input |
| classes | string | false | Classes to add to the panel wrapping the access code input |
| label | Label (ref) | true | Settings for the input label |
| type | string | false | Sets the type attribute on the access code input. Defaults to text |
| name | string | false | Sets the name attribute for the access code input |
| maxLength | integer | false | Maximum length for the access code not including spaces. Defaults to 16. |
| groupSize | integer | false | Number of characters or digits before a space is automatically added. Defaults to 4. |
| securityMessage | string | false | The security message to place below the input. If not set, the message and icon will not be displayed. |
| postTextboxLinkText | string | false | The text for the link following the access code input |
| postTextboxLinkUrl | string | false | The url for the link following the access code input |
| error | Error (ref) | false | Configuration for validation errors |
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Study title</title>
<link rel="stylesheet" href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/css/main.css" />
<link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/css/print.css" />
<meta name="theme-color" content="#206095" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:title" content="Study title" />
<meta property="og:image" content="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/favicons/opengraph.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:description" content="" />
<meta property="og:site_name" content="Study title" />
<meta property="og:locale" content="en" />
<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/favicons/favicon.ico" />
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/favicons/favicon-32x32.png"
sizes="32x32" />
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/favicons/favicon-16x16.png"
sizes="16x16" />
<link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/favicons/safari-pinned-tab.svg"
color="#000000" />
<link rel="apple-touch-icon" type="image/png"
href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/favicons/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/72.1.2/favicons/manifest.json" />
</head>
<body>
<!-- prettier-ignore-start -->
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' :
'ons-js-enabled');
</script>
<!-- prettier-ignore-end -->
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-to-content" href="#main-content">Skip to main content</a>
<header class="ons-header" role="banner">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="208" height="20"
viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path
d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div
class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<div class="ons-header__title">Study title</div>
</div>
</div>
</div>
</div>
</header>
<div class="ons-page__container ons-container">
<div class="ons-grid">
<div class="ons-grid__col ons-col-12@m ">
<main id="main-content" class="ons-page__main ">
<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error">
<div class="ons-panel__header">
<h2 id="alert" data-qa="error-header" class="ons-panel__title ons-u-fs-r--b">There is a problem with
this page</h2>
</div>
<div class="ons-panel__body">
<p class="ons-list ons-list--p">
<a href="#access-code-error" class="ons-list__link ons-js-inpagelink">Enter an access code</a>
</p>
</div>
</div>
<h1 class="ons-u-mt-2xl">Start study</h1>
<div class="ons-panel ons-panel--error ons-panel--no-title" id="access-code-error">
<span class="ons-panel__assistive-text ons-u-vh">Error: </span>
<div class="ons-panel__body">
<p class="ons-panel__error">
<strong>Enter an access code</strong>
</p>
<div class="ons-field ons-question__answer">
<label class="ons-label ons-label--with-description" for="access-code"
aria-describedby="description-hint">Enter your 16-character access code</label>
<span id="description-hint" class="ons-label__description ons-input--with-description">Keep this
code safe. You will need to enter it every time you access your survey</span>
<input type="text" id="access-code"
class="ons-input ons-input--text ons-input-type__input ons-input--error ons-access-code__input ons-js-access-code ons-u-mb-2xs"
name="access-code" maxlength="19" data-group-size="4" autocomplete="off"
autocapitalize="characters" aria-describedby="description-hint" />
<a class="ons-u-fs-s ons-input__post-link" href="#0">Where to find your access code</a>
</div>
</div>
</div>
<div class="ons-panel ons-panel--bare ons-u-mb-s">
<span class="ons-panel__assistive-text ons-u-vh">Important information: </span>
<span class="ons-panel__icon ons-u-fs-r"><svg class="ons-icon" viewBox="0 0 10 13"
xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
title="ons-icon-lock">
<path
d="M12.25,6h-.72V4.49a3.5,3.5,0,0,0-7,0V6H3.75A.77.77,0,0,0,3,6.75v6.5a.77.77,0,0,0,.75.75h8.5a.77.77,0,0,0,.75-.75V6.75A.77.77,0,0,0,12.25,6ZM5.54,4.49a2.5,2.5,0,1,1,5,0V6h-5ZM9,11.66a.3.3,0,0,1-.26.34H7.29A.29.29,0,0,1,7,11.69v0l.39-1.82a1,1,0,1,1,1.4-.18.77.77,0,0,1-.18.18Z"
transform="translate(-3 -0.99)" />
</svg></span>
<div class="ons-panel__body"> Your personal information is protected by law and will be kept
confidential </div>
</div>
<button type="submit" class="ons-btn ons-u-mb-2xl ons-u-mt-s">
<span class="ons-btn__inner"><span class="ons-btn__text">Access study</span></span>
</button>
<h2>If you do not have an access code</h2>
<p> If you have lost or not received an access code, you can <a href="#0">request a new access code</a>.
This can be sent to you by text or post. </p>
<div id="details-access-code-error" class="ons-details ons-js-details">
<div class="ons-details__heading ons-js-details-heading" role="button">
<h2 class="ons-details__title ons-u-fs-r--b">Need to answer separately from your household?</h2>
<span class="ons-details__icon">
<svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor" role="img" title="ons-icon-chevron">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg></span>
</div>
<div id="details-access-code-error-content" class="ons-details__content ons-js-details-content">
<p>If you need to answer separately from the people you live with, you can <a href="#0">request an
individual access code</a>.</p>
<div class="ons-panel ons-panel--warn ons-panel--no-title">
<span class="ons-panel__icon" aria-hidden="true">!</span>
<span class="ons-panel__assistive-text ons-u-vh">Warning: </span>
<div class="ons-panel__body"> Someone in your household must still complete a study using this
household access code </div>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
</div>
</div>
<!-- prettier-ignore-start -->
<script>
(function() {
var s = ['https://cdn.ons.gov.uk/sdc/design-system/72.1.2/scripts/main.js'],
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
<!-- prettier-ignore-end -->
<div class="embeddable"></div>
<style>
body {
height: auto;
}
</style>
<script src="/js/main.js?t=1734532073318"></script>
</body>
</html>Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)