Feedback
Use these components when you want the user to provide feedback on the page / content.
Inline feedback
For inline feedback use the feedback-panel component.
Use the feedback panel component when you want to ask the user to provide feedback on a page or section of a page.
<div class="dl-feedback">
<div class="dl-feedback__prompt">
<div class="dl-feedback__prompt-content">
If you have spotted an issue with the data or have a question email the digital land team on
<a href="mailto:email@email.com">email@email.com</a>.
</div>
<div class="dl-feedback__prompt-action">
<a href="" class="govuk-button dl-feedback__prompt__link"></a>
</div>
</div>
</div>
{%- from "digital-land-frontend/components/feedback/macro.jinja" import dlFeedback %}
{{ dlFeedback({
"action": "Is there a problem with this data?",
"html": 'If you have spotted an issue with the data or have a question email the digital land team on
<a href="mailto:email@email.com">email@email.com</a>.'
})
}}It works well when included at the bottom of the page, after the main content. Putting it after the main content means it won't distract the user from the content before they have had chance to read it.
Feedback prompt
Use the dlf-feedback-prompt component to place a prompt for feedback. The component includes options to add content to the panel and an action in the form of a button.
By default the component will be 100% width.
Feedback with button
Using a button in the prompt helps the user know they can interact with the prompt.
<div class="dl-feedback">
<div class="dl-feedback__prompt">
<div class="dl-feedback__prompt-content">
<span class="dl-feedback__prompt-content__text">Spotted an issue? Let us know so we can improve the data.</span>
</div>
<div class="dl-feedback__prompt-action">
<a href="DigitalLand@communities.gov.uk" class="govuk-button dl-feedback__prompt__link">There is something wrong with the data</a>
</div>
</div>
</div>
{%- from "digital-land-frontend/components/feedback/macro.jinja" import dlFeedback %}
{{ dlFeedback({
"text": "Spotted an issue? Let us know so we can improve the data.",
"action": {
"text": "There is something wrong with the data",
"href": "DigitalLand@communities.gov.uk"
}
})
}}
Feedback without button
You don't always need to include a button. A link can be used instead.
<div class="dl-feedback">
<div class="dl-feedback__prompt">
<div class="dl-feedback__prompt-content">
<span class="dlf-feedback__prompt-content__text">Spotted an issue? <a href="#" class="dlf-feedback__link">Let us know</a> so we can improve the data.</span>
</div>
</div>
</div>
{%- from "digital-land-frontend/components/feedback/macro.jinja" import dlFeedback %}
{% set feedbackHtml %}
<span class="dlf-feedback__prompt-content__text">Spotted an issue? <a href="#" class="dlf-feedback__link">Let us know</a> so we can improve the data.</span>
{% endset %}
{{ dlFeedback({
"html": feedbackHtml
})
}}
Feedback when pinned to footer
Often if makes sense to ask for feedback about the whole page.
When doing this it makes sense to place the feedback prompt at the bottom of the page.
The dlf-base template has a feedbackPrompt block that can be used to place the component at the end of the page.
This takes the feeback component out of the main content block on the page and uses the feedbackPrompt block. This will wrap the component in div with the .dlf-feedback__wrapper. This class limits the width of the component to the maximum page width.
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
<head>
<meta charset="utf-8">
<title>Digital Land - Planning data you can find, use and trust</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#0b0c0c">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" sizes="48x48" href="/design-system/static/images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" sizes="32x32" href="/design-system/static/images/favicon-32x32.png" type="image/png">
<link rel="shortcut icon" sizes="16x16" href="/design-system/static/images/favicon-16x16.png" type="image/png">
<link rel="apple-touch-icon" href="/design-system/static/images/apple-touch-icon.png">
<meta name="digital-land:template" content="digital-land-frontend/base.jinja">
<link href="/design-system/static/stylesheets/dl-frontend.css" rel="stylesheet" />
<meta property="og:image" content="/design-system/static/images/govuk-opengraph-image.png">
</head>
<body class="govuk-template__body ">
<script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
<a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
<!-- Cookie banner partial version 1.0.1 -->
<div id="global-cookie-message" class="govuk-clearfix global-cookie-message" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet="">
<div id="cookie-banner" class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<div class="cookie-banner__message govuk-!-margin-top-6">
<h2 class="govuk-heading-m">Tell us whether you accept cookies</h2>
<p class="govuk-body">We use <a class="govuk-link" href="/cookies">cookies to collect information</a> about how you use the Digital Land website to make the website work as well as possible.</p>
</div>
<div class="cooke-banner__buttons govuk-grid-row">
<div class="govuk-grid-column-one-half">
<button class="govuk-button" onclick="acceptCookies();showCookieConfirmation();">Accept all cookies</button>
</div>
<div class="govuk-grid-column-one-half">
<a class="govuk-button" href="/cookies">Set cookie preferences</a>
</div>
</div>
</div>
</div>
</div>
<div id="cookie-confirmation" class="govuk-width-container govuk-!-padding-top-6" tabindex="-1" style="display: none;">
<p class="cookie-banner__confirmation-message govuk-body">You’ve accepted all cookies. You can <a class="govuk-link" href="/cookies">change your cookie settings</a> at any time.</p>
<button class="cookie-banner__hide-button govuk-button govuk-button--secondary" onclick="document.getElementById('cookie-confirmation').style.display='none';">Hide</button>
</div>
</div>
<header role="banner" id="global-header" class="govuk-header with-proposition dl-header" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="header-proposition">
<div class="govuk-header__content">
<a href="/" class="govuk-header__link govuk-header__link--service-name">
Digital Land
</a>
<nav class="govuk-header__navigation" aria-label="Menu">
<button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
<ul id="navigation" class="govuk-header__navigation-list">
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/about">Team</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/project/">Projects</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/weeknote/">Weeknotes</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/blog-post/">Blog</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/guidance/">Guidance</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/dataset/">Datasets</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/organisation/">Organisations</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/map/">Map</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="govuk-width-container ">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
prototype
</strong>
<span class="govuk-phase-banner__text">
This is a prototype. Please provide <a class="govuk-link" href="mailto:digitalland@communities.gov.uk?subject=Prototype feedback">feedback to the Digital Land team</a>.
</span>
</p>
</div>
<main class="govuk-main-wrapper " id="main-content" role="main">
<h1 class="govuk-heading-xl">Default page template</h1>
</main>
</div>
<footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<h2 class="govuk-visually-hidden">Support links</h2>
<ul class="govuk-footer__inline-list">
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="/cookies">
Cookies
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="/accessibility-statement">
Accessibility statement
</a>
</li>
</ul>
<div class="govuk-footer__meta-custom">
The <a class="govuk-footer__link" href="https://github.com/digital-land/digital-land/">software</a> and <a class="govuk-footer__link" href="https://github.com/digital-land/digital-land/">data</a> used to build these pages is <a class="govuk-footer__link" href="https://github.com/digital-land/digital-land/blob/master/LICENSE">open source</a>.
</div>
<svg
aria-hidden="true"
focusable="false"
class="govuk-footer__licence-logo"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 483.2 195.7"
height="17"
width="41"
>
<path
fill="currentColor"
d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
/>
</svg>
<span class="govuk-footer__licence-description">
All content is available under the
<a
class="govuk-footer__link"
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
rel="license"
>Open Government Licence v3.0</a>, except where otherwise stated
</span>
</div>
<div class="govuk-footer__meta-item">
<a
class="govuk-footer__link govuk-footer__copyright-logo"
href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
>© Crown copyright</a>
</div>
</div>
</div>
</footer>
<script src="/design-system/static/javascripts/digital-land-cookies.js"></script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script src="/design-system/static/javascripts/govuk/govuk-frontend.js"></script>
<script>
// initiate all GOVUK components
window.GOVUKFrontend.initAll();
</script>
<script src="/design-system/static/javascripts/digital-land-frontend.js"></script>
<script>
window.DLFrontend.initAll();
</script>
</body>
</html>{% extends "digital-land-frontend/layouts/base.jinja" %}
{% block content %}
<h1 class="govuk-heading-xl">Default page template</h1>
{% endblock %}
{% block feedbackPrompt %}
{%- from "digital-land-frontend/components/feedback/macro.html" import dlFeedback %}
{{ dlFeedback({
"text": "Spotted an issue? Let us know so we can improve the data.",
"action": {
"text": "There is something wrong with the data",
"href": "DigitalLand@communities.gov.uk"
}
})
}}
{% endblock %}
Stacked feedback
You can use the feedback prompt component in a narrower layout - for example, in a govuk-grid-column-one-third parent.
Add the class dlf-feedback--stacked to get the desired effect.
<div class='govuk-grid-row'>
<div class="govuk-grid-column-two-thirds">Main content</div>
<div class="govuk-grid-column-one-third">
<div class="dl-feedback dlf-feedback--stacked dlf-feedback--flush">
<div class="dl-feedback__prompt">
<div class="dl-feedback__prompt-content">
<span class="dl-feedback__prompt-content__text">Have you spotted any issues with the data?</span>
</div>
<div class="dl-feedback__prompt-action">
<a href="mailto:digitalLand@communities.gov.uk?subject=Feedback" class="govuk-button dl-feedback__prompt__link">Provide feedback</a>
</div>
</div>
</div>
</div>
</div>
{%- from "digital-land-frontend/components/feedback/macro.jinja" import dlFeedback %}
<div class='govuk-grid-row'>
<div class="govuk-grid-column-two-thirds">Main content</div>
<div class="govuk-grid-column-one-third">
{{ dlFeedback({
"classes": "dlf-feedback--stacked dlf-feedback--flush",
"text": "Have you spotted any issues with the data?",
"action": {
"text": "Provide feedback",
"href": "mailto:digitalLand@communities.gov.uk?subject=Feedback"
}
})
}}
</div>
</div>