Feedback area - Documentation

Status: Stable
Version: 5.0.0
Type: Canada.ca site functionality

Introduction

Purpose

Provide feedback on any given page through a form.

Evaluation and report

There is no evaluation and report available for this component.

Guidance

Variants

This component supports the following variants:

Page Feedback Tool (default)
Page Feedback Tool with contact link
Report a Problem (RAP)

Note

All variants are comprised of two sub-components:

The first one is used for the integration on the page.
The second one is the form which is inserted dynamically via an Ajax call. This sub-component is however out of scope of the API.

Variant 1: Page Feedback Tool (default) Provisional

Iteration 1

Working example(s)

Page feedback

How to implement

To show the page feedback form, create a <div class="wb-disable-allow"> with the following data attributes:
- Mandatory: data-ajax-replace="assets/page-feedback-en.html"
- Optional: data-feedback-theme="[Text defining the theme of your page]"
- Optional: data-feedback-section="[Text defining the section where your page resides]"
Additionally, your page needs to have the following metadata: <meta name="dcterms.creator" content="[Department name]">

For more information about Data Ajax plugin, please visit Data Ajax documentation page.

GCWeb Jekyll specific

To apply this variant's optional attributes on any given page, you will need to do the following in the page's front-matter:

Set the variable feedbackData to an object containing the following customizable strings:
- section: to define the section where your page resides.
- theme: to define the theme of your page.

For example:

"feedbackData": {
	"theme": "Theme",
	"section": "Section"
}

Code sample

<div class="wb-disable-allow" data-ajax-replace="assets/page-feedback-en.html"
	data-feedback-section="[Text defining the theme of your page]"
	data-feedback-theme="[Text defining the section where your page resides]"></div>

Ajaxed-in content

<div id="gc-pft" class="row wb-disable-allow" data-wb-jsonmanager='{
	"name": "gc-pft",
	"extractor": [
		{ "selector": "title", "path": "pageData/pageTitle" },
		{ "selector": "html", "attr": "lang", "path": "pageData/language" },
		{ "interface": "locationHref", "path": "pageData/submissionPage" },
		{ "selector": "#wb-lng ul li:first-child a[lang]", "attr": "href", "path": "pageData/oppositelang" },
		{ "selector": "[data-feedback-theme]", "attr": "data-feedback-theme", "path": "pageData/themeopt" },
		{ "selector": "[data-feedback-section]", "attr": "data-feedback-section", "path": "pageData/sectionopt" },
		{ "selector": "meta[name=\"dcterms.creator\"]", "attr": "content", "path": "pageData/institutionopt" },
		{ "selector": "[data-feedback-link]", "attr": "data-feedback-link", "path": "contact/link" },
		{ "selector": "[data-feedback-url]", "attr": "data-feedback-url", "path": "contact/url" }
	]
}'>
	<div class="col-sm-10 col-md-9 col-lg-8">
		<section class="well mrgn-bttm-0">
			<h3 class="wb-inv">Give feedback about this page</h3>
			<form action="https://feedback-retroaction.canada.ca/api/QueueProblemForm" method="post" class="wb-postback wb-disable-allow" data-wb-postback='{"success":".gc-pft-thnk"}'>
				<div class="wb-disable-allow" data-wb-json='{
					"url": "#[gc-pft]/pageData",
					"mapping": [
						{ "selector": "input", "attr": "name", "value": "/@id" },
						{ "selector": "input", "attr": "value", "value": "/@value" }
					]
				}'>
					<template>
						<input type="hidden" name="" value="" />
					</template>
				</div>
				<fieldset class="gc-pft-btns chkbxrdio-grp row row-no-gutters d-sm-flex flex-sm-wrap align-items-sm-center">
					<legend class="col-xs-12 col-sm-7 nojs-col-sm-12 col-md-9 col-lg-8 text-center text-sm-left nojs-text-left mrgn-tp-sm pr-sm-3"><span class="field-name">Did you find what you were looking for?</span></legend>
					<div class="col-xs-12 nojs-show">
						<button name="helpful" value="Yes-Oui" class="btn btn-primary" aria-describedby="gc-pft-why">Yes</button>
					</div>
					<div class="col-xs-12 col-sm-5 col-md-3 col-lg-4 text-center text-sm-right nojs-hide">
						<button name="helpful" value="Yes-Oui" class="btn btn-primary">Yes</button>
						<button class="btn btn-primary mrgn-lft-sm" data-wb-doaction='[
							{"action":"removeClass","source":".gc-pft-no","class":"nojs-show"},
							{"action":"addClass","source":".gc-pft-btns","class":"hide"}
						]'>No</button>
					</div>
				</fieldset>
				<div class="gc-pft-no nojs-show">
					<p id="gc-pft-why" class="nojs-show mrgn-tp-lg mrgn-bttm-md">If not, tell us why below:</p>
					<p class="nojs-hide wb-inv" aria-live="polite">Tell us why below:</p>
					<div class="wb-disable-allow"  data-wb-json='{
						"url": "#[gc-pft]/contact",
						"streamline": "true",
						"mapping": [
							{
								"template": "[data-contact-template]",
								"test": "fn:isLiteral",
								"assess": "/url",
								"mapping": [
									{ "selector": "a", "type": "attr", "attr": "href", "value": "/url"  },
									{ "selector": "a", "value": "/link"  }
								]
							}
						]
					}'>
						<template data-contact-template>
							<details>
								<summary>Need urgent help with a problem? Contact us</summary>
								<p class="mrgn-bttm-0 mrgn-tp-md fnt-nrml">
									<a href="#"></a>
								</p>
							</details>
						</template>
					</div>
					<div class="form-group">
						<label id="gc-pft-prblm-label" for="gc-pft-prblm" class="mrgn-bttm-0"><span class="field-name">Please provide more details</span></label>
						<p id="gc-pft-prblm-note" class="mrgn-bttm-sm"><small>You will not receive a reply. Don't include personal information (telephone, email, SIN, financial, medical, or work details).</small></p>
						<p id="gc-pft-prblm-instruction" class="fnt-nrml small">Maximum 300 characters</p>
						<textarea id="gc-pft-prblm" aria-describedby="gc-pft-prblm-note gc-pft-prblm-instruction" name="details" class="form-control full-width" maxlength="300"></textarea>
					</div>
					<button name="helpful" value="No-Non" class="btn btn-primary">Submit</button>
				</div>
			</form>
			<div class="gc-pft-thnk hide">
				<p class="mrgn-tp-sm mrgn-bttm-0" role="status"><span class="glyphicon glyphicon-ok text-success mrgn-rght-sm" aria-hidden="true"></span> Thank you for your feedback.</p>
			</div>
		</section>
	</div>
</div>

Variant 2: Page Feedback Tool With Contact Link Provisional

Iteration 1

Working example(s)

Page feedback tool with contact link

How to implement

To show the page feedback form, create a <div class="wb-disable-allow"> with the following data attributes:
- Mandatory: data-ajax-replace="assets/page-feedback-en.html"
- Mandatory: data-feedback-link="[Contact link text]"
- Mandatory: data-feedback-url="[Contact link URL]"
- Optional: data-feedback-theme="[Text defining the theme of your page]"
- Optional: data-feedback-section="[Text defining the section where your page resides]"
For the basic HTML version, a link element should be created inside your <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>.
Additionally, you can define the following metadata: <meta name="dcterms.creator" content="[Department name]">

For more information about Data Ajax plugin, please visit Data Ajax documentation page.

GCWeb Jekyll specific

To apply this variant on any given page, you will need to do the following in the page's front-matter:

Set the variable feedbackContact to an object containing the following customizable strings:
- link: to define the contact link's text.
- url: to define the contact link's URL.
Optionally, you can set the variable feedbackData to an object containing the following customizable strings:
- section: to define the section where your page resides.
- theme: to define the theme of your page.

For example:

"feedbackContact": {
	"link": "Contact link",
	"url": "https://canada.ca"
},
"feedbackData": {
	"theme": "Theme",
	"section": "Section"
}

Code sample

<div class="wb-disable-allow" data-ajax-replace="assets/page-feedback-en.html"
	data-feedback-link="[Contact link text]"
	data-feedback-url="[Contact link URL]"
	data-feedback-section="[Text defining the theme of your page]"
	data-feedback-theme="[Text defining the section where your page resides]"></div>

Ajaxed-in content

<div id="gc-pft" class="row wb-disable-allow" data-wb-jsonmanager='{
	"name": "gc-pft",
	"extractor": [
		{ "selector": "title", "path": "pageData/pageTitle" },
		{ "selector": "html", "attr": "lang", "path": "pageData/language" },
		{ "interface": "locationHref", "path": "pageData/submissionPage" },
		{ "selector": "#wb-lng ul li:first-child a[lang]", "attr": "href", "path": "pageData/oppositelang" },
		{ "selector": "[data-feedback-theme]", "attr": "data-feedback-theme", "path": "pageData/themeopt" },
		{ "selector": "[data-feedback-section]", "attr": "data-feedback-section", "path": "pageData/sectionopt" },
		{ "selector": "meta[name=\"dcterms.creator\"]", "attr": "content", "path": "pageData/institutionopt" },
		{ "selector": "[data-feedback-link]", "attr": "data-feedback-link", "path": "contact/link" },
		{ "selector": "[data-feedback-url]", "attr": "data-feedback-url", "path": "contact/url" }
	]
}'>
	<div class="col-sm-10 col-md-9 col-lg-8">
		<section class="well mrgn-bttm-0">
			<h3 class="wb-inv">Give feedback about this page</h3>
			<form action="https://feedback-retroaction.canada.ca/api/QueueProblemForm" method="post" class="wb-postback wb-disable-allow" data-wb-postback='{"success":".gc-pft-thnk"}'>
				<div class="wb-disable-allow" data-wb-json='{
					"url": "#[gc-pft]/pageData",
					"mapping": [
						{ "selector": "input", "attr": "name", "value": "/@id" },
						{ "selector": "input", "attr": "value", "value": "/@value" }
					]
				}'>
					<template>
						<input type="hidden" name="" value="" />
					</template>
				</div>
				<fieldset class="gc-pft-btns chkbxrdio-grp row row-no-gutters d-sm-flex flex-sm-wrap align-items-sm-center">
					<legend class="col-xs-12 col-sm-7 nojs-col-sm-12 col-md-9 col-lg-8 text-center text-sm-left nojs-text-left mrgn-tp-sm pr-sm-3"><span class="field-name">Did you find what you were looking for?</span></legend>
					<div class="col-xs-12 nojs-show">
						<button name="helpful" value="Yes-Oui" class="btn btn-primary" aria-describedby="gc-pft-why">Yes</button>
					</div>
					<div class="col-xs-12 col-sm-5 col-md-3 col-lg-4 text-center text-sm-right nojs-hide">
						<button name="helpful" value="Yes-Oui" class="btn btn-primary">Yes</button>
						<button class="btn btn-primary mrgn-lft-sm" data-wb-doaction='[
							{"action":"removeClass","source":".gc-pft-no","class":"nojs-show"},
							{"action":"addClass","source":".gc-pft-btns","class":"hide"}
						]'>No</button>
					</div>
				</fieldset>
				<div class="gc-pft-no nojs-show">
					<p id="gc-pft-why" class="nojs-show mrgn-tp-lg mrgn-bttm-md">If not, tell us why below:</p>
					<p class="nojs-hide wb-inv" aria-live="polite">Tell us why below:</p>
					<div class="wb-disable-allow"  data-wb-json='{
						"url": "#[gc-pft]/contact",
						"streamline": "true",
						"mapping": [
							{
								"template": "[data-contact-template]",
								"test": "fn:isLiteral",
								"assess": "/url",
								"mapping": [
									{ "selector": "a", "type": "attr", "attr": "href", "value": "/url"  },
									{ "selector": "a", "value": "/link"  }
								]
							}
						]
					}'>
						<template data-contact-template>
							<details>
								<summary>Need urgent help with a problem? Contact us</summary>
								<p class="mrgn-bttm-0 mrgn-tp-md fnt-nrml">
									<a href="#"></a>
								</p>
							</details>
						</template>
					</div>
					<div class="form-group">
						<label id="gc-pft-prblm-label" for="gc-pft-prblm" class="mrgn-bttm-0"><span class="field-name">Please provide more details</span></label>
						<p id="gc-pft-prblm-note" class="mrgn-bttm-sm"><small>You will not receive a reply. Don't include personal information (telephone, email, SIN, financial, medical, or work details).</small></p>
						<p id="gc-pft-prblm-instruction" class="fnt-nrml small">Maximum 300 characters</p>
						<textarea id="gc-pft-prblm" aria-describedby="gc-pft-prblm-note gc-pft-prblm-instruction" name="details" class="form-control full-width" maxlength="300"></textarea>
					</div>
					<button name="helpful" value="No-Non" class="btn btn-primary">Submit</button>
				</div>
			</form>
			<div class="gc-pft-thnk hide">
				<p class="mrgn-tp-sm mrgn-bttm-0" role="status"><span class="glyphicon glyphicon-ok text-success mrgn-rght-sm" aria-hidden="true"></span> Thank you for your feedback.</p>
			</div>
		</section>
	</div>
</div>

Variant 3: Report a Problem (RAP) Stable

Iteration 5

Here is a list of changes that happened since the previous iteration:

Breaking	Removed JSON Manager extraction for "externalReferer" and "subject".
Additions	Added static hidden inputs for "externalReferer" and "subject"
Fixes	n/a

Working example(s)

Report a problem

How to implement

To show the Report a problem 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.

Adobe Analytics implementation

To implement Adobe Analytics in the Report a problem form, simply add the attribute data-gc-analytics-rap to every checkbox with the value being the same as the current language's label, followed by a dash and followed by the other language's label.

For example:

<div class="checkbox">
	<label for="problem2">
		<input name="problem2" id="problem2" type="checkbox" value="Yes" data-gc-analytics-rap="It has a spelling mistake-Il y a une erreur d'orthographe ou de grammaire">It has a spelling mistake
	</label>
	<input name="problem2" type="hidden" value="">
</div>

Hidden input fields

The Report a problem variant leverages JSON Manager and Data JSON to get information about the page and generate hidden input fields in the form.

The following tag needs to be present in the page: <meta name="dcterms.creator" content="[Department name]">
Where [Department name] is a department name from canada.ca controlled vocabulary, for example: gc:institutions/service-canada

GCWeb Jekyll specific

To apply this variant on any given page, you will need to do the following in the page's front-matter or in the site configurations (_config.yml):

set the variable feedbackPath to "ajax/report-problem-en.html".
set the variable feedbackFallback to true.

Code sample

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

Ajaxed-in content

<div class="row row-no-gutters">
	<div class="col-sm-9 col-md-6 col-lg-5">
		<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">
						<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"}'
							data-wb-jsonmanager='{
								"name": "rap",
								"extractor": [
									{ "selector": "title", "path": "pageTitle" },
									{ "interface": "locationHref", "path": "submissionPage" },
									{ "selector": "html", "attr": "lang", "path": "lang" },
									{ "selector": "meta[name=\"dcterms.creator\"]", "attr": "content", "path": "pageOwner" }
								]
							}'>
							<div data-wb-json='{
								"url": "#[rap]",
								"mapping": [
									{ "selector": "input", "attr": "name", "value": "/@id" },
									{ "selector": "input", "attr": "value", "value": "/@value" }
								]
							}'>
								<template>
									<input type="hidden" name="" value="" />
								</template>
							</div>
							<input type="hidden" name="externalReferer" value="">
							<input type="hidden" name="subject" value="Report a problem or mistake on this page">
							<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
									</label>
									<input name="problem5" type="hidden" value="">
								</div>
								<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>
							<button type="submit" class="btn btn-primary">Submit</button>
						</form>
					</div>
					<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>
				</div>
			</div>
		</details>
	</div>
</div>

Previous iterations

Iteration 4

Here is a list of changes that happened since the previous iteration:

Breaking	Leveraging JSON Manager Extractor and Data JSON to generate hidden input fields
Additions	n/a
Fixes	n/a

Code sample

<div data-ajax-replace="ajax/report-problem-v4-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>

Ajaxed-in content

<div class="row row-no-gutters">
	<div class="col-sm-9 col-md-6 col-lg-5">
		<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">
						<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"}'
							data-wb-jsonmanager='{
								"name": "rap",
								"extractor": [
									{ "interface": "referer", "path": "externalReferer" },
									{ "selector": "title", "path": "pageTitle" },
									{ "interface": "locationHref", "path": "submissionPage" },
									{ "selector": "html", "attr": "lang", "path": "lang" },
									{ "selector": "meta[name=\"dcterms.creator\"]", "attr": "content", "path": "pageOwner" },
									{ "selector": "meta[name=\"dcterms.subject\"]", "attr": "content", "path": "subject" }
								]
							}'>
							<div data-wb-json='{
								"url": "#[rap]",
								"mapping": [
									{ "selector": "input", "attr": "name", "value": "/@id" },
									{ "selector": "input", "attr": "value", "value": "/@value" }
								]
							}'>
								<template>
									<input type="hidden" name="" value="" />
								</template>
							</div>
							<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
									</label>
									<input name="problem5" type="hidden" value="">
								</div>
								<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>
							<button type="submit" class="btn btn-primary">Submit</button>
						</form>
					</div>
					<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>
				</div>
			</div>
		</details>
	</div>
</div>

Iteration 3

Here is a list of changes that happened since the previous iteration:

Breaking	Removed login error sub-options. Renamed login error option.
Additions	n/a
Fixes	n/a

Code sample

<div data-ajax-replace="ajax/report-problem-v3-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>

Ajaxed-in content

<div class="row row-no-gutters"><div class="col-sm-9 col-md-6 col-lg-5">
	<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">
					<form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback" data-wb-postback="{&quot;success&quot;:&quot;.success-message&quot;,&quot;failure&quot;:&quot;.failure-message&quot;}" >
						<!--

						Insert the form submission configuration here

						-->
						<input type="hidden" name="externalReferer" value="">
						<input type="hidden" name="pageTitle" value=""> <!-- Copy of the title of the page -->
						<input type="hidden" name="submissionPage" value=""> <!-- Copy of the page URL -->
						<input type="hidden" name="lang" value="en">
						<input type="hidden" name="pageOwner" value="gc:institutions/"> <!-- Department name from canada.ca controlled vocabulary -->
						<input name="subject" type="hidden" value="Report a problem or mistake on this page">
						<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
								</label>
								<input name="problem5" type="hidden" value="">
							</div>
							<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>
						<button type="submit" class="btn btn-primary">Submit</button>
					</form>
				</div>
				<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>
			</div>
		</div>
	</details>
</div></div>

Iteration 2

Here is a list of changes that happened since the previous iteration:

Breaking	Rework of the template to use data-ajax. Includes fallback for basic HTML version. Updated form: Now implements wb-postback for form validation and no longer uses data-toggle on submit. Added login error options (problem 5 to problem 10). Added error and success messages.
Additions	n/a
Fixes	n/a

Code sample

<div data-ajax-replace="ajax/report-problem-v2-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>

Ajaxed-in content

<div class="row row-no-gutters">
	<div class="col-sm-9 col-md-6 col-lg-5">
		<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">
						<form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback" data-wb-postback="{&quot;success&quot;:&quot;.success-message&quot;,&quot;failure&quot;:&quot;.failure-message&quot;}">
							<!-- Insert the form submission configuration here -->
							<input type="hidden" name="externalReferer" value="">
							<input type="hidden" name="pageTitle" value=""> <!-- Copy of the title of the page -->
							<input type="hidden" name="submissionPage" value=""> <!-- Copy of the page URL -->
							<input type="hidden" name="lang" value="en">
							<input type="hidden" name="pageOwner" value="gc:institutions/"> <!-- Department name from canada.ca controlled vocabulary -->
							<input name="subject" type="hidden" value="Report a problem or mistake on this page">
							<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>
							<button type="submit" class="btn btn-primary">Submit</button>
						</form>
					</div>
					<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>
				</div>
			</div>
		</details>
	</div>
</div>

Iteration 1

Code sample

<div class="row row-no-gutters">
	<div class="col-sm-9 col-md-6 col-lg-5">
		<details class="brdr-0">
			<summary class="btn btn-default text-center">Report a problem on this page</summary>
			<div class="gc-rprt-prblm">
				<div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl">
					<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>
				</div>
				<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl 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>
			</div>
		</details>
	</div>
</div>

Page details

Date modified:: 2023-01-10

Language selection

Search

Feedback area - Documentation

Introduction

Purpose

Evaluation and report

Guidance

Variants

Note

Variant 1: Page Feedback Tool (default) Provisional

Iteration 1

Working example(s)

How to implement

GCWeb Jekyll specific

Code sample

Variant 2: Page Feedback Tool With Contact Link Provisional

Iteration 1

Working example(s)

How to implement

GCWeb Jekyll specific

Code sample

Variant 3: Report a Problem (RAP) Stable

Iteration 5

Working example(s)

How to implement

Hidden input fields

GCWeb Jekyll specific

Code sample

Previous iterations

Code sample

Code sample

Code sample

Code sample

Page details