Report a problem - Canada.ca design pattern

From: Treasury Board of Canada Secretariat

Mandatory on all pages

The Report a problem pattern allows people to provide feedback via a form for any problems they experience with the web page they are on.

Use this pattern to enable page-level feedback. When people click on the Report a problem button on this page, they are presented with common issues to select using checkboxes. If none of these issues are applicable, they may select “Other” to provide more details.

On this page

When to use

This pattern is mandatory on all pages.

Mandatory elements of the design system

What to avoid

Ensure that the feedback you receive is actionable. If you can, avoid implementing a form where people cannot give details on the issues they are experiencing.

How to implement

Using CDTS to implement the Canada.ca theme

Do not implement this pattern through CDTS. To turn off the page footer in CDTS:

  • use the CDTS version for GCWeb applications, instead of the one for static HTML pages
  • remove the reference for the 'prefooter'

You should then set up the report a problem form in its place.

The button, label, placement and privacy statement are mandatory:

  • the pattern is presented as a button using the button component styled for secondary actions, which triggers a feedback form to expand when clicked
  • the label reads: “Report a problem on this page”
  • placement: positioned directly below the main content area, left-aligned
  • privacy statement: positioned within a dismissible overlay

The pattern for the contents of the feedback form is recommended. If meaningful data is not being received, a mailto link can be used as an alternative.

Sending the form: Make sure to replace the "#" placeholder in the form action line with whatever your institution uses to collect the data from the form. Consider sending the form to a generic email inbox if you don't have a server set up to handle this type of form.

Report a problem on this page
Please select all that apply:

Privacy statement

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Code
<div class="row">
 <div class="col-sm-6 col-md-5 col-lg-4">
  <details class="brdr-0" open="">
   <summary class="btn btn-default text-center">Report a problem on this page</summary>
   <div class="well row">
    <div class="gc-rprt-prblm">
     <div class="gc-rprt-prblm-tggl" id="wb-auto-7">
      <form action="#">
       <fieldset>
        <legend><span class="field-name">Please select all that apply: </span></legend>
        <div class="checkbox">
         <label for="problem1"><input type="checkbox" data-reveal="#broken" name="problem" value="Something is broken" id="problem1">Something is broken</label>
        </div>
        <div class="form-group hide" id="broken">
         <label for="problem1-detail">Provide more details (optional):</label>
         <input type="text" class="form-control full-width" id="problem1-detail">
        </div>
        <div class="checkbox">
         <label for="problem2"><input type="checkbox" data-reveal="#spelling" name="problem" value="It has spelling or grammar mistakes" id="problem2">It has spelling or grammar mistakes</label>
        </div>
        <div class="form-group hide" id="spelling">
         <label for="problem2-detail">Provide more details (optional):</label>
         <input type="text" class="form-control full-width" id="problem2-detail">
        </div>
        <div class="checkbox">
         <label for="problem3"><input type="checkbox" data-reveal="#wrong" name="problem" value="The information is wrong" id="problem3">The information is wrong</label>
        </div>
        <div class="form-group hide" id="wrong">
         <label for="problem3-detail">Provide more details (optional):</label>
         <input type="text" class="form-control full-width" id="problem3-detail">
        </div>
        <div class="checkbox">
         <label for="problem4"><input type="checkbox" data-reveal="#outdated" name="problem" value="The information is outdated" id="problem4">The information is outdated</label>
        </div>
        <div class="form-group hide" id="outdated">
         <label for="problem4-detail">Provide more details (optional):</label>
         <input type="text" class="form-control full-width" id="problem4-detail">
        </div>
        <div class="checkbox">
         <label for="problem5"><input type="checkbox" data-reveal="#find" name="problem" value="I can’t find what I’m looking for" id="problem5">I can’t find what I’m looking for</label>
        </div>
        <div class="form-group hide" id="find">
         <label for="problem5-detail">Describe what you’re looking for (optional):</label>
         <input type="text" class="form-control full-width" id="problem5-detail">
        </div>
        <div class="checkbox">
         <label for="problem6"><input type="checkbox" data-reveal="#confusing" name="problem" value="Other" id="problem6">Other</label>
        </div>
        <div class="form-group hide" id="confusing">
         <label for="problem6-detail">Provide more details (optional):</label>
         <input type="text" class="form-control full-width" id="problem6-detail">
        </div>
       </fieldset>
       <button type="submit" class="btn btn-primary wb-toggle wb-init wb-toggle-inited" data-toggle="{&quot;stateOff&quot;: &quot;hide&quot;, &quot;stateOn&quot;: &quot;show&quot;, &quot;selector&quot;: &quot;.gc-rprt-prblm-tggl&quot;}" aria-controls="wb-auto-7 wb-auto-8">Submit</button>
      </form>
     </div>
     <div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" id="wb-auto-8">
      <h3>Thank you for your help!</h3>
      <p>You will not receive a reply. For enquiries, please <a href="https://www.canada.ca/en/contact.html">contact us</a>.</p>
     </div>
    </div>
   </div>
  </details>
 </div>
</div>

Discussion

Discuss the pattern in github issues

Date modified: