Application complete
+REFERENCE123
We have sent you a confirmation email.
+What happens next
+We've sent your application to the relevant organisation.
+They will contact you either to confirm your registration, or to ask for more information.
+diff --git a/app/views/design-system/patterns/ask-users-for-feedback.html b/app/views/design-system/patterns/ask-users-for-feedback.html
new file mode 100644
index 00000000..53097683
--- /dev/null
+++ b/app/views/design-system/patterns/ask-users-for-feedback.html
@@ -0,0 +1,528 @@
+{% extends "layouts/layout.html" %}
+
+{% set serviceNav = "Design system" %}
+{% set path = "design-system/patterns/ask-users-for-feedback" %}
+{% set title = "Ask users for feedback" %}
+{% set description = "A pattern that allows users to give feedback about a page, feature or overall service." %}
+{% set mainClasses = 'govuk-!-padding-top-0 ' %}
+
+{% block content %}
+
+ {{description}} Use this pattern to collect user feedback at the end of journeys and tasks. You can use it in along with the phase banner feedback link. Do not use this pattern part way through a user's journey or task. Typically products and services collect user feedback through a link in the phase banner. However, users rarely interact with the phase banner. This makes it hard for teams to collect feedback on their service. We have gathered evidence and examples from across DfE to find ways of asking for feedback that get better response rates. This pattern is the result. Evidence shows this is an effective way to gather feedback from a user when they have finished the thing they set out to do. There are 3 variants of this pattern. The first 2 variants should be used to get feedback at the end of a journey or task. The third should be used to get feedback on a specific page. Ask users for feedback at the end of a journey or task. DfE services have found this increases response rates. Integrate your feedback form into pages of the service when asking for feedback at the end of multi-page journey. Make the form optional. Teaching Vacancies and Early Years Training both integrated their feedback forms in their content, and saw huge increases in user feedback. On Teaching Vacancies, the team got 263 responses to the form over a 10 month period before integrating the form on their confirmation pages. After integrating the form, they got 9741 responses over the same 10 month period the following year. That's more than a 3000% increase in response rate. We have sent you a confirmation email. We've sent your application to the relevant organisation. They will contact you either to confirm your registration, or to ask for more information. In Early Years Training, the team got 241 feedback responses over a 3 month period before integrating the feedback form as a series of questions at the end of a training course. After integration, the team got 860 responses in a three month period. That's an increase of 256.85%. IMAGE EXAMPLE HERE There is a third variant you can use if you want to gather feedback on a specific page. Collect feedback about a specifc page by showing the user a "Tell us what you think of this page" heading and a "Give feedback" at the bottom of that page. When the button is selected, show a free text field to enter feedback. You can see an example of feedback forms at the bottom of all pages in the DfE design manual. Keep the following things in mind when designing feedback forms. Users may prefer to give feedback anonymously. Make sure that users do not have to include their name or contact information to submit their feedback, whichever variant you use. Explain that leaving contact details will enable to product team to ask more about the issues they raised or let them know when it is fixed. Link to your product's privacy notice. If you use a Microsoft Form to gather feedback from civil servants, make sure the form does not automatically submit their name and email address. Include a differnt method for users to report an immediate technical problem. A link or button that says "Report a problem with this page" is a simple way to do this. There are lots of different tools you can use to get feedback. Some teams have designed and built their own. Others have used Microsoft Forms to create a bespoke journey and capture data they can analyse themselves. A few teams pay for services like Qualtrics which involve an additional cost for a license or account. You should choose the method that works best for your team, but consider the accessibility of whatever you use. Any feedback platform you use must meet the Government Service Standard and legal requirements under the Equalities Act 2010. You must explain any accessibility issues in your accessibillity statement. This pattern has been used successfully by several services, but there is more to learn. If you can, variant test these integrated examples alongside a the GOV.UK pattern for a confirmation page where a feedback form is linked to rather than part of the page. Analyse the results, see what works best for your users and share your findings with the DfE Components working group so we can iterate this guidance. Some Department for Education services are using this pattern and its varitions, including:
+ Contribute to this guidance to help improve
+ the pattern for others.{{title}}
+ When to use this pattern
+ When not to use this pattern
+ Background
+ How it works
+ Get feedback on a journey or task
+ Integrate the feedback form in the content
+ Variant 1: Teaching Vacancies
+ Contents
+
+
+ Example
+ Application complete
+
REFERENCE123What happens next
+ HTML
+
+
+
+<div class="govuk-width-container">
+ <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
+ <div class="govuk-grid-row">
+ <div class="govuk-grid-column-two-thirds">
+ <div class="govuk-panel govuk-panel--confirmation">
+ <h1 class="govuk-panel__title">Application complete</h1>
+ <div class="govuk-panel__body">Your reference number<br><strong>REFERENCE123</strong></div>
+ </div>
+ <p class="govuk-body">We have sent you a confirmation email.</p>
+ <h2 class="govuk-heading-m">What happens next</h2>
+ <p class="govuk-body">We’ve sent your application to the relevant organisation.</p>
+ <p class="govuk-body">They will contact you either to confirm your registration, or to ask for more information.</p>
+ </div>
+ </div>
+ </main>
+</div>
+
+<h2 class="govuk-heading-m">Have time to share some feedback?</h2>
+<p class="govuk-body">Your feedback can help us improve the service.</p>
+
+<form class="feedback-form" id="feedback-form-example" action="#" accept-charset="UTF-8" method="post">
+ <input type="hidden" name="authenticity_token" value="" autocomplete="off" />
+
+ <h2 class="govuk-heading-m">Have time to share some feedback?</h2>
+ <p class="govuk-body">Your feedback can help us improve the service.</p>
+
+ <div class="govuk-form-group">
+ <fieldset class="govuk-fieldset">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
+ <h3 class="govuk-fieldset__heading">How satisfied are you with your experience of using Teaching Vacancies?</h3>
+ </legend>
+
+ <input value="" autocomplete="off" type="hidden" name="feedback_form[rating]" id="feedback_form_rating_example" />
+ <div class="govuk-radios" data-module="govuk-radios">
+ <div class="govuk-radios__item">
+ <input id="rating-highly-satisfied" class="govuk-radios__input" type="radio" value="highly_satisfied" name="feedback_form[rating]" />
+ <label for="rating-highly-satisfied" class="govuk-label govuk-radios__label">Highly satisfied</label>
+ </div>
+ <div class="govuk-radios__item">
+ <input id="rating-somewhat-satisfied" class="govuk-radios__input" type="radio" value="somewhat_satisfied" name="feedback_form[rating]" />
+ <label for="rating-somewhat-satisfied" class="govuk-label govuk-radios__label">Somewhat satisfied</label>
+ </div>
+ <div class="govuk-radios__item">
+ <input id="rating-neither" class="govuk-radios__input" type="radio" value="neither" name="feedback_form[rating]" />
+ <label for="rating-neither" class="govuk-label govuk-radios__label">Neither satisfied nor dissatisfied</label>
+ </div>
+ <div class="govuk-radios__item">
+ <input id="rating-somewhat-dissatisfied" class="govuk-radios__input" type="radio" value="somewhat_dissatisfied" name="feedback_form[rating]" />
+ <label for="rating-somewhat-dissatisfied" class="govuk-label govuk-radios__label">Somewhat dissatisfied</label>
+ </div>
+ <div class="govuk-radios__item">
+ <input id="rating-highly-dissatisfied" class="govuk-radios__input" type="radio" value="highly_dissatisfied" name="feedback_form[rating]" />
+ <label for="rating-highly-dissatisfied" class="govuk-label govuk-radios__label">Highly dissatisfied</label>
+ </div>
+ </div>
+ </fieldset>
+ </div>
+
+ <div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="1200">
+ <label for="comment-field-example" class="govuk-label govuk-label--s">Do you have any
+ suggestions on how we should improve the service? (optional<span class='govuk-visually-hidden'> field</span>)</label>
+ <textarea id="comment-field-example" class="govuk-textarea govuk-js-character-count" rows="4" aria-describedby="comment-field-info" name="feedback_form[comment]"></textarea>
+ <span id="comment-field-info" class="govuk-hint govuk-character-count__message">You can enter up to 1200 characters</span>
+ </div>
+
+ <div class="govuk-form-group">
+ <fieldset class="govuk-fieldset">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
+ <h3 class="govuk-fieldset__heading">Would you like to participate in our research?</h3>
+ </legend>
+ <div class="govuk-radios" data-module="govuk-radios">
+
+ <div class="govuk-radios__item">
+ <input id="participation-yes-example" class="govuk-radios__input" data-aria-controls="participation-yes-conditional-example" type="radio" value="interested" name="feedback_form[user_participation_response]" />
+ <label for="participation-yes-example" class="govuk-label govuk-radios__label">Yes</label>
+ </div>
+
+ <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="participation-yes-conditional-example">
+ <div class="govuk-form-group">
+ <label for="email-field-example" class="govuk-label">
+ What is your email address?
+ </label>
+ <div class="govuk-hint" id="email-hint-example">We'll only use this to tell you about opportunities to take part in user research.</div>
+ <input id="email-field-example" class="govuk-input" aria-describedby="email-hint-example" value="" type="email" name="feedback_form[email]" />
+ </div>
+
+ <div class="govuk-form-group">
+ <label for="occupation-field-example" class="govuk-label">
+ Occupation
+ </label>
+ <div class="govuk-hint" id="occupation-hint-example">We'll only use this to tell you about opportunities to take part in user research that is relevant to you.</div>
+ <textarea id="occupation-field-example" class="govuk-textarea" rows="1" aria-describedby="occupation-hint-example" name="feedback_form[occupation]"></textarea>
+ </div>
+ </div>
+
+ <div class="govuk-radios__item">
+ <input id="participation-no-example" class="govuk-radios__input" type="radio" value="uninterested" name="feedback_form[user_participation_response]" />
+ <label for="participation-no-example" class="govuk-label govuk-radios__label">No</label>
+ </div>
+ </div>
+ </fieldset>
+ </div>
+
+ <div class="govuk-button-group">
+ <button type="submit" formnovalidate="formnovalidate" class="govuk-button" data-module="govuk-button" data-prevent-double-click="true">Submit feedback</button>
+ <a class="govuk-link govuk-link--no-visited-state" href="#">Skip feedback</a>
+ </div>
+</form>
+
+ Variant 2: Early Years Training
+
+ Get feedback on a specific page
+
+ Variant 3: Ask at the bottom of the page
+
+ Example: DfE design manuals
+
+
+ Contents
+
+
+
+ Example
+
+
+ HTML
+
+
+
+
+
+<section class="dfe-feedback">
+ <div class="govuk-width-container">
+ <div class="govuk-grid-row">
+ <div class="govuk-grid-column-full">
+ <div class="dfe-feedback-banner">
+ <div class="dfe-feedback-banner--content">
+ <div class="dfe-feedback-banner--flex">
+ <h2 class="govuk-heading-s">Tell us what you think of this page</h2>
+ <button type="button" class="govuk-button" data-module="govuk-button" id="problemButton" data-govuk-button-init="">
+ Give feedback
+ </button>
+ </div>
+
+ <div class="dfe-feedback-banner--content-message" id="thanksMessage" role="status" hidden="">
+ Thank you for your feedback
+ </div>
+
+ <div class="dfe-feedback-panel" id="feedback-panel" style="display: none;" aria-hidden="true">
+ <form id="feedback-form">
+ <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="400" data-govuk-character-count-init="">
+ <div class="govuk-form-group govuk-!-margin-top-5">
+ <h3 class="govuk-label-wrapper">
+ <label class="govuk-label govuk-label--m" for="feedback_form_input">
+ What do you want to tell us?
+ </label>
+ </h3>
+ <textarea class="govuk-textarea govuk-js-character-count" id="feedback_form_input" name="feedback_form_input" rows="5" aria-describedby="feedback_form_input"></textarea>
+ <div id="feedback_form_input-info" class="govuk-hint govuk-character-count__message govuk-visually-hidden">
+ You can enter up to 400 characters
+ </div>
+ <div class="govuk-hint govuk-character-count__message govuk-character-count__status" aria-hidden="true">
+ You have 400 characters remaining
+ </div>
+ <div class="govuk-character-count__sr-status govuk-visually-hidden" aria-live="polite">
+ You have 400 characters remaining
+ </div>
+ </div>
+ </div>
+
+ <div class="govuk-button-group">
+ <button class="govuk-button" data-module="govuk-button" type="submit" data-govuk-button-init="">
+ Submit
+ </button>
+ <button class="govuk-button govuk-button--secondary" type="button" data-module="govuk-button" id="cancelButton" data-govuk-button-init="">
+ Cancel
+ </button>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
+
+ Things to consider
+
+ Make contact details optional
+
+ Make clear the feedback form not for urgent issues
+
+ Tools for storing and analysing feedback
+
+ Research on this pattern
+
+ Share your findings
+
+ Services using this pattern
+
+
+
+
+ Help improve this pattern
+
+