Templates

Default page

<!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 &copy; 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>

Start page

<!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 &copy; 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>

Summary page

<!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 &copy; 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>

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.

<!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 &copy; 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>


Published 3 May 2024
Last updated 6 August 2024