Feedback

Use the Feedback component to give users the opportunity to give feedback at any point in their journey. This helps you gather a wide range of feedback to understand how well your service performs and improvements you can make.

Basic usage

You can use the component by just passing in the title_text and text parameters.

Optionally, the heading_level can be set from 1 to 6. It defaults to 2.

Input

= govuk_feedback(title_text: "Help us improve this service",
                 heading_level: 3,
                 text: %(<a href="#" class="govuk-link">Email us</a> to let us know what you think.))

<%= govuk_feedback(title_text: "Help us improve this service", heading_level: 3, text: %(<a href="#" class="govuk-link">Email us</a> to let us know what you think.)) %>

Output

Help us improve this service

Email us to let us know what you think.

<div class="govuk-feedback govuk-width-container">
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <h3 class="govuk-feedback__title">Help us improve this service</h3>
      <div class="govuk-feedback__body">
        <p class="govuk-body"><a href="#" class="govuk-link">Email us</a> to let us know what you think.</p>
      </div>
    </div>
  </div>
</div>

Customising the HTML

Custom HTML can be passed into the header and body slots for more control of the output.

Input

= govuk_feedback do |component|
  - component.with_header { "Tell us how we're doing" }
  - component.with_body do
    ' You can send us feedback by:

    ul.govuk-list
      li
        a href="#" class="govuk-link"
          | email
      li
        a href="#" class="govuk-link"
          | text message
      li
        a href="#" class="govuk-link"
          | post

<%= govuk_feedback do |component|
component.with_header { "Tell us how we're doing" }
component.with_body do %>You can send us feedback by:
  <ul class="govuk-list">
    <li>
      <a class="govuk-link" href="#">
        email
      </a></li>
    <li>
      <a class="govuk-link" href="#">
        text message
      </a></li>
    <li>
      <a class="govuk-link" href="#">
        post
      </a></li>
  </ul>
<% end; end %>

Output

Tell us how we’re doing

You can send us feedback by:

<div class="govuk-feedback govuk-width-container">
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <h2 class="govuk-feedback__title">Tell us how we're doing</h2>
      <div class="govuk-feedback__body">
        <p class="govuk-body">You can send us feedback by: 
          <ul class="govuk-list">
            <li><a class="govuk-link" href="#">email</a></li>
            <li><a class="govuk-link" href="#">text message</a></li>
            <li><a class="govuk-link" href="#">post</a></li>
          </ul>
        </p>
      </div>
    </div>
  </div>
</div>