Page feedback (RAP) - Documentation
- Status
- Stable
- Type
- Canada.ca site functionality
- Last review
- 2022-04-26
Purpose
Displays the Page feedback form
Working example
- Default page feedback form example
- Default page feedback form with analytics data attributes example
- Default page feedback form version 1 example
How to implement
To show the page feedback form, create a
<div>with the following data attribute:data-ajax-replace="ajax/report-problem-en.html".For the basic HTML version, a link element should be created inside a
<div>that points to the report a problem form page:<div><a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a></div>For more information about Data Ajax plugin, please visit Data Ajax documentation page
Evaluation and report
There is no evaluation and report available for this component.
API (Version 2.0)
| CSS Class | Template | Visual rendering | Schema |
|---|---|---|---|
| n.a. | Version 2.0 | n.a. | n.a. |
Template (latest: v2.0)
Template migration notes
Site template includes
Version 2.0
The html inserted by the Data Ajax plugin can be found on the following page: https://github.com/wet-boew/GCWeb/blob/master/sites/feedback/ajax/report-problem-en.html.
<div data-ajax-replace="ajax/report-problem-en.html">
<div class="row row-no-gutters">
<div class="col-sm-9 col-md-6 col-lg-5">
<a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>
</div>
</div>
</div>Before, version 1.0
<details class="brdr-0">
<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-frm gc-rprt-prblm-tggl" id="wb-auto-4">
{ feedback form }
</div>
<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" id="wb-auto-5">
<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>Report a problem (RAP) form (feedback)
Implemented ajax files reference
Version 2.0
<form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback" data-wb-postback="{"success":".success-message","failure":".failure-message","content":".form-content"}" >
<fieldset>
<legend>
<span class="field-name">Please select all that apply:</span>
</legend>
<div class="checkbox">
<label for="problem1">
<input name="problem1" id="problem1" type="checkbox" value="Yes" >A link, button or video is not working
</label>
<input name="problem1" type="hidden" value="">
</div>
<div class="checkbox">
<label for="problem2">
<input name="problem2" id="problem2" type="checkbox" value="Yes" >It has a spelling mistake
</label>
<input name="problem2" type="hidden" value="">
</div>
<div class="checkbox">
<label for="problem3">
<input name="problem3" id="problem3" type="checkbox" value="Yes" >Information is missing
</label>
<input name="problem3" type="hidden" value="">
</div>
<div class="checkbox">
<label for="problem4">
<input name="problem4" id="problem4" type="checkbox" value="Yes" >Information is outdated or wrong
</label>
<input name="problem4" type="hidden" value="">
</div>
<div class="checkbox">
<label for="problem5">
<input name="problem5" id="problem5" type="checkbox" value="Yes" >Login error when trying to access an account (e.g. My Service Canada Account)
</label>
<input name="problem5" type="hidden" value="">
</div>
<ul>
<li class="checkbox">
<label for="problem6a">
<input name="problem6" id="problem6a" type="checkbox" value="Yes" >GC Key access
</label>
<input name="problem6" type="hidden" value="">
</li>
<li class="checkbox">
<label for="problem7">
<input name="problem7" id="problem7" type="checkbox" value="Yes" >SecureKey Concierge (Banking Credential) access
</label>
<input name="problem7" type="hidden" value="">
</li>
<li class="checkbox">
<label for="problem8">
<input name="problem8" id="problem8" type="checkbox" value="Yes" >Personal Access Code (PAC) problems or EI Access Code (AC) problems
</label>
<input name="problem8" type="hidden" value="">
</li>
<li class="checkbox">
<label for="problem9">
<input name="problem9" id="problem9" type="checkbox" value="Yes" >Social Insurance Number (SIN) validation problems
</label>
<input name="problem9" type="hidden" value="">
</li>
<li class="checkbox">
<label for="problem10">
<input name="problem10" id="problem10" type="checkbox" value="Yes" >Other login error not in this list
</label>
<input name="problem10" type="hidden" value="">
</li>
</ul>
<div class="checkbox">
<label for="problem11">
<input name="problem11" id="problem11" type="checkbox" value="Yes" >I can't find what I'm looking for
</label>
<input name="problem11" type="hidden" value="">
</div>
<div class="checkbox">
<label for="problem12">
<input name="problem12" id="problem12" type="checkbox" value="Yes" >Other issue not in this list
</label>
<input name="problem12" type="hidden" value="">
</div>
</fieldset>
<strong><button type="submit" class="btn btn-primary">Submit</button></strong>
</form>
<div class="success-message hide">
<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>
<p class="failure-message hide">Something went wrong. Please submit your information via an alternative method.</p>Before, version 1.0
<form action="#">
<fieldset>
<legend><span class="field-name">Please select all that apply:</span></legend>
<div class="checkbox">
<label for="gc-rprt-prblm-f1">
<input type="checkbox" name="problem1" value="Yes" id="gc-rprt-prblm-f1" />A link, button or video is not working
</label>
<input name="problem1" type="hidden" value="No" />
</div>
<div class="checkbox">
<label for="gc-rprt-prblm-f2">
<input type="checkbox" name="problem2" value="Yes" id="gc-rprt-prblm-f2" />It has a spelling mistake
</label>
<input name="problem2" type="hidden" value="No" />
</div>
<div class="checkbox">
<label for="gc-rprt-prblm-f3">
<input type="checkbox" name="problem3" value="Yes" id="gc-rprt-prblm-f3" />Information is missing
</label>
<input name="problem3" type="hidden" value="No" />
</div>
<div class="checkbox">
<label for="gc-rprt-prblm-f4">
<input type="checkbox" name="problem4" value="Yes" id="gc-rprt-prblm-f4" />Information is outdated or wrong
</label>
<input name="problem4" type="hidden" value="No" />
</div>
<div class="checkbox">
<label for="gc-rprt-prblm-f5">
<input type="checkbox" name="problem5" value="Yes" id="gc-rprt-prblm-f5" />I can't find what I'm looking for
</label>
<input name="problem5" type="hidden" value="No" />
</div>
<div class="checkbox">
<label for="gc-rprt-prblm-f6">
<input type="checkbox" name="problem6" value="Yes" id="gc-rprt-prblm-f6" />Other issue not in this list
</label>
<input name="problem6" type="hidden" value="No" />
</div>
</fieldset>
<button type="submit" class="btn btn-primary wb-toggle" data-toggle='{"stateOff": "hide", "stateOn": "show", "selector": ".gc-rprt-prblm-tggl"}'>Submit</button>
</form>