Language selection

Government of Canada / Gouvernement du Canada

Search

Report a problem: Canada.ca design

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 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

Privacy statement

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna.

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>

Page details

Date modified: