Feedback

Skip to HTML example

When to use this component

Use the feedback component to collect user feedback about a page with a simple 'Is this page useful?' prompt.

You can see a working example of this component on most pages of the GOV.UK website (opens in a new tab).

Use the feedback component when you want to:

gather quick feedback on whether a page is useful
provide users with a way to report issues with a page
collect data to help improve your service

When not to use this component

Do not use the feedback component:

on transactional pages where it might distract from the main task
if you cannot act on the feedback received
as a replacement for proper user research

How it works

The feedback component appears at the bottom of the page, above the footer, and asks users "Is this page useful?" with Yes and No buttons.

When a user clicks a button:

show a thank you message confirming their response was received
optionally reveal a form for more detailed feedback
store the response for analysis

Error handling

If your feedback form includes validation (for example, requiring users to enter comments before submitting), you will need to use a custom error container.

Because the feedback form typically appears in a panel or modal separate from the main page content, validation errors should display within that panel rather than at the top of the main page.

See the displaying custom errors pattern for guidance on how to implement this, including a specific example for the feedback component.

HTML example

Copy the HTML from this page directly into your web template. You will need to add JavaScript to handle the button clicks and form submission.

Is this page useful?

<div class="dfe-feedback">
  <div class="dfe-feedback__prompt">
    <div class="dfe-feedback__prompt-content">
      <div class="dfe-feedback__prompt-questions">
        <div class="dfe-feedback__prompt-question-answer">
          <h2 class="dfe-feedback__prompt-question">Is this page useful?</h2>
          <ul class="dfe-feedback__option-list">
            <li class="dfe-feedback__option-list-item">
              <button class="govuk-button dfe-feedback__prompt-link" data-response="yes">Yes</button>
            </li>
            <li class="dfe-feedback__option-list-item">
              <button class="govuk-button dfe-feedback__prompt-link" data-response="no">No</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="dfe-feedback">
  <div class="dfe-feedback__prompt">
    <div class="dfe-feedback__prompt-content">
      <div class="dfe-feedback__prompt-questions">
        <div class="dfe-feedback__prompt-question-answer">
          <h2 class="dfe-feedback__prompt-question">Is this page useful?</h2>
          <ul class="dfe-feedback__option-list">
            <li class="dfe-feedback__option-list-item">
              <button class="govuk-button dfe-feedback__prompt-link" data-response="yes">Yes</button>
            </li>
            <li class="dfe-feedback__option-list-item">
              <button class="govuk-button dfe-feedback__prompt-link" data-response="no">No</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>


{% endblock %}

If you would like any additional advice or guidance with using this example on Power Pages, please contact the Solutions Delivery Team.