Default page
{{ aspExample({ code: "<!DOCTYPE html>
<html lang=\"en-GB\">
<head>
<meta charset=\"utf-8\">
<title>Avon and Somerset Police</title>
<meta name=\"description\" content=\"Avon and Somerset Police\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<link rel=\"canonical\" href=\"\">
<link rel=\"dns-prefetch\" href=\"https://cdn.policedigital.services/frontend\">
<link rel=\"icon\" type=\"image/png\" sizes=\"32×32\" href=\"https://cdn.policedigital.services/frontend/ico/favicon-32×32.png\">
<link rel=\"icon\" type=\"image/png\" sizes=\"16×16\" href=\"https://cdn.policedigital.services/frontend/ico/favicon-16×16.png\">
<link rel=\"shortcut icon\" href=\"https://cdn.aspolice.net/frontend/ico/favicon.ico\">
<link rel=\"stylesheet\" media=\"all\" href=\"https://cdn.policedigital.services/frontend/62/css/main.css\">
</head>
<body class=\"no-js\">
<script>
//<![CDATA[
document.body.classList.contains(\"js-enabled\") || document.body.classList.add(\"js-enabled\");
document.body.classList.contains(\"no-js\") && document.body.classList.remove(\"no-js\");
//]]>
</script>
<a class=\"skip-link\" href=\"#content\">Skip to content</a>
<header class=\"asp-header asp-header__js-content\">
<div class=\"asp-header__container\">
<div class=\"asp-header__inner asp-header__inner-top\">
<div class=\" asp-header-brand\">
<a class=\"asp-header-brand__link\" href=\"/\" data-separator=\"false\">
<img class=\"asp-header-brand__logo\" srcset=\"https://cdn.policedigital.services/frontend/62/img/crest.png 1x, https://cdn.policedigital.services/frontend/62/img/crest-2x.png 2x\" src=\"https://cdn.policedigital.services/frontend/62/img/crest.png\" width=\"260\" height=\"50\" alt=\"Avon and Somerset Police\">
</a>
</div>
</div>
</div>
</header>
<main class=\"main\" id=\"content\">
<div class=\"container\">
<div class=\"asp-grid\">
<div class=\"asp-grid__item asp-grid__item–large-three-quarters asp-grid__item–extra-large-two-thirds\">
<h1>Heading goes here</h1>
<p>This is a paragraph of text. It explains in more detail what has happened and wraps across several lines.</p>
</div>
</div>
</div>
</main>
<footer class=\"asp-footer\">
<div class=\"container\">
<p class=\"asp-footer__copyright\">Copyright © 2024 Avon and Somerset Police. All Rights Reserved.</p>
<ul class=\"asp-footer__list\">
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"https://www.avonandsomerset.police.uk/help/accessibility\">Accessibility statement</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"https://www.avonandsomerset.police.uk/help/privacy\">Privacy policy</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"https://www.avonandsomerset.police.uk/help/terms-and-conditions\">Terms and conditions</a>
</li>
</ul>
</div>
</footer>
</body>
</html>", nunjucks: "", title: "", id: "65af942e8c0e3", url: "" }) }}
Start page
{{ aspExample({ code: "<!DOCTYPE html>
<html lang=\"en-GB\">
<head>
<meta charset=\"utf-8\">
<title>Avon and Somerset Police</title>
<meta name=\"description\" content=\"Avon and Somerset Police\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<link rel=\"canonical\" href=\"\">
<link rel=\"dns-prefetch\" href=\"https://cdn.policedigital.services/frontend\">
<link rel=\"icon\" type=\"image/png\" sizes=\"32×32\" href=\"https://cdn.policedigital.services/frontend/ico/favicon-32×32.png\">
<link rel=\"icon\" type=\"image/png\" sizes=\"16×16\" href=\"https://cdn.policedigital.services/frontend/ico/favicon-16×16.png\">
<link rel=\"shortcut icon\" href=\"https://cdn.aspolice.net/frontend/ico/favicon.ico\">
<link rel=\"stylesheet\" media=\"all\" href=\"https://cdn.policedigital.services/frontend/62/css/main.css\">
</head>
<body class=\"no-js\">
<script>
//<![CDATA[
document.body.classList.contains(\"js-enabled\") || document.body.classList.add(\"js-enabled\");
document.body.classList.contains(\"no-js\") && document.body.classList.remove(\"no-js\");
//]]>
</script>
<a class=\"skip-link\" href=\"#content\">Skip to content</a>
<header class=\"asp-header asp-header__js-content\">
<div class=\"asp-header__container\">
<div class=\"asp-header__inner asp-header__inner-top\">
<div class=\" asp-header-brand\">
<a class=\"asp-header-brand__link\" href=\"/\" data-separator=\"false\">
<img class=\"asp-header-brand__logo\" srcset=\"https://cdn.policedigital.services/frontend/62/img/crest.png 1x, https://cdn.policedigital.services/frontend/62/img/crest-2x.png 2x\" src=\"https://cdn.policedigital.services/frontend/62/img/crest.png\" width=\"260\" height=\"50\" alt=\"Avon and Somerset Police\">
</a>
</div>
</div>
</div>
</header>
<main class=\"main\" id=\"content\">
<div class=\"container\">
<div class=\"asp-grid\">
<div class=\"asp-grid__item asp-grid__item–large-three-quarters asp-grid__item–extra-large-two-thirds\">
<h1>Application for the grant or renewal of a firearm or shotgun certificate</h1>
<p>To apply for, or renew a firearms/shotgun licence, use this form.</p>
<p>Make sure you read the <a href=\"#\">guidance notes</a> in full, download the <a href=\"#\">doctor letter and medical proforma (PDF)</a> and pass to your doctor for completion before starting an application.</p>
<p>For further information, <a href=\"#\">find out how to apply or renew a firearms licence</a> or <a href=\"#\">view the firearms certificate costs</a>.</p>
<p>Applications to renew a licence must be submitted at least eight weeks before your current certificate expires. Failure to do so may result in delays.</p>
<p><strong>Renewal applications or doctor proformas submitted earlier than three months before expiry will be rejected and returned.</strong></p>
<a href=\"#\" class=\"button button–start\">Start now</a>
<h2>Before starting this form</h2>
<p>Make sure you have everything you need to hand. The form needs to be completed in one go and you will not be able to save your answers.</p>
<p>You will need:</p>
<ul>
<li>details of any firearms or shotguns currently in your possession – including serial numbers</li>
<li>details of your referees – including full name, date and place of birth – two referees are required for a firearm certificate, one referee is required if you are applying for a shotgun certificate</li>
<li>the address of your GP Practice</li>
<li>a digital photograph of passport quality showing your current true likeness, saved on your device ready to upload (jpeg, png or gif)</li>
<li>credit or debit card details to make a payment</li>
<li>for firearms applications only – details of your good reason to possess firearms as per guidance notes 21 and 22</li>
</ul>
<details class=\"details\">
<summary class=\"summary\">Other ways to apply for a grant or renewal</summary>
<ul>
<li><a href=\"#\">Download the Application for Firearm/Shotgun Certificate (PDF)</a>. Complete, print and sign the form and return to the <a href=\"#\">Firearms Licensing Team</a>.</li>
</ul>
</details>
</div>
</div>
</div>
</main>
<footer class=\"asp-footer\">
<div class=\"container\">
<p class=\"asp-footer__copyright\">Copyright © 2024 Avon and Somerset Police. All Rights Reserved.</p>
<ul class=\"asp-footer__list\">
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"https://www.avonandsomerset.police.uk/help/accessibility\">Accessibility statement</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"https://www.avonandsomerset.police.uk/help/privacy\">Privacy policy</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"https://www.avonandsomerset.police.uk/help/terms-and-conditions\">Terms and conditions</a>
</li>
</ul>
</div>
</footer>
</body>
</html>", nunjucks: "", title: "", id: "65aff545ce839", url: "" }) }}
Summary page
{{ aspExample({ code: "<!DOCTYPE html>
<html lang=\"en-GB\">
<head>
<meta charset=\"utf-8\">
<title>Avon and Somerset Police</title>
<meta name=\"description\" content=\"Avon and Somerset Police\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<link rel=\"canonical\" href=\"\">
<link rel=\"dns-prefetch\" href=\"https://cdn.policedigital.services/frontend\">
<link rel=\"icon\" type=\"image/png\" sizes=\"32×32\" href=\"https://cdn.policedigital.services/frontend/ico/favicon-32×32.png\">
<link rel=\"icon\" type=\"image/png\" sizes=\"16×16\" href=\"https://cdn.policedigital.services/frontend/ico/favicon-16×16.png\">
<link rel=\"shortcut icon\" href=\"https://cdn.aspolice.net/frontend/ico/favicon.ico\">
<link rel=\"stylesheet\" media=\"all\" href=\"https://cdn.policedigital.services/frontend/62/css/main.css\">
</head>
<body class=\"no-js\">
<script>
//<![CDATA[
document.body.classList.contains(\"js-enabled\") || document.body.classList.add(\"js-enabled\");
document.body.classList.contains(\"no-js\") && document.body.classList.remove(\"no-js\");
//]]>
</script>
<a class=\"skip-link\" href=\"#content\">Skip to content</a>
<header class=\"asp-header asp-header__js-content\">
<div class=\"asp-header__container\">
<div class=\"asp-header__inner asp-header__inner-top\">
<div class=\" asp-header-brand\">
<a class=\"asp-header-brand__link\" href=\"/\" data-separator=\"false\">
<img class=\"asp-header-brand__logo\" srcset=\"https://cdn.policedigital.services/frontend/62/img/crest.png 1x, https://cdn.policedigital.services/frontend/62/img/crest-2x.png 2x\" src=\"https://cdn.policedigital.services/frontend/62/img/crest.png\" width=\"260\" height=\"50\" alt=\"Avon and Somerset Police\">
</a>
</div>
</div>
</div>
</header>
<main class=\"main\" id=\"content\">
<div class=\"container\">
<div class=\"asp-grid\">
<div class=\"asp-grid__item asp-grid__item–large-three-quarters asp-grid__item–extra-large-two-thirds\">
<h1 class=\"form__page-title\">Check your answers before submitting</h1>
<p class=\"form__page-subtitle\">You can change any of your answers by selecting `change` next to each question. Press `submit` at the bottom of the page to send the form.</p>
<section class=\"section\" aria-labelledby=\"submissionDetails\">
<div class=\"submission\">
<div class=\"submission__section\">
<h3 class=\"submission__title\">Your details</h3>
<dl class=\"row submission__row\">
<dt class=\"col-md-5 submission__question\"></dt>
<dd class=\"col-md-5 submission__answer\">
<ul><li>Collar: 6944</li><li>Name: Christian</li><li>Email: kingrgs@hotmail.com</li></ul>
</dd>
<dd class=\"ml-md-auto col-md-auto col-12 submission__answer\">
<a href=\"#2#your_identity\">
Change <span class=\"sr-only\"></span>
</a>
</dd>
</dl>
<dl class=\"row submission__row\">
<dt class=\"col-md-5 submission__question\">Directorate</dt>
<dd class=\"col-md-5 submission__answer\">
Collaborations
</dd>
<dd class=\"ml-md-auto col-md-auto col-12 submission__answer\">
<a href=\"#2#YOUR_DIRECTORATE\">
Change <span class=\"sr-only\">directorate</span>
</a>
</dd>
</dl>
</div>
</div>
</section>
<section class=\"section\" aria-labelledby=\"submissionDetails\">
<div class=\"submission\">
<div class=\"submission__section\">
<h3 class=\"submission__title\">Collar numbers</h3>
<dl class=\"row submission__row\">
<dt class=\"col-md-5 submission__question\">Enter an Avon and Somerset Police collar number</dt>
<dd class=\"col-md-5 submission__answer\">
123
</dd>
<dd class=\"ml-md-auto col-md-auto col-12 submission__answer\">
<a href=\"#3#COLLAR_NUMBER\">
Change <span class=\"sr-only\">enter an avon and somerset police collar number</span>
</a>
</dd>
</dl>
<dl class=\"row submission__row\">
<dt class=\"col-md-5 submission__question\">Enter an Avon and Somerset Police collar number or a Ports Police collar number</dt>
<dd class=\"col-md-5 submission__answer\">
123
</dd>
<dd class=\"ml-md-auto col-md-auto col-12 submission__answer\">
<a href=\"#3#COLLAR_NUMBER_PORTS\">
Change <span class=\"sr-only\">enter an avon and somerset police collar number or a ports police collar number</span>
</a>
</dd>
</dl>
</div>
</div>
</section>
<section class=\"section\" aria-labelledby=\"submissionDetails\">
<div class=\"submission\">
<div class=\"submission__section\">
<h3 class=\"submission__title\">Equality</h3>
<dl class=\"row submission__row\">
<dt class=\"col-md-5 submission__question\">What best describes your gender identity?</dt>
<dd class=\"col-md-5 submission__answer\">
Female
</dd>
<dd class=\"ml-md-auto col-md-auto col-12 submission__answer\">
<a href=\"#4#GENDER\">
Change <span class=\"sr-only\">what best describes your gender identity?</span>
</a>
</dd>
</dl>
<dl class=\"row submission__row\">
<dt class=\"col-md-5 submission__question\">Do you identify as trans?</dt>
<dd class=\"col-md-5 submission__answer\">
Yes
</dd>
<dd class=\"ml-md-auto col-md-auto col-12 submission__answer\">
<a href=\"#4#TRANS\">
Change <span class=\"sr-only\">do you identify as trans?</span>
</a>
</dd>
</dl>
<dl class=\"row submission__row\">
<dt class=\"col-md-5 submission__question\">What is your ethnicity?</dt>
<dd class=\"col-md-5 submission__answer\">
Pakistani
</dd>
<dd class=\"ml-md-auto col-md-auto col-12 submission__answer\">
<a href=\"#4#ETHNICITY\">
Change <span class=\"sr-only\">what is your ethnicity?</span>
</a>
</dd>
</dl>
<dl class=\"row submission__row\">
<dt class=\"col-md-5 submission__question\">What is your religion?</dt>
<dd class=\"col-md-5 submission__answer\">
Buddhist
</dd>
<dd class=\"ml-md-auto col-md-auto col-12 submission__answer\">
<a href=\"#4#RELIGION\">
Change <span class=\"sr-only\">what is your religion?</span>
</a>
</dd>
</dl>
</div>
</div>
</section>
<section class=\"section\" aria-labelledby=\"submissionDetails\">
<div class=\"submission\">
<div class=\"submission__section\">
<h3 class=\"submission__title\">This switches the terminator page on/off</h3>
<dl class=\"row submission__row\">
<dt class=\"col-md-5 submission__question\">Radio buttons</dt>
<dd class=\"col-md-5 submission__answer\">
Hide terminator page
</dd>
<dd class=\"ml-md-auto col-md-auto col-12 submission__answer\">
<a href=\"#5#RADIO_TERMINATE\">
Change <span class=\"sr-only\">radio buttons</span>
</a>
</dd>
</dl>
</div>
</div>
</section>
<input class=\"button button–start\" type=\"submit\" name=\"Submit the Above\" value=\"Submit\">
</div>
</div>
</div>
</main>
<footer class=\"asp-footer\">
<div class=\"container\">
<p class=\"asp-footer__copyright\">Copyright © 2024 Avon and Somerset Police. All Rights Reserved.</p>
<ul class=\"asp-footer__list\">
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"https://www.avonandsomerset.police.uk/help/accessibility\">Accessibility statement</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"https://www.avonandsomerset.police.uk/help/privacy\">Privacy policy</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"https://www.avonandsomerset.police.uk/help/terms-and-conditions\">Terms and conditions</a>
</li>
</ul>
</div>
</footer>
</body>
</html>", nunjucks: "", title: "", id: "65b04650a962f", url: "" }) }}
Confirmation page
The confirmation page is displayed once the user has successfully completed an action (typically the completion of an online form).
Please note: the feedback link on this form is to a live form, where certain fields would be automatically pre-populated, but for the purposes of the demo we are not able to do so.
{{ aspExample({ code: "<!DOCTYPE html>
<html lang=\"en-GB\">
<head>
<meta charset=\"utf-8\">
<title>Avon and Somerset Police</title>
<meta name=\"description\" content=\"Avon and Somerset Police\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<link rel=\"canonical\" href=\"\">
<link rel=\"dns-prefetch\" href=\"https://cdn.policedigital.services/frontend\">
<link rel=\"icon\" type=\"image/png\" sizes=\"32×32\" href=\"https://cdn.policedigital.services/frontend/ico/favicon-32×32.png\">
<link rel=\"icon\" type=\"image/png\" sizes=\"16×16\" href=\"https://cdn.policedigital.services/frontend/ico/favicon-16×16.png\">
<link rel=\"shortcut icon\" href=\"https://cdn.aspolice.net/frontend/ico/favicon.ico\">
<link rel=\"stylesheet\" media=\"all\" href=\"https://cdn.policedigital.services/frontend/62/css/main.css\">
</head>
<body class=\"no-js\">
<script>
//<![CDATA[
document.body.classList.contains(\"js-enabled\") || document.body.classList.add(\"js-enabled\");
document.body.classList.contains(\"no-js\") && document.body.classList.remove(\"no-js\");
//]]>
</script>
<a class=\"skip-link\" href=\"#content\">Skip to content</a>
<header class=\"asp-header asp-header__js-content\">
<div class=\"asp-header__container\">
<div class=\"asp-header__inner asp-header__inner-top\">
<div class=\" asp-header-brand\">
<a class=\"asp-header-brand__link\" href=\"/\" data-separator=\"false\">
<img class=\"asp-header-brand__logo\" srcset=\"https://cdn.policedigital.services/frontend/62/img/crest.png 1x, https://cdn.policedigital.services/frontend/62/img/crest-2x.png 2x\" src=\"https://cdn.policedigital.services/frontend/62/img/crest.png\" width=\"260\" height=\"50\" alt=\"Avon and Somerset Police\">
</a>
</div>
</div>
</div>
</header>
<main class=\"main\" id=\"content\">
<div class=\"container\">
<div class=\"asp-grid\">
<div class=\"asp-grid__item asp-grid__item–large-three-quarters asp-grid__item–extra-large-two-thirds\">
<div class=\"alert alert–success\">
<h1 class=\"alert_title\">Submission complete</h1>
<p>Your form submission number is <span class=\"alert__code\">all-rzn35</span></p>
</div>
<h2>What happens next?</h2>
<p>Once your report has been processed, you will receive a reply (please check your junk folder).</p>
<p><a href=\"#\">What did you think of this online service?</a> (takes 30 seconds).</p>
</div>
</div>
</div>
</main>
<footer class=\"asp-footer\">
<div class=\"container\">
<p class=\"asp-footer__copyright\">Copyright © 2024 Avon and Somerset Police. All Rights Reserved.</p>
<ul class=\"asp-footer__list\">
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"https://www.avonandsomerset.police.uk/help/accessibility\">Accessibility statement</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"https://www.avonandsomerset.police.uk/help/privacy\">Privacy policy</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"https://www.avonandsomerset.police.uk/help/terms-and-conditions\">Terms and conditions</a>
</li>
</ul>
</div>
</footer>
</body>
</html>", nunjucks: "", title: "", id: "65b04650a9732", url: "" }) }}