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/105/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/105/img/crest.png 1x, https://cdn.policedigital.services/frontend/105/img/crest-2x.png 2x\" src=\"https://cdn.policedigital.services/frontend/105/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\">
<ul class=\"asp-footer__list\">
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"#\">Accessibility statement</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"#\">Privacy policy</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"#\">Terms and conditions</a>
</li>
</ul>
<p class=\"asp-footer__copyright\">Copyright © 2025 Avon and Somerset Police. All Rights Reserved.</p>
</div>
</footer>
</body>
</html>", nunjucks: "", json: "", title: "", example: "", id: "65af942e8c0e3" }) }}
Start page
{{ aspExample({ code: "
<!DOCTYPE html>
<html lang=\"en-GB\">
<head>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<meta name=\"description\" content=\"Report a rural crime\">
<meta property=\"og:image\" content=\"https://cdn.policedigital.services/frontend/124/img/asp-opengraph-image.jpg\">
<title>Report a rural crime | Avon and Somerset Police</title>
<link rel=\"canonical\" href=\"https://www.avonandsomerset.police.uk/forms/rcr\">
<link rel=\"dns-prefetch\" href=\"https://cdn.policedigital.services\">
<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.policedigital.services/frontend/ico/favicon.ico\"> <link rel=\"stylesheet\" media=\"all\" href=\"https://cdn.policedigital.services/frontend/124/css/main.css\">
<script src=\"https://cdn.policedigital.services/frontend/124/js/detect.js\" async></script>
</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=\"asp-skip-link\" href=\"#main\">Skip to content</a>
<header class=\"asp-header\">
<div class=\"asp-header__container–top\">
<div class=\"asp-container\">
<a class=\"asp-link–plain asp-header__link asp-header__app\" href=\"https://www.avonandsomerset.police.uk\">
<img class=\"asp-header__app-logo\" src=\"https://cdn.policedigital.services/frontend/124/img/asp-crest-with-text.svg\" height=\"50\" width=\"264\" alt=\"Avon and Somerset Police\">
</a>
</div>
</div>
</header>
<main class=\"asp-main client-site\" id=\"main\">
<div class=\"asp-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=\"asp-notification asp-notification–amber browser-version\">
<h2 class=\"asp-notification__title\">Your web browser is out of date</h2>
<div class=\"asp-notification__content\">
<p>Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.</p>
</div>
</div>
<div class=\"asp-notification asp-notification–red cookies\">
<h2 class=\"asp-notification__title\">Cookies disabled</h2>
<div class=\"asp-notification__content\">
<p>Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.</p>
</div>
</div>
<h1>Report a rural crime</h1>
<p>If you have witnessed or been a victim of a rural crime, use this form to report it.</p>
<p>A rural crime could consist of theft of property (including livestock), livestock worrying or criminal damage to property or land. For further information, refer to <a href=\"https://www.avonandsomerset.police.uk/report/rural-wildlife-crime\">our guidance</a>.</p>
<p>Do not use this form to report a crime relating to <a href=\"https://www.avonandsomerset.police.uk/report/rural-wildlife-crime#wildlife-crime\">wild animals and plants</a>.</p>
<p>This form takes about 12 minutes to complete.</p>
<a class=\"asp-button\" href=\"#\">Start now</a>
<h2>To fill in this form</h2>
<p>You will need:</p>
<ul>
<li>the date, time and location of the incident</li>
<li>details of any suspects or witnesses</li>
<li>details of any distinctive markings, identification numbers or tracking devices</li>
<li>the value of item stolen, if relevant</li>
<li>photographs, if relevant, with a maximum size of 4GB each</li>
</ul>
<p>You will also need JavaScript enabled in your browser</p>
<details class=\"asp-details\">
<summary class=\"asp-details__summary\">Other ways to report a crime or incident</summary>
<ul>
<li>Report in person – <a href=\"#\">visit a police station</a></li>
</ul>
</details>
</div>
</div>
</div>
</main>
<footer class=\"asp-footer\">
<div class=\"asp-container\">
<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/cookie-settings\">Manage cookies</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"https://www.avonandsomerset.police.uk/help/privacy\">Privacy</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>
<p class=\"asp-footer__copyright\">Copyright © 2025 Avon and Somerset Police. All Rights Reserved.</p>
</div>
</footer> <script src=\"https://cdn.policedigital.services/frontend/124/js/formation.js\" defer></script>
<script src=\"https://cdn.policedigital.services/frontend/124/js/toggle-button.js\" defer></script>
</body>
</html>", nunjucks: "", json: "", title: "", example: "", id: "65aff545ce839" }) }}
Summary page
{{ aspExample({ code: "<form method=\"POST\" class=\"form\">
<input type=\"hidden\" name=\"_csrf\" value=\"kPrMTbYb-S7cIGyttNyGQE9WSU_LxZ2i25T4\">
<h1>Check your answers before submitting</h1>
<p class=\"form__hint\"> 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\">
<h2 id=\"submissionDetails\" hidden=\"\">Your answers</h2>
<div class=\"submission\">
<div class=\"submission__section\">
<h3 class=\"submission__title\">Yours details</h3>
<div class=\"asp-summary-list-container\">
<dl class=\"asp-summary-list\">
<dt class=\"asp-summary-list__key\">Title</dt>
<dd class=\"asp-summary-list__value\">Mr</dd>
<dd class=\"asp-summary-list__actions\">
<a href=\"/forms/pws/pages/1#WHAT_DOING\">
Change <span class=\"sr-only\">Title</span>
</a>
</dd>
</dl>
<dl class=\"asp-summary-list\">
<dt class=\"asp-summary-list__key\">First name</dt>
<dd class=\"asp-summary-list__value\">Christopher</dd>
<dd class=\"asp-summary-list__actions\">
<a href=\"/forms/pws/pages/1#WHAT_WRONG\">
Change <span class=\"sr-only\">First name</span>
</a>
</dd>
</dl>
<dl class=\"asp-summary-list\">
<dt class=\"asp-summary-list__key\">Last name</dt>
<dd class=\"asp-summary-list__value\">King</dd>
<dd class=\"asp-summary-list__actions\">
<a href=\"/forms/pws/pages/1#WHAT_WRONG\">
Change <span class=\"sr-only\">Last name</span>
</a>
</dd>
</dl>
</div>
</div>
</div>
</section>
<section class=\"section\" aria-labelledby=\"submissionDetails\">
<h2 id=\"submissionDetails\" hidden=\"\">Your answers</h2>
<div class=\"submission\">
<div class=\"submission__section\">
<h3 class=\"submission__title\">Contact</h3>
<div class=\"asp-summary-list-container\">
<dl class=\"asp-summary-list\">
<dt class=\"asp-summary-list__key\">Email</dt>
<dd class=\"asp-summary-list__value\">test@testing.com</dd>
<dd class=\"asp-summary-list__actions\">
<a href=\"/forms/pws/pages/2#EMAIL\">
Change <span class=\"sr-only\">email</span>
</a>
</dd>
</dl>
</div>
</div>
</div>
</section>
<section class=\"section\" aria-labelledby=\"submissionDetails\">
<h2 id=\"submissionDetails\" hidden=\"\">Your answers</h2>
<div class=\"submission\">
<div class=\"submission__section\">
<h3 class=\"submission__title\">Privacy policy</h3>
<div class=\"asp-summary-list-container\">
<dl class=\"asp-summary-list\">
<dt class=\"asp-summary-list__key\">By submitting this form, I agree to Avon and Somerset Police using my data as stated in the Privacy Policy.</dt>
<dd class=\"asp-summary-list__value\">
I agree with the statement </dd>
<dd class=\"asp-summary-list__actions\">
<a href=\"/forms/pws/pages/3#STATEMENT_TRUE\">
Change <span class=\"sr-only\">by submitting this form, i agree to avon and somerset police using my data as stated in the privacy policy.</span>
</a>
</dd>
</dl>
</div>
</div>
</div>
</section>
<input class=\"asp-button\" type=\"submit\" name=\"Submit the Above\" value=\"Submit\">
</form>", nunjucks: "", json: "", title: "", example: "", id: "65b04650a962f" }) }}
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/105/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/105/img/crest.png 1x, https://cdn.policedigital.services/frontend/105/img/crest-2x.png 2x\" src=\"https://cdn.policedigital.services/frontend/105/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=\"asp-confirmation\">
<h1>Submission complete</h1>
<p>Your form submission number is</p>
<p class=\"asp-confirmation__code\">ALL-RZN35</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\">
<ul class=\"asp-footer__list\">
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"#\">Accessibility statement</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"#\">Privacy policy</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"#\">Terms and conditions</a>
</li>
</ul>
<p class=\"asp-footer__copyright\">Copyright © 2025 Avon and Somerset Police. All Rights Reserved.</p>
</div>
</footer>
</body>
</html>", nunjucks: "", json: "", title: "", example: "", id: "65b04650a9732" }) }}
Page not found / 404 error 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/105/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/105/img/crest.png 1x, https://cdn.policedigital.services/frontend/105/img/crest-2x.png 2x\" src=\"https://cdn.policedigital.services/frontend/105/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–medium-two-thirds\">
<h1>Page not found</h1>
<p>If you typed the web address, check it is correct.</p>
<p>If you pasted the web address, check you copied the entire address.</p>
<p>If the web address is correct or you selected a link or button, <a href=\"https://www.avonandsomerset.police.uk/forms/rpw\">report a problem with the website</a>.</p>
<p>Otherwise you can <a href=\"https://www.avonandsomerset.police.uk\">go to the home page</a> of our website and try again.</p>
</div>
</div>
</div>
</main>
<footer class=\"asp-footer\">
<div class=\"container\">
<ul class=\"asp-footer__list\">
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"#\">Accessibility statement</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"#\">Privacy policy</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"#\">Terms and conditions</a>
</li>
</ul>
<p class=\"asp-footer__copyright\">Copyright © 2025 Avon and Somerset Police. All Rights Reserved.</p>
</div>
</footer>
</body>
</html>", nunjucks: "", json: "", title: "", example: "", id: "672cd6cdeb729" }) }}
Unauthorised 403 error 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–medium-two-thirds\">
<h1>403 – Unauthorised</h1>
<p>You are not authorised to view the requested page.</p>
<p><a href=\"#\">Return to home page</a></p>
</div>
</div>
</div>
</main>
<footer class=\"asp-footer\">
<div class=\"container\">
<ul class=\"asp-footer__list\">
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"#\">Accessibility statement</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"#\">Privacy policy</a>
</li>
<li class=\"asp-footer__item\">
<a class=\"asp-footer__link\" href=\"#\">Terms and conditions</a>
</li>
</ul>
<p class=\"asp-footer__copyright\">Copyright © 2025 Avon and Somerset Police. All Rights Reserved.</p>
</div>
</footer>
</body>
</html>", nunjucks: "", json: "", title: "", example: "", id: "672cd6cdeb92b" }) }}