Report a problem: Canada.ca design system
We are decommissioning the Report a Problem pattern. We do not recommend adding this pattern to your pages.
If you would like to collect feedback for specific web pages you can use the Page Feedback Tool (PFT) pattern. You should only add the PFT to pages where you plan to actively monitor and action feedback.
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.
This pattern enables 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
Use this pattern to enable page-level feedback.
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
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
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="{"stateOff": "hide", "stateOn": "show", "selector": ".gc-rprt-prblm-tggl"}" 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>Page details
- Date modified: