Skip to content
ASP Digital Design System

Your web browser is out of date

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.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

Templates

Default page

Open this example in a new tab: templates

<!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 &copy; 2025 Avon and Somerset Police. All Rights Reserved.</p>
      </div>
    </footer>
  </body>
</html>

Start page

Open this example in a new tab: templates

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

Summary page

Open this example in a new tab: templates

<!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">
        <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>
        <hr class="asp-hr">
        <h3 class="submission__title">Your details</h3>
        <div class="asp-summary-list-container">
          <dl class="asp-summary-list">
            <dt class="asp-summary-list__key"></dt>
            <dd class="asp-summary-list__value">
              <ul>
                <li>Collar: 6944</li>
                <li>Name: Christian</li>
                <li>Email: kingrgs@hotmail.com</li>
              </ul>
            </dd>
            <dd class="asp-summary-list__actions">
              <a href="#">
                Change <span class="sr-only"></span>
              </a>
            </dd>
          </dl>
          <dl class="asp-summary-list">
            <dt class="asp-summary-list__key">Directorate</dt>
            <dd class="asp-summary-list__value">
              Collaborations
            </dd>
            <dd class="asp-summary-list__actions">
              <a href="#">
                Change <span class="sr-only">directorate</span>
              </a>
            </dd>
          </dl>
        </div>
        <hr class="asp-hr">
        <h3 class="submission__title">Collar numbers</h3>
        <div class="asp-summary-list-container">
          <dl class="asp-summary-list">
            <dt class="asp-summary-list__key">Enter an Avon and Somerset Police collar number</dt>
            <dd class="asp-summary-list__value">
              123
            </dd>
            <dd class="asp-summary-list__actions">
              <a href="#">
                Change <span class="sr-only">enter an avon and somerset police collar number</span>
              </a>
            </dd>
          </dl>
          <dl class="asp-summary-list">
            <dt class="asp-summary-list__key">Enter an Avon and Somerset Police collar number or a Ports Police collar number</dt>
            <dd class="asp-summary-list__value">
              123
            </dd>
            <dd class="asp-summary-list__actions">
              <a href="#">
                Change <span class="sr-only">enter an avon and somerset police collar number or a ports police collar number</span>
              </a>
            </dd>
          </dl>
        </div>
        <hr class="asp-hr">
        <h3 class="submission__title">Equality</h3>
        <div class="asp-summary-list-container">
          <dl class="asp-summary-list">
            <dt class="asp-summary-list__key">What best describes your gender identity?</dt>
            <dd class="asp-summary-list__value">
              Female
            </dd>
            <dd class="asp-summary-list__actions">
              <a href="#">
                Change <span class="sr-only">what best describes your gender identity?</span>
              </a>
            </dd>
          </dl>
          <dl class="asp-summary-list">
            <dt class="asp-summary-list__key">Do you identify as trans?</dt>
            <dd class="asp-summary-list__value">
              Yes
            </dd>
            <dd class="asp-summary-list__actions">
              <a href="#">
                Change <span class="sr-only">do you identify as trans?</span>
              </a>
            </dd>
          </dl>
          <dl class="asp-summary-list">
            <dt class="asp-summary-list__key">What is your ethnicity?</dt>
            <dd class="asp-summary-list__value">
              Pakistani
            </dd>
            <dd class="asp-summary-list__actions">
              <a href="#">
                Change <span class="sr-only">what is your ethnicity?</span>
              </a>
            </dd>
          </dl>
          <dl class="asp-summary-list">
            <dt class="asp-summary-list__key">What is your religion?</dt>
            <dd class="asp-summary-list__value">
              Buddhist
            </dd>
            <dd class="asp-summary-list__actions">
              <a href="#">
                Change <span class="sr-only">what is your religion?</span>
              </a>
            </dd>
          </dl>
        </div>
        <hr class="asp-hr">
        <h3 class="submission__title">This switches the terminator page on/off</h3>
        <div class="asp-summary-list-container">
          <dl class="asp-summary-list">
            <dt class="asp-summary-list__key">Radio buttons</dt>
            <dd class="asp-summary-list__value">
              Hide terminator page
            </dd>
            <dd class="asp-summary-list__actions">
              <a href="#">
                Change <span class="sr-only">radio buttons</span>
              </a>
            </dd>
          </dl>
        </div>
        <input class="button button--start" type="submit" name="Submit the Above" value="Submit">
      </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 &copy; 2025 Avon and Somerset Police. All Rights Reserved.</p>
      </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.

Open this example in a new tab: templates

<!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 &copy; 2025 Avon and Somerset Police. All Rights Reserved.</p>
      </div>
    </footer>
  </body>
</html>

Page not found / 404 error page

Open this example in a new tab: templates

<!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 &copy; 2025 Avon and Somerset Police. All Rights Reserved.</p>
      </div>
    </footer>
  </body>
</html>

Unauthorised 403 error page

Open this example in a new tab: templates

<!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 &copy; 2025 Avon and Somerset Police. All Rights Reserved.</p>
      </div>
    </footer>
  </body>
</html>

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.

Published 3 May 2024
Last updated 16 September 2025