From 529715dce984ff7e8c7b84bdc6526899ebdf6e48 Mon Sep 17 00:00:00 2001
From: Eric Dunsworth <1907279+EricDunsworth@users.noreply.github.com>
Date: Tue, 6 Dec 2022 11:21:43 -0500
Subject: [PATCH 1/2] Page feedback tool: Revamp

General:
* Rename "page success widget" to "page feedback tool"
* Turn it into a site component

Jekyll:
* Change the tool into an include
* Use sub-includes for parameter/string variable declarations
* Add a pageFeedback variable to enable the tool in page templates
* Add pageFeedback sub-variables to optionally override the default values of the tool's form parameters:
  * institutionopt
  * themeopt
  * sectionopt
  * pageTitle (true re-uses the current page's title, without " - Canada.ca")
  * language (true re-uses the current page's language)
  * submissionPage (true re-uses the current page's URL)
* Update the page details footer include to accommodate the tool:
  * Declare col-modified = "col-xs-12" only once at the beginning of variable assignments
  * Support pageFeedback and prioritize it over report a problem
  * Make pageFeedback take priority over noReportProblem (i.e. setting former to true and latter to false will show the page feedback tool)

SCSS:
* Add new classes (tied to the gc-pft class):
  * nojs-col-sm-12
  * nojs-pr-sm-0
  * nojs-text-left
* Increase the share widget's top margin to make it look vertically-centered when used alongside the tool in small/medium view and over
  * Depends on the has() pseudo-class

HTML:
* Rename the gc-pg-hlpfl id/class prefix to gc-pft
* Rename the gc-pg-hlpfl-btn class to gc-pft-btns ("s" suffix)
* Use a fieldset for "Did you find what you were looking for?" and its yes/no buttons
* Change "Did you find what you were looking for?" into a legend
* Improve layout:
  * Remove heading classes
  * Use form classes (i.e. chkbxrdio-grp, field-name and form-group)
  * Increase spacing between groups of content
  * Move the details field's secondary information paragraph below the field
  * JS mode:
    * Center-align "Did you find what you were looking for?" in extra-small view
    * Vertically-center "Did you find what you were looking for?" and yes/no buttons in small view and over
  * Noscript/Basic HTML mode:
    * Position the yes button directly below "Did you find what you were looking for?" in all views
* Use aria-live regions to announce transition messages to screen reader users:
  * "Tell us why below:" upon pressing the no button
  * "Thank you for your feedback." upon pressing the yes button or submitting the no button's questionnaire
* Add aria-describedby attributes to:
  * Programmatically-associate the yes button to the "If not, tell us why below:" paragraph in noscript/basic HTML mode (to make screen readers announce the no button's instructions right after the yes button)
  * Programmatically-associate the secondary information paragraph to the more details field

Content:
* Add a visually-hidden "Page feedback" H3 heading
* Add a period to the end of "Thank you for your feedback"
* Add "below" to the end of "If not, tell us why:" in noscript/basic HTML mode
* Add a visually-hidden "Tell us why below:" paragraph in JS mode
* Combine "Please provide more details" and "Maximum 300 characters" into the same label
* Write all values in an "EN-FR" format, derived from labels

Demo pages:
* Add a standard demo page (pageFeedback enabled)
* Add a custom demo page (pageFeedback with sub-variables)

Provisional functionality page:
* Portray the widget as stable in the feature availability table
* Remove "page success widget" section/example

Co-authored-by: David Elisma <david.elisma@tbs-sct.gc.ca>
---
 _data/sites.json                              |  44 +++++++
 .../gc-page-feedback/gc-page-feedback.html    |  12 ++
 _includes/page-details/footer.html            |  45 +++++++
 components/provisional-en.html                |  90 ++-----------
 components/provisional-fr.html                |  91 ++-----------
 sites/gc-page-feedback/_base.scss             |  24 ++++
 sites/gc-page-feedback/_print.scss            |   7 +
 sites/gc-page-feedback/_screen-sm-min.scss    |  14 ++
 .../gc-page-feedback-custom-en.html           |  29 +++++
 .../gc-page-feedback-custom-fr.html           |  29 +++++
 .../gc-page-feedback/gc-page-feedback-en.html |  23 ++++
 .../gc-page-feedback/gc-page-feedback-fr.html |  23 ++++
 sites/gc-page-feedback/includes/css.html      | 121 ++++++++++++++++++
 .../includes/gc-page-feedback.html            |  62 +++++++++
 .../includes/parameters.liquid                |  57 +++++++++
 .../gc-page-feedback/includes/strings.liquid  |  58 +++++++++
 sites/gc-page-feedback/index.json-ld          |  44 +++++++
 sites/page-details/_base.scss                 |  14 +-
 sites/page-details/_screen-md-min.scss        |  16 +++
 sites/page-details/_screen-sm-min.scss        |  16 +++
 sites/page-details/includes/footer.html       |  26 ++--
 sites/theme.scss                              |   5 +
 22 files changed, 671 insertions(+), 179 deletions(-)
 create mode 100644 _includes/gc-page-feedback/gc-page-feedback.html
 create mode 100644 _includes/page-details/footer.html
 create mode 100644 sites/gc-page-feedback/_base.scss
 create mode 100644 sites/gc-page-feedback/_print.scss
 create mode 100644 sites/gc-page-feedback/_screen-sm-min.scss
 create mode 100644 sites/gc-page-feedback/gc-page-feedback-custom-en.html
 create mode 100644 sites/gc-page-feedback/gc-page-feedback-custom-fr.html
 create mode 100644 sites/gc-page-feedback/gc-page-feedback-en.html
 create mode 100644 sites/gc-page-feedback/gc-page-feedback-fr.html
 create mode 100644 sites/gc-page-feedback/includes/css.html
 create mode 100644 sites/gc-page-feedback/includes/gc-page-feedback.html
 create mode 100644 sites/gc-page-feedback/includes/parameters.liquid
 create mode 100644 sites/gc-page-feedback/includes/strings.liquid
 create mode 100644 sites/gc-page-feedback/index.json-ld
 create mode 100644 sites/page-details/_screen-md-min.scss
 create mode 100644 sites/page-details/_screen-sm-min.scss

diff --git a/_data/sites.json b/_data/sites.json
index 1936294d9..9836b9390 100644
--- a/_data/sites.json
+++ b/_data/sites.json
@@ -354,6 +354,50 @@
 		]
 	}
 }
+,{
+	"@context": {
+		"@version": 1.1,
+		"dct": "http://purl.org/dc/terms/",
+		"title": { "@id": "dct:title", "@container": "@language" },
+		"description": { "@id": "dct:description", "@container": "@language" },
+		"modified": "dct:modified"
+	},
+	"title": {
+		"en": "Page feedback tool",
+		"fr": "Outil de rétroaction sur la page"
+	},
+	"description": {
+		"en": "Page feedback tool for Canada.ca",
+		"fr": "Outil de rétroaction sur la page pour Canada.ca"
+	},
+	"modified": "2022-12-06",
+	"componentName": "gc-page-feedback",
+	"status": "stable",
+	"pages": {
+		"examples": [
+			{
+				"title": "Page feedback tool",
+				"language": "en",
+				"path": "gc-page-feedback-en.html"
+			},
+			{
+				"title": "Outil de rétroaction sur la page",
+				"language": "fr",
+				"path": "gc-page-feedback-fr.html"
+			},
+			{
+				"title": "Page feedback tool with custom parameters",
+				"language": "en",
+				"path": "gc-page-feedback-custom-en.html"
+			},
+			{
+				"title": "Outil de rétroaction sur la page avec paramètres personnalisés",
+				"language": "fr",
+				"path": "gc-page-feedback-custom-fr.html"
+			}
+		]
+	}
+}
 ,{
 	"@context": {
 		"@version": 2.0,
diff --git a/_includes/gc-page-feedback/gc-page-feedback.html b/_includes/gc-page-feedback/gc-page-feedback.html
new file mode 100644
index 000000000..d614cd7e3
--- /dev/null
+++ b/_includes/gc-page-feedback/gc-page-feedback.html
@@ -0,0 +1,12 @@
+<!--
+NOTES:
+-For testing/ease of development
+-Only works when pageDetails is enabled in "/sites/gc-page-feedback/*.html"
+-Remove this file before merging
+-->
+{%- if page.dir == "/sites/gc-page-feedback/" -%}
+	{%- include_relative includes/css.html -%}
+	{%- include_relative includes/gc-page-feedback.html -%}
+{%- else -%}
+	<p><strong>Error:</strong> The page feedback tool only can only be activated in pages located at "sites/gc-page-feedback/*.html".</p>
+{%- endif -%}
diff --git a/_includes/page-details/footer.html b/_includes/page-details/footer.html
new file mode 100644
index 000000000..cad6a7932
--- /dev/null
+++ b/_includes/page-details/footer.html
@@ -0,0 +1,45 @@
+<!--
+NOTES:
+-For testing/ease of development
+-Remove this file before merging
+-->
+<footer class="pagedetails{% if include.addContainer %} container{% endif %}">
+	<h2 class="wb-inv">{{ i18nText-pageDetails }}</h2>
+
+	{% assign col-modified = "col-xs-12" %}
+	{%- if page.pageFeedback or page.noReportProblem != true -%}
+		{% assign col-feedback = "col-sm-8 col-md-9 col-lg-9" %}
+		{%- if page.share -%}
+			{% assign col-share = "col-sm-4 col-md-3" %}
+		{%- endif -%}
+	{%- else -%}
+		{%- if page.share -%}
+			{% assign col-share = "col-sm-4 col-md-3 col-sm-push-8 col-md-push-9" %}
+			{% assign col-modified = "col-sm-6 col-md-5 col-lg-4 col-sm-pull-4 col-md-pull-3" %}
+		{%- endif -%}
+	{%- endif -%}
+
+	<div class="row">
+		{%- if page.pageFeedback or page.noReportProblem != true -%}
+			<div class="{{ col-feedback }}">
+				{%- if page.pageFeedback -%}
+					{% include gc-page-feedback/gc-page-feedback.html %}
+				{%- else -%}
+					{%- unless page.noReportProblem -%}
+						{% include feedback/feedback.html %}
+					{%- endunless -%}
+				{%- endif -%}
+			</div>
+		{%- endif -%}
+		{%- if page.share -%}
+			<div class="wb-share {{ col-share }}" data-wb-share='{"lnkClass": "btn btn-default btn-block"}'></div>
+		{%- endif -%}
+
+		<div class="{{ col-modified }}">
+			<dl id="wb-dtmd">
+				<dt>{{ i18nText-dateModified }}</dt>
+				<dd><time property="dateModified">{{ page.dateModified }}</time></dd>
+			</dl>
+		</div>
+	</div>
+</footer>
diff --git a/components/provisional-en.html b/components/provisional-en.html
index 60511cbec..6ee0430af 100644
--- a/components/provisional-en.html
+++ b/components/provisional-en.html
@@ -7,7 +7,7 @@
 		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/themes-dist/GCWeb/index-en.html" }
 	],
 	"secondlevel": false,
-	"dateModified": "2021-01-19",
+	"dateModified": "2022-12-06",
 	"share": "true"
 }
 ---
@@ -93,9 +93,16 @@ <h3>Provisional feature removal first notice</h3>
 	</tr>
 	<tr>
 		<th>Template <code>.gc-pg-hlpfl</code></th>
-		<td>"Page success widget" design pattern to let users share their experience on the page.</td>
+		<td>
+			<p>"Page success widget" design pattern to let users share their experience on the page.</p>
+			<p>Feature has been revised and renamed to "page feedback tool" (<code>.gc-pft</code>):</p>
+			<ul>
+				<li><a href="../sites/gc-page-feedback/gc-page-feedback-en.html">Page feedback tool - Canada.ca site functionality</a></li>
+				<li><a href="../sites/gc-page-feedback/gc-page-feedback-custom-en.html">Page feedback tool with custom parameters - Canada.ca site functionality</a></li>
+			</ul>
+		</td>
 		<td>v7.0</td>
-		<td></td>
+		<td>Stable (vX.X.X) (TODO)</td>
 	</tr>
 	<tr>
 		<th>Plugin <code>.wb-chtwzrd</code></th>
@@ -402,80 +409,3 @@ <h3 id="icon-warning">Icon warning color</h3>
 		<span class="glyphicon glyphicon-warning-sign provisional icon-warning-light mrgn-rght-md"></span> With "provisional icon-warning-light" class
 	</p>
 </div>
-<h3 id="gc-pg-hlpfl">Page success widget</h3>
-<p>Planned to eventually replace Report a problem. Uses multiple features: <code>wb-postback</code> and <code>data-wb-doaction</code> plugins, as well as <code>nojs-*</code> styles and Font Awesome.</p>
-<div class="row row-no-gutters mrgn-tp-xl">
-	<div class="col-sm-7 col-lg-6">
-		<section class="provisional gc-pg-hlpfl">
-			<div class="well mrgn-bttm-0">
-				<form id="gc-pg-hlpfl-frm" action="index-en.html" method="post" autocomplete="off" class="provisional wb-postback" data-wb-postback="{&quot;success&quot;:&quot;.gc-pg-hlpfl-thnk&quot;,&quot;content&quot;:&quot;#gc-pg-hlpfl-frm&quot;}">
-					<input type="hidden" name="pageTitle" value="Provisional functionality - GCWeb theme">
-					<input type="hidden" name="submissionPage" value="https://wet-boew.github.io/themes-dist/GCWeb/provisional-en.html">
-					<input type="hidden" name="tid" value="1234">
-					<input type="hidden" name="auke" value="5678">
-					<div class="gc-pg-hlpfl-btn">
-						<div class="row row-no-gutters">
-							<div class="col-xs-12 col-sm-7 mrgn-tp-sm">
-								<h2 class="mrgn-tp-sm h5">Did you find what you were looking for?</h2>
-							</div>
-							<div class="col-xs-8 col-sm-5 text-right">
-								<button type="submit" name="helpful" value="Yes" class="btn btn-primary">Yes</button>
-								<button type="button" class="btn btn-primary mrgn-lft-sm nojs-hide" data-wb-doaction="[
-									{&quot;action&quot;:&quot;removeClass&quot;,&quot;source&quot;:&quot;.gc-pg-hlpfl-no&quot;,&quot;class&quot;:&quot;nojs-show&quot;},
-									{&quot;action&quot;:&quot;addClass&quot;,&quot;source&quot;:&quot;.gc-pg-hlpfl-btn&quot;,&quot;class&quot;:&quot;hide&quot;}
-								]">No</button>
-							</div>
-						</div>
-					</div>
-					<p class="h3 hidden nojs-show">If not, tell us why:</p>
-					<div class="gc-pg-hlpfl-no nojs-show">
-						<fieldset>
-							<legend class="h4 mrgn-tp-0 mrgn-bttm-md">What was wrong?</legend>
-							<div class="radio">
-								<label>
-									<input name="problem" id="problem01" type="radio" value="The answer I need is missing">
-									The answer I need is missing
-								</label>
-							</div>
-							<div class="radio">
-								<label>
-									<input name="problem" id="problem02" type="radio" value="The information isn’t clear">
-									The information isn’t clear
-								</label>
-							</div>
-							<div class="radio">
-								<label>
-									<input name="problem" id="problem03" type="radio" value="I’m not in the right place">
-									I’m not in the right place
-								</label>
-							</div>
-							<div class="radio">
-								<label>
-									<input name="problem" id="problem04" type="radio" value="Something is broken or incorrect">
-									Something is broken or incorrect
-								</label>
-							</div>
-							<div class="radio">
-								<label>
-									<input name="problem" id="problem05" type="radio" value="Other reason">
-									Other reason
-								</label>
-							</div>
-						</fieldset>
-						<label for="problem06">Please provide more details</label>
-						<p class="small">
-							<strong>(Don’t include any personal information)</strong>
-							<br>
-							<span class="small">Maximum 300 characters</span>
-						</p>
-						<textarea name="details" id="problem06" class="full-width" maxlength="300"></textarea>
-						<button type="submit" name="helpful" value="No" class="btn btn-primary mrgn-tp-md mrgn-bttm-sm">Submit</button>
-					</div>
-				</form>
-				<div class="gc-pg-hlpfl-thnk hide">
-					<p class="h6 mrgn-tp-sm mrgn-bttm-sm"><span class="far fa-check-circle text-success mrgn-rght-sm" aria-hidden="true"></span> Thank you for your feedback</p>
-				</div>
-			</div>
-		</section>
-	</div>
-</div>
diff --git a/components/provisional-fr.html b/components/provisional-fr.html
index 253deb5b9..5f95f0a38 100644
--- a/components/provisional-fr.html
+++ b/components/provisional-fr.html
@@ -7,7 +7,7 @@
 		{ "title": "Accueil GCWeb", "link": "https://wet-boew.github.io/themes-dist/GCWeb/index-fr.html" }
 	],
 	"secondlevel": false,
-	"dateModified": "2021-01-19",
+	"dateModified": "2022-12-06",
 	"share": "true"
 }
 ---
@@ -95,9 +95,16 @@ <h3>Provisional feature removal first notice</h3>
 		</tr>
 		<tr>
 			<th>Gabarit <code>.gc-pg-hlpfl</code></th>
-			<td>"Widget succès de page" configuration de conception pour laisser les utilisateurs partager leur expérience sur la page.</td>
+			<td>
+				<p>"Widget succès de page" configuration de conception pour laisser les utilisateurs partager leur expérience sur la page.</p>
+				<p>Cette fonctionnalité a été révisée et renommée «&nbsp;outil de rétroaction sur la page&nbsp;» (<code>.gc-pft</code>)&nbsp;:</p>
+				<ul>
+					<li><a href="../sites/gc-page-feedback/gc-page-feedback-fr.html">Outil de rétroaction sur la page - Fonctionnalité du site Canada.ca</a></li>
+					<li><a href="../sites/gc-page-feedback/gc-page-feedback-custom-fr.html">Outil de rétroaction sur la page avec paramètres personnalisés - Fonctionnalité du site Canada.ca</a></li>
+				</ul>
+			</td>
 			<td>v7.0</td>
-			<td></td>
+			<td>Stable (vX.X.X) (TODO)</td>
 		</tr>
 		<tr>
 			<th>Plugin <code>.wb-chtwzrd</code></th>
@@ -408,81 +415,3 @@ <h3 id="#icon-warning">Icon warning color</h3>
 		</p>
 	</div>
 </div>
-<h3 id="gc-pg-hlpfl">Widget succès de page</h3>
-<p>Est prévu pour remplacer Signaler un problème ou une erreur sur cette page éventuellement. Utilises plusieurs fonctionnalités&nbsp;: les plugiciels <code>wb-postback</code> et <code>data-wb-doaction</code>, ainsi que les styles <code>nojs-*</code> puis Font Awesome.</p>
-<div class="row row-no-gutters mrgn-tp-xl">
-	<div class="col-sm-7 col-lg-6">
-		<section class="provisional gc-pg-hlpfl">
-			<div class="well mrgn-bttm-0">
-				<form id="gc-pg-hlpfl-frm" action="index-fr.html" method="get" autocomplete="off" class="provisional wb-postback" data-wb-postback="{&quot;success&quot;:&quot;.gc-pg-hlpfl-thnk&quot;,&quot;content&quot;:&quot;#gc-pg-hlpfl-frm&quot;}">
-					<input type="hidden" name="pageTitle" value="Fonctionalités provisoires - Thème de GCWeb">
-					<input type="hidden" name="submissionPage" value="https://wet-boew.github.io/themes-dist/GCWeb/provisional-fr.html">
-					<input type="hidden" name="tid" value="1234">
-					<input type="hidden" name="auke" value="5678">
-					<div class="gc-pg-hlpfl-btn">
-						<div class="row row-no-gutters">
-							<div class="col-xs-12 col-sm-7 mrgn-tp-sm">
-								<h2 class="mrgn-tp-sm h5">Avez-vous trouvé ce que vous cherchiez?</h2>
-							</div>
-							<div class="col-xs-8 col-sm-5 text-right">
-								<button type="submit" name="helpful" value="Yes" class="btn btn-primary">Oui</button>
-								<button type="button" class="btn btn-primary mrgn-lft-sm nojs-hide" data-wb-doaction="[
-									{&quot;action&quot;:&quot;removeClass&quot;,&quot;source&quot;:&quot;.gc-pg-hlpfl-no&quot;,&quot;class&quot;:&quot;nojs-show&quot;},
-									{&quot;action&quot;:&quot;addClass&quot;,&quot;source&quot;:&quot;.gc-pg-hlpfl-btn&quot;,&quot;class&quot;:&quot;hide&quot;}
-								]">Non</button>
-							</div>
-						</div>
-					</div>
-					<p class="h3 hidden nojs-show">Sinon, dites nous pourquoi&nbsp;:</p>
-					<div class="gc-pg-hlpfl-no nojs-show">
-						<fieldset>
-							<legend class="h4 mrgn-tp-0 mrgn-bttm-md">Qu’est-ce qui n’allait pas?</legend>
-							<div class="radio">
-								<label>
-									<input name="problem" id="problem01" type="radio" value="I can’t find what I’m looking for">
-									La réponse dont j’ai besoin n’est pas là
-								</label>
-							</div>
-							<div class="radio">
-								<label>
-									<input name="problem" id="problem02" type="radio" value="The information isn’t clear">
-									L'information n'est pas claire
-								</label>
-							</div>
-							<div class="radio">
-								<label>
-									<input name="problem" id="problem03" type="radio" value="I’m not in the right place">
-									Je ne suis pas au bon endroit
-								</label>
-							</div>
-							<div class="radio">
-								<label>
-									<input name="problem" id="problem04" type="radio" value="Something is broken or incorrect">
-									Quelque chose est brisé ou incorrect
-								</label>
-							</div>
-							<div class="radio">
-								<label>
-									<input name="problem" id="problem05" type="radio" value="Other reason">
-									Autre raison
-								</label>
-							</div>
-						</fieldset>
-						<label for="problem06">Veuillez fournir plus de détails</label>
-						<p class="small">
-							<strong>(N’incluez pas d’information personnelle)</strong>
-							<br>
-							<span class="small">Maximum de 300 caractères</span>
-						</p>
-						<textarea name="details" id="problem06" class="full-width" maxlength="300"></textarea>
-						<br>
-						<button type="submit" name="helpful" value="No" class="btn btn-primary mrgn-tp-md mrgn-bttm-sm">Soumettre</button>
-					</div>
-				</form>
-				<div class="gc-pg-hlpfl-thnk hide">
-					<p class="h6 mrgn-tp-sm mrgn-bttm-sm"><span class="far fa-check-circle text-success mrgn-rght-sm" aria-hidden="true"></span> Merci de vos commentaires</p>
-				</div>
-			</div>
-		</section>
-	</div>
-</div>
diff --git a/sites/gc-page-feedback/_base.scss b/sites/gc-page-feedback/_base.scss
new file mode 100644
index 000000000..10692aba5
--- /dev/null
+++ b/sites/gc-page-feedback/_base.scss
@@ -0,0 +1,24 @@
+/*
+  @title: Page feedback tool - Base
+ */
+
+/* In noscript/basic HTML mode... */
+.no-js,
+.wb-disable {
+	.gc-pft {
+		/* Disable row gutters (default selector isn't specific-enough) */
+		.row-no-gutters {
+			@extend .row-no-gutters;
+		}
+
+		/* Make the legend full width */
+		.nojs-col-sm-12 {
+			@extend .col-sm-12;
+		}
+
+		/* Left-align the legend and yes/no buttons */
+		.nojs-text-left {
+			text-align: left;
+		}
+	}
+}
diff --git a/sites/gc-page-feedback/_print.scss b/sites/gc-page-feedback/_print.scss
new file mode 100644
index 000000000..5f9c4031d
--- /dev/null
+++ b/sites/gc-page-feedback/_print.scss
@@ -0,0 +1,7 @@
+/*
+  @title: Page feedback tool - Print view
+ */
+
+.gc-pft {
+	@extend %gcweb-print-display-none-important;
+}
diff --git a/sites/gc-page-feedback/_screen-sm-min.scss b/sites/gc-page-feedback/_screen-sm-min.scss
new file mode 100644
index 000000000..72627320f
--- /dev/null
+++ b/sites/gc-page-feedback/_screen-sm-min.scss
@@ -0,0 +1,14 @@
+/*
+  @title: Page feedback tool - Small view and over
+ */
+
+/* In noscript/basic HTML mode... */
+.no-js,
+.wb-disable {
+	.gc-pft {
+		/* Disable the legend's right padding */
+		.nojs-pr-sm-0 {
+			padding-right: 0 !important;
+		}
+	}
+}
diff --git a/sites/gc-page-feedback/gc-page-feedback-custom-en.html b/sites/gc-page-feedback/gc-page-feedback-custom-en.html
new file mode 100644
index 000000000..00b0b2f1e
--- /dev/null
+++ b/sites/gc-page-feedback/gc-page-feedback-custom-en.html
@@ -0,0 +1,29 @@
+---
+{
+	"altLangPage": "gc-page-feedback-custom-fr.html",
+	"breadcrumbs": [
+		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }
+	],
+	"css": ["https://use.fontawesome.com/releases/v5.15.4/css/all.css"],
+	"dateModified": "2022-12-06",
+	"description": "Page feedback tool for Canada.ca",
+	"language": "en",
+	"title": "Page feedback tool with custom parameters",
+	"pageFeedback": {
+		"institutionopt": "Custom institution",
+		"themeopt": "Custom theme",
+		"sectionopt": "Custom section",
+		"pageTitle": "true",
+		"language": "true",
+		"submissionPage": "true"
+	}
+}
+---
+<div class="wb-prettify all-pre hide"></div>
+
+<h2>HTML code</h2>
+{%- comment -%} Manually-included variable-core.liquid so that gc-page-feedback.html's code sample can use the i18nText-lang variable {%- endcomment -%}
+{% include variable-core.liquid %}
+{% highlight text %}
+{% include_relative includes/gc-page-feedback.html %}
+{% endhighlight %}
diff --git a/sites/gc-page-feedback/gc-page-feedback-custom-fr.html b/sites/gc-page-feedback/gc-page-feedback-custom-fr.html
new file mode 100644
index 000000000..e2b493dc3
--- /dev/null
+++ b/sites/gc-page-feedback/gc-page-feedback-custom-fr.html
@@ -0,0 +1,29 @@
+---
+{
+	"altLangPage": "gc-page-feedback-custom-en.html",
+	"breadcrumbs": [
+		{ "title": "Accueil GCWeb", "link": "https://wet-boew.github.io/GCWeb/index-fr.html" }
+	],
+	"css": ["https://use.fontawesome.com/releases/v5.15.4/css/all.css"],
+	"dateModified": "2022-12-06",
+	"description": "Outil de rétroaction sur la page pour Canada.ca",
+	"language": "fr",
+	"title": "Outil de rétroaction sur la page avec paramètres personnalisés",
+	"pageFeedback": {
+		"institutionopt": "Institution personnalisée",
+		"themeopt": "Thème personnalisé",
+		"sectionopt": "Section personnalisée",
+		"pageTitle": "true",
+		"language": "true",
+		"submissionPage": "true"
+	}
+}
+---
+<div class="wb-prettify all-pre hide"></div>
+
+<h2>Code HTML</h2>
+{%- comment -%} Manually-included variable-core.liquid so that gc-page-feedback.html's code sample can use the i18nText-lang variable {%- endcomment -%}
+{% include variable-core.liquid %}
+{% highlight text %}
+{% include_relative includes/gc-page-feedback.html %}
+{% endhighlight %}
diff --git a/sites/gc-page-feedback/gc-page-feedback-en.html b/sites/gc-page-feedback/gc-page-feedback-en.html
new file mode 100644
index 000000000..7bebd0b85
--- /dev/null
+++ b/sites/gc-page-feedback/gc-page-feedback-en.html
@@ -0,0 +1,23 @@
+---
+{
+	"altLangPage": "gc-page-feedback-fr.html",
+	"breadcrumbs": [
+		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }
+	],
+	"css": ["https://use.fontawesome.com/releases/v5.15.4/css/all.css"],
+	"dateModified": "2022-12-06",
+	"description": "Page feedback tool for Canada.ca",
+	"language": "en",
+	"title": "Page feedback tool",
+	"pageFeedback": "true",
+	"share": "true"
+}
+---
+<div class="wb-prettify all-pre hide"></div>
+
+<h2>HTML code</h2>
+{%- comment -%} Manually-included variable-core.liquid so that gc-page-feedback.html's code sample can use the i18nText-lang variable {%- endcomment -%}
+{% include variable-core.liquid %}
+{% highlight text %}
+{% include_relative includes/gc-page-feedback.html %}
+{% endhighlight %}
diff --git a/sites/gc-page-feedback/gc-page-feedback-fr.html b/sites/gc-page-feedback/gc-page-feedback-fr.html
new file mode 100644
index 000000000..636ff3119
--- /dev/null
+++ b/sites/gc-page-feedback/gc-page-feedback-fr.html
@@ -0,0 +1,23 @@
+---
+{
+	"altLangPage": "gc-page-feedback-en.html",
+	"breadcrumbs": [
+		{ "title": "Accueil GCWeb", "link": "https://wet-boew.github.io/GCWeb/index-fr.html" }
+	],
+	"css": ["https://use.fontawesome.com/releases/v5.15.4/css/all.css"],
+	"dateModified": "2022-12-06",
+	"description": "Outil de rétroaction sur la page pour Canada.ca",
+	"language": "fr",
+	"title": "Outil de rétroaction sur la page",
+	"pageFeedback": "true",
+	"share": "true"
+}
+---
+<div class="wb-prettify all-pre hide"></div>
+
+<h2>Code HTML</h2>
+{%- comment -%} Manually-included variable-core.liquid so that gc-page-feedback.html's code sample can use the i18nText-lang variable {%- endcomment -%}
+{% include variable-core.liquid %}
+{% highlight text %}
+{% include_relative includes/gc-page-feedback.html %}
+{% endhighlight %}
diff --git a/sites/gc-page-feedback/includes/css.html b/sites/gc-page-feedback/includes/css.html
new file mode 100644
index 000000000..6c703f071
--- /dev/null
+++ b/sites/gc-page-feedback/includes/css.html
@@ -0,0 +1,121 @@
+<style>
+/* Custom CSS for testing on GitHub Pages - should be equivalent to updated SCSS files */
+
+/*----------*/
+
+/* sites/page-details/_base.scss */
+/*
+ * Share/feedback-specific overrides
+ */
+
+/* Undo the old report a problem well selector */
+.pagedetails .well {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+/* More specific well selector for report a problem (to prevent a conflict with the page feedback tool's well) */
+.pagedetails details .well {
+	margin-left: -1.1em;
+	margin-right: -1.1em;
+}
+
+/*----------*/
+
+/* sites/page-details/_screen-sm-min.scss */
+@media screen and (min-width: 768px) {
+	/*
+	 * Share/feedback-specific overrides (small view and over)
+	 */
+
+	/* Add a larger top margin on the share button (only if its plugin has initialized) if adjacent to the page feedback tool. */
+	.pagedetails div:has(.gc-pft) + .wb-share-inited {
+		margin-top: 29px;
+	}
+}
+
+/*----------*/
+
+/* sites/page-details/_screen-md-min.scss */
+@media screen and (min-width: 992px) {
+	/*
+	 * Share/feedback-specific overrides (medium view and over)
+	 */
+
+	/* Add a larger top margin on the share button (only if its plugin has initialized) if adjacent to the page feedback tool. */
+	.pagedetails div:has(.gc-pft) + .wb-share-inited {
+		margin-top: 21px;
+	}
+}
+
+/*----------*/
+
+/* sites/gc-page-feedback/_base.scss */
+/*
+  @title: Page feedback tool - Base
+ */
+
+/* In noscript/basic HTML mode...*/
+
+/* Disable row gutters (default selector isn't specific-enough) */
+.no-js .gc-pft .row-no-gutters [class*="col-"],
+.wb-disable .gc-pft .row-no-gutters [class*="col-"] {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+/* Make the legend full width */
+.no-js .gc-pft .nojs-col-sm-12,
+.wb-disable .gc-pft .nojs-col-sm-12 {
+	position: relative;
+	min-height: 1px;
+	padding-right: 15px;
+	padding-left: 15px;
+}
+
+/* Left-align the legend and yes/no buttons */
+.no-js .gc-pft .nojs-text-left,
+.wb-disable .gc-pft .nojs-text-left {
+	text-align: left;
+}
+
+@media (min-width: 768px) {
+	.no-js .gc-pft .nojs-col-sm-12,
+	.wb-disable .gc-pft .nojs-col-sm-12 {
+		float: left;
+	}
+
+	.no-js .gc-pft .nojs-col-sm-12,
+	.wb-disable .gc-pft .nojs-col-sm-12 {
+		width: 100%;
+	}
+}
+
+/*----------*/
+
+/* sites/gc-page-feedback/_screen-sm-min.scss */
+@media screen and (min-width: 768px) {
+	/*
+	  @title: Page feedback tool - Small view and over
+	 */
+
+	/* Disable the legend's right padding */
+	.no-js .gc-pft .nojs-pr-sm-0,
+	.wb-disable .gc-pft .nojs-pr-sm-0 {
+		padding-right: 0 !important;
+	}
+}
+
+/*----------*/
+
+/* sites/gc-page-feedback/_print.scss */
+@media print {
+	/*
+	  @title: Page feedback tool - Print view
+	 */
+
+	.gc-pft {
+		display: none !important;
+	}
+}
+</style>
diff --git a/sites/gc-page-feedback/includes/gc-page-feedback.html b/sites/gc-page-feedback/includes/gc-page-feedback.html
new file mode 100644
index 000000000..6acde9c18
--- /dev/null
+++ b/sites/gc-page-feedback/includes/gc-page-feedback.html
@@ -0,0 +1,62 @@
+{%- include_relative includes/parameters.liquid -%}
+{%- include_relative includes/strings.liquid -%}
+
+<div class="gc-pft row">
+	<div class="col-sm-10 col-md-9 col-lg-8">
+		<section class="well mrgn-bttm-0" aria-live="polite">
+			<h3 class="wb-inv">{{ pft_h3 }}</h3>
+			<form id="gc-pft-frm" action="https://pagesuccessemailqueue.azurewebsites.net/api/QueueProblemForm" method="post" class="wb-postback" data-wb-postback='{"success":".gc-pft-thnk","content":"#gc-pft-frm"}'>
+				<input type="hidden" name="institutionopt" value="{{ pft_institutionopt_value }}" />
+				<input type="hidden" name="themeopt" value="{{ pft_themeopt_value }}" />
+				<input type="hidden" name="sectionopt" value="{{ pft_sectionopt_value }}" />
+				<input type="hidden" name="pageTitle" value="{{ pft_pageTitle_value }}" />
+				<input type="hidden" name="language" value="{{ pft_language_value }}" />
+				<input type="hidden" name="submissionPage" value="{{ pft_submissionPage_value }}" />
+				<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 nojs-pr-sm-0"><span class="field-name">{{ pft_legend }}</span></legend>
+					<div class="col-xs-12 nojs-show">
+						<button type="submit" name="helpful" value="{{ pft_yes_value }}" class="btn btn-primary" aria-describedby="why-note">{{ pft_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 type="submit" name="helpful" value="{{ pft_yes_value }}" class="btn btn-primary mrgn-tp-sm mrgn-bttm-sm">{{ pft_yes }}</button>
+						<button type="button" class="btn btn-primary mrgn-tp-sm mrgn-bttm-sm mrgn-lft-sm" data-wb-doaction='[
+							{"action":"removeClass","source":".gc-pft-no","class":"nojs-show"},
+							{"action":"addClass","source":".gc-pft-btns","class":"hide"}
+						]'>{{ pft_no }}</button>
+					</div>
+				</fieldset>
+				<div class="gc-pft-no nojs-show">
+					<p id="why-note" class="nojs-show mrgn-tp-lg mrgn-bttm-md"><strong>{{ pft_why_note_nojs }}</strong></p>
+					<p class="nojs-hide wb-inv"><strong>{{ pft_why_note_js }}</strong></p>
+					<div aria-live="off">
+						<fieldset class="chkbxrdio-grp">
+							<legend><span class="field-name">{{ pft_no_legend }}</span></legend>
+							<div class="radio">
+								<label for="problem1"><input name="problem" id="problem1" type="radio" value="{{ pft_problem1_value }}" /> {{ pft_problem1_label }}</label>
+							</div>
+							<div class="radio">
+								<label for="problem2"><input name="problem" id="problem2" type="radio" value="{{ pft_problem2_value }}" /> {{ pft_problem2_label }}</label>
+							</div>
+							<div class="radio">
+								<label for="problem3"><input name="problem" id="problem3" type="radio" value="{{ pft_problem3_value }}" /> {{ pft_problem3_label }}</label>
+							</div>
+							<div class="radio">
+								<label for="problem4"><input name="problem" id="problem4" type="radio" value="{{ pft_problem4_value }}" /> {{ pft_problem4_label }}</label>
+							</div>
+							<input type="hidden" name="problem" value="" />
+						</fieldset>
+						<div class="form-group">
+							<label for="problem6" class="mrgn-tp-sm mrgn-bttm-0"><span class="field-name">{{ pft_problem6_label }}</span></label>
+							<textarea id="problem6" aria-describedby="problem6-note" name="details" class="form-control full-width" maxlength="300"></textarea>
+							<p id="problem6-note"><small>{{ pft_problem6_note }}</small></p>
+						</div>
+						<button name="helpful" value="{{ pft_no_value }}" class="btn btn-primary">{{ pft_submit }}</button>
+					</div>
+				</div>
+			</form>
+			<div class="gc-pft-thnk hide">
+				<p class="mrgn-tp-sm mrgn-bttm-0"><span class="far fa-check-circle text-success mrgn-rght-sm" aria-hidden="true"></span> {{ pft_submit_message }}</p>
+			</div>
+		</section>
+	</div>
+</div>
diff --git a/sites/gc-page-feedback/includes/parameters.liquid b/sites/gc-page-feedback/includes/parameters.liquid
new file mode 100644
index 000000000..e17fb3b00
--- /dev/null
+++ b/sites/gc-page-feedback/includes/parameters.liquid
@@ -0,0 +1,57 @@
+{%- comment -%}
+Set parameter variables
+{%- endcomment -%}
+
+{%- capture pft_institutionopt_value -%}
+	{%- if page.pageFeedback.institutionopt -%}
+		{{ page.pageFeedback.institutionopt }}
+	{%- else -%}
+		Institution - required - must use same abbreviation value EN and FR
+	{%- endif -%}
+{%- endcapture -%}
+
+{%- capture pft_themeopt_value -%}
+	{%- if page.pageFeedback.themeopt -%}
+		{{ page.pageFeedback.themeopt }}
+	{%- else -%}
+		Theme - required - must use same value EN and FR
+	{%- endif -%}
+{%- endcapture -%}
+
+{%- capture pft_sectionopt_value -%}
+	{%- if page.pageFeedback.sectionopt -%}
+		{{ page.pageFeedback.sectionopt }}
+	{%- else -%}
+		Section - required but can be blank - same value EN and FR
+	{%- endif -%}
+{%- endcapture -%}
+
+{%- capture pft_pageTitle_value -%}
+	{%- if page.pageFeedback.pageTitle == "true" -%}
+		{{ page.title }}
+	{%- elsif page.pageFeedback.title -%}
+		{{ page.pageFeedback.pageTitle }}
+	{%- else -%}
+		Page title (EN) - required
+	{%- endif -%}
+{%- endcapture -%}
+
+{%- capture pft_language_value -%}
+	{%- if page.pageFeedback.language == "true" -%}
+		{{ i18nText-lang }}
+	{%- elsif page.pageFeedback.language -%}
+		{{ page.pageFeedback.language }}
+	{%- else -%}
+		Language - required - use EN or FR
+	{%- endif -%}
+{%- endcapture -%}
+
+{%- capture pft_submissionPage_value -%}
+	{%- if page.pageFeedback.submissionPage == "true" -%}
+		{{ page.url | absolute_url }}
+	{%- elsif page.pageFeedback.submissionPage -%}
+		{{ page.pageFeedback.submissionPage }}
+	{%- else -%}
+		Page URL - required
+	{%- endif -%}
+{%- endcapture -%}
diff --git a/sites/gc-page-feedback/includes/strings.liquid b/sites/gc-page-feedback/includes/strings.liquid
new file mode 100644
index 000000000..20f8155e2
--- /dev/null
+++ b/sites/gc-page-feedback/includes/strings.liquid
@@ -0,0 +1,58 @@
+{%- comment -%}
+Set string variables
+{%- endcomment -%}
+
+{%- assign pft_yes_en = "Yes" -%}
+{%- assign pft_no_en = "No" -%}
+{%- assign pft_problem1_label_en = "I can’t <strong>find</strong> the information" -%}
+{%- assign pft_problem2_label_en = "The information is hard to <strong>understand</strong>" -%}
+{%- assign pft_problem3_label_en = "There was an error or something <strong>didn’t work</strong>" -%}
+{%- assign pft_problem4_label_en = "Other reason" -%}
+
+{%- assign pft_yes_fr = "Oui" -%}
+{%- assign pft_no_fr = "Non" -%}
+{%- assign pft_problem1_label_fr = "Je ne peux pas <strong>trouver</strong> l’information" -%}
+{%- assign pft_problem2_label_fr = "L’information est difficile à <strong>comprendre</strong>" -%}
+{%- assign pft_problem3_label_fr = "Il y avait une erreur ou quelque chose <strong>ne fonctionnait pas</strong>" -%}
+{%- assign pft_problem4_label_fr = "Autre raison" -%}
+
+{%- assign pft_yes_value = pft_yes_en | append: "-" | append: pft_yes_fr -%}
+{%- assign pft_no_value = pft_no_en | strip_html | append: "-" | append: pft_no_fr | strip_html -%}
+{%- assign pft_problem1_value = pft_problem1_label_en | strip_html | append: "-" | append: pft_problem1_label_fr | strip_html -%}
+{%- assign pft_problem2_value = pft_problem2_label_en | strip_html | append: "-" | append: pft_problem2_label_fr | strip_html -%}
+{%- assign pft_problem3_value = pft_problem3_label_en | strip_html | append: "-" | append: pft_problem3_label_fr | strip_html -%}
+{%- assign pft_problem4_value = pft_problem4_label_en | strip_html | append: "-" | append: pft_problem4_label_fr | strip_html -%}
+
+{%- if i18nText-lang == "en" -%}
+	{%- assign pft_h3 = "Page feedback" -%}
+	{%- assign pft_legend = "Did you find what you were looking for?" -%}
+	{%- assign pft_yes = pft_yes_en -%}
+	{%- assign pft_no = pft_no_en -%}
+	{%- assign pft_why_note_nojs = "If not, tell us why below:" -%}
+	{%- assign pft_why_note_js = "Tell us why below:" -%}
+	{%- assign pft_no_legend = "What was wrong?" -%}
+	{%- assign pft_problem1_label = pft_problem1_label_en -%}
+	{%- assign pft_problem2_label = pft_problem2_label_en -%}
+	{%- assign pft_problem3_label = pft_problem3_label_en -%}
+	{%- assign pft_problem4_label = pft_problem4_label_en -%}
+	{%- assign pft_problem6_label = "Please provide more details (maximum 300 characters)" -%}
+	{%- assign pft_problem6_note = "You will not receive a reply. Telephone numbers and email addresses will be removed." -%}
+	{%- assign pft_submit = "Submit" -%}
+	{%- assign pft_submit_message = "Thank you for your feedback." -%}
+{%- elsif i18nText-lang == "fr" -%}
+	{%- assign pft_h3 = "Rétroaction sur la page" -%}
+	{%- assign pft_legend = "Avez-vous trouvé ce que vous cherchiez?" -%}
+	{%- assign pft_yes = pft_yes_fr -%}
+	{%- assign pft_no = pft_no_fr -%}
+	{%- assign pft_why_note_nojs = "Sinon, dites nous pourquoi ci-dessous&nbsp;:" -%}
+	{%- assign pft_why_note_js = "Dites nous pourquoi ci-dessous&nbsp;:" -%}
+	{%- assign pft_no_legend = "Qu’est-ce qui n’allait pas?" -%}
+	{%- assign pft_problem1_label = pft_problem1_label_fr -%}
+	{%- assign pft_problem2_label = pft_problem2_label_fr -%}
+	{%- assign pft_problem3_label = pft_problem3_label_fr -%}
+	{%- assign pft_problem4_label = pft_problem4_label_fr -%}
+	{%- assign pft_problem6_label = "Veuillez fournir plus de détails (maximum de 300 caractères)" -%}
+	{%- assign pft_problem6_note = "Vous ne recevrez aucune réponse. Les numéros de téléphone et les adresses électroniques seront supprimés." -%}
+	{%- assign pft_submit = "Soumettre" -%}
+	{%- assign pft_submit_message = "Merci de vos commentaires." -%}
+{%- endif -%}
diff --git a/sites/gc-page-feedback/index.json-ld b/sites/gc-page-feedback/index.json-ld
new file mode 100644
index 000000000..b9e019806
--- /dev/null
+++ b/sites/gc-page-feedback/index.json-ld
@@ -0,0 +1,44 @@
+{
+	"@context": {
+		"@version": 1.1,
+		"dct": "http://purl.org/dc/terms/",
+		"title": { "@id": "dct:title", "@container": "@language" },
+		"description": { "@id": "dct:description", "@container": "@language" },
+		"modified": "dct:modified"
+	},
+	"title": {
+		"en": "Page feedback tool",
+		"fr": "Outil de rétroaction sur la page"
+	},
+	"description": {
+		"en": "Page feedback tool for Canada.ca",
+		"fr": "Outil de rétroaction sur la page pour Canada.ca"
+	},
+	"modified": "2022-12-06",
+	"componentName": "gc-page-feedback",
+	"status": "stable",
+	"pages": {
+		"examples": [
+			{
+				"title": "Page feedback tool",
+				"language": "en",
+				"path": "gc-page-feedback-en.html"
+			},
+			{
+				"title": "Outil de rétroaction sur la page",
+				"language": "fr",
+				"path": "gc-page-feedback-fr.html"
+			},
+			{
+				"title": "Page feedback tool with custom parameters",
+				"language": "en",
+				"path": "gc-page-feedback-custom-en.html"
+			},
+			{
+				"title": "Outil de rétroaction sur la page avec paramètres personnalisés",
+				"language": "fr",
+				"path": "gc-page-feedback-custom-fr.html"
+			}
+		]
+	}
+}
diff --git a/sites/page-details/_base.scss b/sites/page-details/_base.scss
index 82b9c7626..f1029d698 100644
--- a/sites/page-details/_base.scss
+++ b/sites/page-details/_base.scss
@@ -76,15 +76,15 @@ main {
 		}
 	}
 
-	.well {
-		margin: {
-			left: -$details-identation;
-			right: -$details-identation;
-		}
-	}
-
 	details {
 		margin-bottom: 0;
+
+		.well {
+			margin: {
+				left: -$details-identation;
+				right: -$details-identation;
+			}
+		}
 	}
 
 	// Add a top margin on the share button (only if its plugin has initialized).
diff --git a/sites/page-details/_screen-md-min.scss b/sites/page-details/_screen-md-min.scss
new file mode 100644
index 000000000..cf064c9a5
--- /dev/null
+++ b/sites/page-details/_screen-md-min.scss
@@ -0,0 +1,16 @@
+/*
+ * Share/feedback-specific overrides (medium view and over)
+ */
+
+/* Add a larger top margin on the share button (only if its plugin has initialized) if adjacent to the page feedback tool. */
+.pagedetails {
+	div {
+		&:has( .gc-pft ) {
+			+ {
+				.wb-share-inited {
+					margin-top: 21px;
+				}
+			}
+		}
+	}
+}
diff --git a/sites/page-details/_screen-sm-min.scss b/sites/page-details/_screen-sm-min.scss
new file mode 100644
index 000000000..086e58e36
--- /dev/null
+++ b/sites/page-details/_screen-sm-min.scss
@@ -0,0 +1,16 @@
+/*
+ * Share/feedback-specific overrides (small view and over)
+ */
+
+/* Add a larger top margin on the share button (only if its plugin has initialized) if adjacent to the page feedback tool. */
+.pagedetails {
+	div {
+		&:has( .gc-pft ) {
+			+ {
+				.wb-share-inited {
+					margin-top: 29px;
+				}
+			}
+		}
+	}
+}
diff --git a/sites/page-details/includes/footer.html b/sites/page-details/includes/footer.html
index 43abe5ae6..76b3e36c9 100644
--- a/sites/page-details/includes/footer.html
+++ b/sites/page-details/includes/footer.html
@@ -1,27 +1,31 @@
 <section class="pagedetails{% if include.addContainer %} container{% endif %}">
 	<h2 class="wb-inv">{{ i18nText-pageDetails }}</h2>
 
-	{%- if page.noReportProblem -%}
+	{% assign col-modified = "col-xs-12" %}
+	{%- if page.pageFeedback or page.noReportProblem != true -%}
+		{% assign col-feedback = "col-sm-8 col-md-9 col-lg-9" %}
 		{%- if page.share -%}
-			{% assign col-share = "col-sm-4 col-md-3 col-sm-push-8 col-md-push-9" %}
-			{% assign col-modified = "col-sm-6 col-md-5 col-lg-4 col-sm-pull-4 col-md-pull-3" %}
-		{%- else -%}
-			{% assign col-modified = "col-xs-12" %}
+			{% assign col-share = "col-sm-4 col-md-3" %}
 		{%- endif -%}
 	{%- else -%}
-		{% assign col-feedback = "col-sm-8 col-md-9 col-lg-9" %}
 		{%- if page.share -%}
-			{% assign col-share = "col-sm-4 col-md-3" %}
+			{% assign col-share = "col-sm-4 col-md-3 col-sm-push-8 col-md-push-9" %}
+			{% assign col-modified = "col-sm-6 col-md-5 col-lg-4 col-sm-pull-4 col-md-pull-3" %}
 		{%- endif -%}
-		{% assign col-modified = "col-xs-12" %}
 	{%- endif -%}
 
 	<div class="row">
-		{%- unless page.noReportProblem -%}
+		{%- if page.pageFeedback or page.noReportProblem != true -%}
 			<div class="{{ col-feedback }}">
-				{% include feedback/feedback.html %}
+				{%- if page.pageFeedback -%}
+					{% include gc-page-feedback/gc-page-feedback.html %}
+				{%- else -%}
+					{%- unless page.noReportProblem -%}
+						{% include feedback/feedback.html %}
+					{%- endunless -%}
+				{%- endif -%}
 			</div>
-		{%- endunless -%}
+		{%- endif -%}
 		{%- if page.share -%}
 			<div class="wb-share {{ col-share }}" data-wb-share='{"lnkClass": "btn btn-default btn-block"}'></div>
 		{%- endif -%}
diff --git a/sites/theme.scss b/sites/theme.scss
index 32b29ef13..eb1999684 100644
--- a/sites/theme.scss
+++ b/sites/theme.scss
@@ -74,6 +74,7 @@
 @import "search/base";
 @import "secondary-menu/base";
 @import "page-details/base";
+@import "gc-page-feedback/base";
 @import "gcweb-menu/base";
 @import "authentication/base";
 @import "header/base";
@@ -311,6 +312,7 @@
 
 	@import "baseline/lists/screen-md-min";
 	@import "gcweb-menu/screen-md-min";
+	@import "page-details/screen-md-min";
 
 	@import "wet-boew/src/plugins/feeds/screen-md-min";
 	@import "wet-boew/src/plugins/tabs/screen-md-min";
@@ -366,6 +368,8 @@
 	@import "wet-boew/src/base/views/screen-sm-min-to-screen-sm-max";
 
 	@import "search/screen-sm-min-to-screen-sm-max";
+	@import "page-details/screen-sm-min";
+	@import "gc-page-feedback/screen-sm-min";
 
 	@import "../templates/campaign/screen-sm-min-to-screen-sm-max";
 }
@@ -406,6 +410,7 @@
 	@import "search/print";
 	@import "secondary-menu/print";
 	@import "page-details/print";
+	@import "gc-page-feedback/print";
 
 	@import "wet-boew/src/plugins/footnotes/print";
 	@import "wet-boew/src/plugins/geomap/print";

From 0d812142b3454a00f1040c06323387885147ab01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Garneau?= <garneauma@gmail.com>
Date: Fri, 13 Jan 2023 08:21:40 -0500
Subject: [PATCH 2/2] Feedback: implementing Page Feedback Tool

---
 Gruntfile.coffee                              |   4 +-
 _config.yml                                   |   4 +-
 _data/sites.json                              |  86 +--
 .../gc-page-feedback/gc-page-feedback.html    |  12 -
 _includes/page-details/footer.html            |  45 --
 package-lock.json                             |   2 +-
 .../{gc-page-feedback => feedback}/_base.scss |  17 +-
 sites/feedback/_print.scss                    |   7 +
 .../_screen-md-min.scss                       |   4 +-
 .../_screen-sm-min-to-screen-sm-max.scss}     |   2 +-
 .../ajax/deprecated/report-problem-v1-en.html |  57 ++
 .../ajax/deprecated/report-problem-v1-fr.html |  57 ++
 .../report-problem-v2-en.html                 |   0
 .../report-problem-v2-fr.html                 |   0
 .../ajax/deprecated/report-problem-v3-en.html |  77 ++
 .../ajax/deprecated/report-problem-v3-fr.html |  77 ++
 .../ajax/deprecated/report-problem-v4-en.html |  93 +++
 .../ajax/deprecated/report-problem-v4-fr.html |  92 +++
 sites/feedback/ajax/page-feedback-en.html     |  84 +++
 sites/feedback/ajax/page-feedback-fr.html     |  84 +++
 sites/feedback/ajax/report-problem-aa-en.html | 107 ---
 sites/feedback/ajax/report-problem-aa-fr.html | 109 ---
 sites/feedback/ajax/report-problem-en.html    |   4 +-
 sites/feedback/ajax/report-problem-fr.html    |   4 +-
 sites/feedback/ajax/report-problem-v1-en.html |  54 --
 sites/feedback/ajax/report-problem-v1-fr.html |  54 --
 sites/feedback/ajax/report-problem-v3-en.html |  78 --
 sites/feedback/ajax/report-problem-v3-fr.html |  77 --
 sites/feedback/feedback-aa-en.html            |  24 -
 sites/feedback/feedback-aa-fr.html            |  24 -
 sites/feedback/feedback-docs-en.html          | 684 +++++++++--------
 sites/feedback/feedback-docs-fr.html          | 691 +++++++++---------
 sites/feedback/feedback-en.html               |  31 -
 sites/feedback/feedback-fr.html               |  31 -
 sites/feedback/includes/feedback.html         |  39 +-
 sites/feedback/index.json-ld                  |  42 +-
 sites/feedback/page-feedback-contact-en.html  |  31 +
 sites/feedback/page-feedback-contact-fr.html  |  31 +
 sites/feedback/page-feedback-en.html          |  27 +
 sites/feedback/page-feedback-fr.html          |  27 +
 sites/feedback/report-problem-en.html         |  21 +
 sites/feedback/report-problem-fr.html         |  21 +
 sites/gc-page-feedback/_print.scss            |   7 -
 sites/gc-page-feedback/_screen-sm-min.scss    |  14 -
 .../gc-page-feedback-custom-en.html           |  29 -
 .../gc-page-feedback-custom-fr.html           |  29 -
 .../gc-page-feedback/gc-page-feedback-en.html |  23 -
 .../gc-page-feedback/gc-page-feedback-fr.html |  23 -
 sites/gc-page-feedback/includes/css.html      | 121 ---
 .../includes/gc-page-feedback.html            |  62 --
 .../includes/parameters.liquid                |  57 --
 .../gc-page-feedback/includes/strings.liquid  |  58 --
 sites/gc-page-feedback/index.json-ld          |  44 --
 sites/includes/settings.liquid                |   1 +
 sites/page-details/includes/footer.html       |  12 +-
 .../page-details-without-buttons-en.html      |   2 +-
 .../page-details-without-buttons-fr.html      |   2 +-
 .../page-details-without-report-btn-en.html   |   2 +-
 .../page-details-without-report-btn-fr.html   |   2 +-
 sites/theme.scss                              |   9 +-
 templates/home/home-en.html                   |   2 +-
 templates/home/home-fr.html                   |   2 +-
 templates/thematic/dark-theme-home-en.html    |   2 +-
 templates/thematic/dark-theme-home-fr.html    |   2 +-
 templates/thematic/pink-day-home-en.html      |   2 +-
 templates/thematic/pink-day-home-fr.html      |   2 +-
 66 files changed, 1588 insertions(+), 1936 deletions(-)
 delete mode 100644 _includes/gc-page-feedback/gc-page-feedback.html
 delete mode 100644 _includes/page-details/footer.html
 rename sites/{gc-page-feedback => feedback}/_base.scss (66%)
 create mode 100644 sites/feedback/_print.scss
 rename sites/{page-details => feedback}/_screen-md-min.scss (85%)
 rename sites/{page-details/_screen-sm-min.scss => feedback/_screen-sm-min-to-screen-sm-max.scss} (93%)
 create mode 100644 sites/feedback/ajax/deprecated/report-problem-v1-en.html
 create mode 100644 sites/feedback/ajax/deprecated/report-problem-v1-fr.html
 rename sites/feedback/ajax/{ => deprecated}/report-problem-v2-en.html (100%)
 rename sites/feedback/ajax/{ => deprecated}/report-problem-v2-fr.html (100%)
 create mode 100644 sites/feedback/ajax/deprecated/report-problem-v3-en.html
 create mode 100644 sites/feedback/ajax/deprecated/report-problem-v3-fr.html
 create mode 100644 sites/feedback/ajax/deprecated/report-problem-v4-en.html
 create mode 100644 sites/feedback/ajax/deprecated/report-problem-v4-fr.html
 create mode 100644 sites/feedback/ajax/page-feedback-en.html
 create mode 100644 sites/feedback/ajax/page-feedback-fr.html
 delete mode 100644 sites/feedback/ajax/report-problem-aa-en.html
 delete mode 100644 sites/feedback/ajax/report-problem-aa-fr.html
 delete mode 100644 sites/feedback/ajax/report-problem-v1-en.html
 delete mode 100644 sites/feedback/ajax/report-problem-v1-fr.html
 delete mode 100644 sites/feedback/ajax/report-problem-v3-en.html
 delete mode 100644 sites/feedback/ajax/report-problem-v3-fr.html
 delete mode 100644 sites/feedback/feedback-aa-en.html
 delete mode 100644 sites/feedback/feedback-aa-fr.html
 delete mode 100644 sites/feedback/feedback-en.html
 delete mode 100644 sites/feedback/feedback-fr.html
 create mode 100644 sites/feedback/page-feedback-contact-en.html
 create mode 100644 sites/feedback/page-feedback-contact-fr.html
 create mode 100644 sites/feedback/page-feedback-en.html
 create mode 100644 sites/feedback/page-feedback-fr.html
 create mode 100644 sites/feedback/report-problem-en.html
 create mode 100644 sites/feedback/report-problem-fr.html
 delete mode 100644 sites/gc-page-feedback/_print.scss
 delete mode 100644 sites/gc-page-feedback/_screen-sm-min.scss
 delete mode 100644 sites/gc-page-feedback/gc-page-feedback-custom-en.html
 delete mode 100644 sites/gc-page-feedback/gc-page-feedback-custom-fr.html
 delete mode 100644 sites/gc-page-feedback/gc-page-feedback-en.html
 delete mode 100644 sites/gc-page-feedback/gc-page-feedback-fr.html
 delete mode 100644 sites/gc-page-feedback/includes/css.html
 delete mode 100644 sites/gc-page-feedback/includes/gc-page-feedback.html
 delete mode 100644 sites/gc-page-feedback/includes/parameters.liquid
 delete mode 100644 sites/gc-page-feedback/includes/strings.liquid
 delete mode 100644 sites/gc-page-feedback/index.json-ld

diff --git a/Gruntfile.coffee b/Gruntfile.coffee
index b8444e205..4eae805d8 100644
--- a/Gruntfile.coffee
+++ b/Gruntfile.coffee
@@ -557,12 +557,12 @@ module.exports = (grunt) ->
 			#	src: "_includes/settings.liquid"
 			jekyllRunLocal:
 				options:
-					banner: """{%- assign setting-resourcesBasePathTheme = "/<%= distFolder %>/GCWeb" -%}{%- assign setting-resourcesBasePathWetboew = "/<%= distFolder %>/wet-boew" -%}"""
+					banner: """{%- assign setting-resourcesBasePathTheme = "/<%= distFolder %>/GCWeb" -%}{%- assign setting-resourcesBasePathWetboew = "/<%= distFolder %>/wet-boew" -%}{%- assign setting-root = "" -%}"""
 					position: "bottom"
 				src: "<%= jekyllDist %>/_includes/settings.liquid"
 			jekyllRunDemo:
 				options:
-					banner: """{%- assign setting-resourcesBasePathTheme = "/wet-boew-demos/""" + grunt.option('branch') + """/<%= distFolder %>/GCWeb" -%}{%- assign setting-resourcesBasePathWetboew = "/wet-boew-demos/""" + grunt.option('branch') + """/<%= distFolder %>/wet-boew" -%}"""
+					banner: """{%- assign setting-resourcesBasePathTheme = "/wet-boew-demos/""" + grunt.option('branch') + """/<%= distFolder %>/GCWeb" -%}{%- assign setting-resourcesBasePathWetboew = "/wet-boew-demos/""" + grunt.option('branch') + """/<%= distFolder %>/wet-boew" -%}{%- assign setting-root = "/wet-boew-demos/""" + grunt.option('branch') + """ -%}"""
 					position: "bottom"
 				src: "<%= jekyllDist %>/_includes/settings.liquid"
 			jekyllRunUnminified:
diff --git a/_config.yml b/_config.yml
index b80c3f89c..8709fd314 100644
--- a/_config.yml
+++ b/_config.yml
@@ -6,8 +6,8 @@ website: "https://wet-boew.github.io/GCWeb/" # URL of your public facing website
 global:
   lang: fr
   feedbackPath:
-    en: "/sites/feedback/ajax/report-problem-en.html"
-    fr: "/sites/feedback/ajax/report-problem-fr.html"
+    en: "/sites/feedback/ajax/page-feedback-en.html"
+    fr: "/sites/feedback/ajax/page-feedback-fr.html"
   # contextualFooter: # Contextual footer settings
   #   title:
   #     fr: "Référence d'implémentation de Canada.ca"
diff --git a/_data/sites.json b/_data/sites.json
index 9836b9390..fb980658a 100644
--- a/_data/sites.json
+++ b/_data/sites.json
@@ -181,39 +181,59 @@
 		"modified": "dct:modified"
 	},
 	"title": {
-		"en": "Report a problem (RAP) - Feedback",
-		"fr": "Signaler un problème (SUP) - Commentaires"
+		"en": "Feedback area",
+		"fr": "Zone de rétroaction"
 	},
 	"description": {
-		"en": "Documentation on how to use the page feedback form.",
-		"fr": "Documentation sur l'utilisation de formulaire de commentaires de page."
+		"en": "Documentation on how to use the elements of the feedback area.",
+		"fr": "Documentation sur l'utilisation des éléments de la zone commentaires."
 	},
-	"modified": "2022-04-26",
+	"modified": "2023-01-10",
 	"componentName": "feedback",
 	"status": "stable",
 	"pages": {
 		"docs": [
 			{
-				"title": "Documentation for Page feedback form",
+				"title": "Documentation for the feedback area",
 				"language": "en",
 				"path": "feedback-docs-en.html"
 			},
 			{
-				"title": "Documentation pour formulaire de commentaire de page",
+				"title": "Documentation pour la zone de rétroaction",
 				"language": "fr",
 				"path": "feedback-docs-fr.html"
 			}
 		],
 		"examples": [
 			{
-				"title": "Page feedback form",
+				"title": "Page feedback tool",
+				"language": "en",
+				"path": "page-feedback-en.html"
+			},
+			{
+				"title": "Outil de rétroaction sur la page",
+				"language": "fr",
+				"path": "page-feedback-fr.html"
+			},
+			{
+				"title": "Page feedback tool with contact link",
 				"language": "en",
-				"path": "feedback-en.html"
+				"path": "page-feedback-contact-en.html"
 			},
 			{
-				"title": "Formulaire de commentaire de page",
+				"title": "Outil de rétroaction sur la page avec lien de contact",
 				"language": "fr",
-				"path": "feedback-fr.html"
+				"path": "page-feedback-contact-fr.html"
+			},
+			{
+				"title": "Report a problem",
+				"language": "en",
+				"path": "report-problem-en.html"
+			},
+			{
+				"title": "Signaler un problème",
+				"language": "fr",
+				"path": "report-problem-fr.html"
 			}
 		]
 	}
@@ -354,50 +374,6 @@
 		]
 	}
 }
-,{
-	"@context": {
-		"@version": 1.1,
-		"dct": "http://purl.org/dc/terms/",
-		"title": { "@id": "dct:title", "@container": "@language" },
-		"description": { "@id": "dct:description", "@container": "@language" },
-		"modified": "dct:modified"
-	},
-	"title": {
-		"en": "Page feedback tool",
-		"fr": "Outil de rétroaction sur la page"
-	},
-	"description": {
-		"en": "Page feedback tool for Canada.ca",
-		"fr": "Outil de rétroaction sur la page pour Canada.ca"
-	},
-	"modified": "2022-12-06",
-	"componentName": "gc-page-feedback",
-	"status": "stable",
-	"pages": {
-		"examples": [
-			{
-				"title": "Page feedback tool",
-				"language": "en",
-				"path": "gc-page-feedback-en.html"
-			},
-			{
-				"title": "Outil de rétroaction sur la page",
-				"language": "fr",
-				"path": "gc-page-feedback-fr.html"
-			},
-			{
-				"title": "Page feedback tool with custom parameters",
-				"language": "en",
-				"path": "gc-page-feedback-custom-en.html"
-			},
-			{
-				"title": "Outil de rétroaction sur la page avec paramètres personnalisés",
-				"language": "fr",
-				"path": "gc-page-feedback-custom-fr.html"
-			}
-		]
-	}
-}
 ,{
 	"@context": {
 		"@version": 2.0,
diff --git a/_includes/gc-page-feedback/gc-page-feedback.html b/_includes/gc-page-feedback/gc-page-feedback.html
deleted file mode 100644
index d614cd7e3..000000000
--- a/_includes/gc-page-feedback/gc-page-feedback.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!--
-NOTES:
--For testing/ease of development
--Only works when pageDetails is enabled in "/sites/gc-page-feedback/*.html"
--Remove this file before merging
--->
-{%- if page.dir == "/sites/gc-page-feedback/" -%}
-	{%- include_relative includes/css.html -%}
-	{%- include_relative includes/gc-page-feedback.html -%}
-{%- else -%}
-	<p><strong>Error:</strong> The page feedback tool only can only be activated in pages located at "sites/gc-page-feedback/*.html".</p>
-{%- endif -%}
diff --git a/_includes/page-details/footer.html b/_includes/page-details/footer.html
deleted file mode 100644
index cad6a7932..000000000
--- a/_includes/page-details/footer.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!--
-NOTES:
--For testing/ease of development
--Remove this file before merging
--->
-<footer class="pagedetails{% if include.addContainer %} container{% endif %}">
-	<h2 class="wb-inv">{{ i18nText-pageDetails }}</h2>
-
-	{% assign col-modified = "col-xs-12" %}
-	{%- if page.pageFeedback or page.noReportProblem != true -%}
-		{% assign col-feedback = "col-sm-8 col-md-9 col-lg-9" %}
-		{%- if page.share -%}
-			{% assign col-share = "col-sm-4 col-md-3" %}
-		{%- endif -%}
-	{%- else -%}
-		{%- if page.share -%}
-			{% assign col-share = "col-sm-4 col-md-3 col-sm-push-8 col-md-push-9" %}
-			{% assign col-modified = "col-sm-6 col-md-5 col-lg-4 col-sm-pull-4 col-md-pull-3" %}
-		{%- endif -%}
-	{%- endif -%}
-
-	<div class="row">
-		{%- if page.pageFeedback or page.noReportProblem != true -%}
-			<div class="{{ col-feedback }}">
-				{%- if page.pageFeedback -%}
-					{% include gc-page-feedback/gc-page-feedback.html %}
-				{%- else -%}
-					{%- unless page.noReportProblem -%}
-						{% include feedback/feedback.html %}
-					{%- endunless -%}
-				{%- endif -%}
-			</div>
-		{%- endif -%}
-		{%- if page.share -%}
-			<div class="wb-share {{ col-share }}" data-wb-share='{"lnkClass": "btn btn-default btn-block"}'></div>
-		{%- endif -%}
-
-		<div class="{{ col-modified }}">
-			<dl id="wb-dtmd">
-				<dt>{{ i18nText-dateModified }}</dt>
-				<dd><time property="dateModified">{{ page.dateModified }}</time></dd>
-			</dl>
-		</div>
-	</div>
-</footer>
diff --git a/package-lock.json b/package-lock.json
index b3fd8b3e3..8bd4f4535 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6666,7 +6666,7 @@
     "jsonpointer.js": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/jsonpointer.js/-/jsonpointer.js-0.4.0.tgz",
-      "integrity": "sha512-2bf/1crAmPpsmj1I6rDT6W0SOErkrNBpb555xNWcMVWYrX6VnXpG0GRMQ2shvOHwafpfse8q0gnzPFYVH6Tqdg=="
+      "integrity": "sha1-ACyxI/dnqv3rAZYTLOXE+ZQcyro="
     },
     "jsprim": {
       "version": "1.4.1",
diff --git a/sites/gc-page-feedback/_base.scss b/sites/feedback/_base.scss
similarity index 66%
rename from sites/gc-page-feedback/_base.scss
rename to sites/feedback/_base.scss
index 10692aba5..e24f6269c 100644
--- a/sites/gc-page-feedback/_base.scss
+++ b/sites/feedback/_base.scss
@@ -2,10 +2,19 @@
   @title: Page feedback tool - Base
  */
 
-/* In noscript/basic HTML mode... */
-.no-js,
-.wb-disable {
-	.gc-pft {
+#gc-pft {
+	details {
+		margin-bottom: 15px;
+		margin-top: 0;
+	}
+
+	.gc-pft-no {
+		font-weight: $bold-weight;
+	}
+
+	/* In noscript/basic HTML mode... */
+	.no-js &,
+	.wb-disable & {
 		/* Disable row gutters (default selector isn't specific-enough) */
 		.row-no-gutters {
 			@extend .row-no-gutters;
diff --git a/sites/feedback/_print.scss b/sites/feedback/_print.scss
new file mode 100644
index 000000000..085024e43
--- /dev/null
+++ b/sites/feedback/_print.scss
@@ -0,0 +1,7 @@
+/*
+  @title: Page feedback tool - Print view
+ */
+
+#gc-pft {
+	display: none !important;
+}
diff --git a/sites/page-details/_screen-md-min.scss b/sites/feedback/_screen-md-min.scss
similarity index 85%
rename from sites/page-details/_screen-md-min.scss
rename to sites/feedback/_screen-md-min.scss
index cf064c9a5..91e8c0367 100644
--- a/sites/page-details/_screen-md-min.scss
+++ b/sites/feedback/_screen-md-min.scss
@@ -5,10 +5,10 @@
 /* Add a larger top margin on the share button (only if its plugin has initialized) if adjacent to the page feedback tool. */
 .pagedetails {
 	div {
-		&:has( .gc-pft ) {
+		&:has( #gc-pft ) {
 			+ {
 				.wb-share-inited {
-					margin-top: 21px;
+					margin-top: 16px;
 				}
 			}
 		}
diff --git a/sites/page-details/_screen-sm-min.scss b/sites/feedback/_screen-sm-min-to-screen-sm-max.scss
similarity index 93%
rename from sites/page-details/_screen-sm-min.scss
rename to sites/feedback/_screen-sm-min-to-screen-sm-max.scss
index 086e58e36..e6b888f47 100644
--- a/sites/page-details/_screen-sm-min.scss
+++ b/sites/feedback/_screen-sm-min-to-screen-sm-max.scss
@@ -5,7 +5,7 @@
 /* Add a larger top margin on the share button (only if its plugin has initialized) if adjacent to the page feedback tool. */
 .pagedetails {
 	div {
-		&:has( .gc-pft ) {
+		&:has( #gc-pft ) {
 			+ {
 				.wb-share-inited {
 					margin-top: 29px;
diff --git a/sites/feedback/ajax/deprecated/report-problem-v1-en.html b/sites/feedback/ajax/deprecated/report-problem-v1-en.html
new file mode 100644
index 000000000..21a260c3d
--- /dev/null
+++ b/sites/feedback/ajax/deprecated/report-problem-v1-en.html
@@ -0,0 +1,57 @@
+<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>
diff --git a/sites/feedback/ajax/deprecated/report-problem-v1-fr.html b/sites/feedback/ajax/deprecated/report-problem-v1-fr.html
new file mode 100644
index 000000000..71e725788
--- /dev/null
+++ b/sites/feedback/ajax/deprecated/report-problem-v1-fr.html
@@ -0,0 +1,57 @@
+<div class="row row-no-gutters">
+	<div class="col-sm-11 col-md-7 col-lg-6">
+		<details class="brdr-0">
+			<summary class="btn btn-default text-center">Signaler un problème ou une erreur sur cette 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">Veuillez cocher toutes les réponses pertinentes&nbsp;:</span></legend>
+							<div class="checkbox">
+								<label for="gc-rprt-prblm-f1">
+									<input type="checkbox" name="problem1" value="Oui" id="gc-rprt-prblm-f1" />Un lien, un bouton ou une vidéo ne fonctionne pas
+								</label>
+								<input name="problem1" type="hidden" value="Non" />
+							</div>
+							<div class="checkbox">
+								<label for="gc-rprt-prblm-f2">
+									<input type="checkbox" name="problem2" value="Oui" id="gc-rprt-prblm-f2" />Il y a une erreur d'orthographe ou de grammaire
+								</label>
+								<input name="problem2" type="hidden" value="Non" />
+							</div>
+							<div class="checkbox">
+								<label for="gc-rprt-prblm-f3">
+									<input type="checkbox" name="problem3" value="Oui" id="gc-rprt-prblm-f3" />Les renseignements sont incomplets
+								</label>
+								<input name="problem3" type="hidden" value="Non" />
+							</div>
+							<div class="checkbox">
+								<label for="gc-rprt-prblm-f4">
+									<input type="checkbox" name="problem4" value="Oui" id="gc-rprt-prblm-f4" />L'information n'est plus à jour ou est erronée
+								</label>
+								<input name="problem4" type="hidden" value="Non" />
+							</div>
+							<div class="checkbox">
+								<label for="gc-rprt-prblm-f5">
+									<input type="checkbox" name="problem5" value="Oui" id="gc-rprt-prblm-f5" />Je n'arrive pas à trouver ce que je cherche
+								</label>
+								<input name="problem5" type="hidden" value="Non" />
+							</div>
+							<div class="checkbox">
+								<label for="gc-rprt-prblm-f6">
+									<input type="checkbox" name="problem6" value="Oui" id="gc-rprt-prblm-f6" />Autre problème qui ne figure pas sur cette liste
+								</label>
+								<input name="problem6" type="hidden" value="Non" />
+							</div>
+						</fieldset>
+						<button type="submit" class="btn btn-primary wb-toggle" data-toggle='{"stateOff": "hide", "stateOn": "show", "selector": ".gc-rprt-prblm-tggl"}'>Soumettre</button>
+					</form>
+				</div>
+				<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide">
+					<h3>Merci de votre aide!</h3>
+					<p>Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît <a href="https://www.canada.ca/fr/contact.html">contactez-nous</a>.</p>
+				</div>
+			</div>
+		</details>
+	</div>
+</div>
diff --git a/sites/feedback/ajax/report-problem-v2-en.html b/sites/feedback/ajax/deprecated/report-problem-v2-en.html
similarity index 100%
rename from sites/feedback/ajax/report-problem-v2-en.html
rename to sites/feedback/ajax/deprecated/report-problem-v2-en.html
diff --git a/sites/feedback/ajax/report-problem-v2-fr.html b/sites/feedback/ajax/deprecated/report-problem-v2-fr.html
similarity index 100%
rename from sites/feedback/ajax/report-problem-v2-fr.html
rename to sites/feedback/ajax/deprecated/report-problem-v2-fr.html
diff --git a/sites/feedback/ajax/deprecated/report-problem-v3-en.html b/sites/feedback/ajax/deprecated/report-problem-v3-en.html
new file mode 100644
index 000000000..5424322e8
--- /dev/null
+++ b/sites/feedback/ajax/deprecated/report-problem-v3-en.html
@@ -0,0 +1,77 @@
+<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>
diff --git a/sites/feedback/ajax/deprecated/report-problem-v3-fr.html b/sites/feedback/ajax/deprecated/report-problem-v3-fr.html
new file mode 100644
index 000000000..f09f06c17
--- /dev/null
+++ b/sites/feedback/ajax/deprecated/report-problem-v3-fr.html
@@ -0,0 +1,77 @@
+<div class="row row-no-gutters"><div class="col-sm-11 col-md-7 col-lg-6">
+	<details class="brdr-0">
+		<summary class="btn btn-default text-center">Signaler un problème ou une erreur sur cette 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;,&quot;content&quot;:&quot;.form-content&quot;}" >
+						<!--
+
+						Insérez ici la configuration de soumission du formulaire
+
+						-->
+						<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="fr">
+						<input type="hidden" name="pageOwner" value="gc:institutions/"> <!-- Department name from canada.ca controlled vocabulary -->
+						<input name="subject" type="hidden" value="Signaler un problème ou une erreur sur cette page">
+						<fieldset>
+							<legend>
+								<span class="field-name">Veuillez sélectionner toutes les cases qui s'appliquent :</span>
+							</legend>
+							<div class="checkbox">
+								<label for="problem1">
+									<input name="problem1" id="problem1" type="checkbox" value="Yes" >Un lien, un bouton ou une vidéo ne fonctionne pas
+								</label>
+								<input name="problem1" type="hidden" value="">
+							</div>
+							<div class="checkbox">
+								<label for="problem2">
+									<input name="problem2" id="problem2" type="checkbox" value="Yes" >Il y a une erreur d'orthographe ou de grammaire
+								</label>
+								<input name="problem2" type="hidden" value="">
+							</div>
+							<div class="checkbox">
+								<label for="problem3">
+									<input name="problem3" id="problem3" type="checkbox" value="Yes" >Les renseignements sont incomplets
+								</label>
+								<input name="problem3" type="hidden" value="">
+							</div>
+							<div class="checkbox">
+								<label for="problem4">
+									<input name="problem4" id="problem4" type="checkbox" value="Yes" >L'information n'est plus à jour ou est erronée
+								</label>
+								<input name="problem4" type="hidden" value="">
+							</div>
+							<div class="checkbox">
+								<label for="problem5">
+									<input name="problem5" id="problem5" type="checkbox" value="Yes" >Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte
+								</label>
+								<input name="problem5" type="hidden" value="">
+							</div>
+							<div class="checkbox">
+								<label for="problem11">
+									<input name="problem11" id="problem11" type="checkbox" value="Yes" >Je n'arrive pas à trouver ce que je cherche
+								</label>
+								<input name="problem11" type="hidden" value="">
+							</div>
+								<div class="checkbox">
+									<label for="problem12">
+										<input name="problem12" id="problem12" type="checkbox" value="Yes" >Autre problème qui ne figure pas sur cette liste
+									</label>
+								<input name="problem12" type="hidden" value="">
+							</div>
+						</fieldset>
+						<button type="submit" class="btn btn-primary">Soumettre</button>
+					</form>
+				</div>
+				<div class="success-message hide">
+					<h3>Merci de votre aide!</h3>
+					<p>Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît <a href="https://www.canada.ca/fr/contact.html">contactez-nous</a>.</p>
+				</div>
+				<p class="failure-message hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>
+			</div>
+		</div>
+	</details>
+</div></div>
diff --git a/sites/feedback/ajax/deprecated/report-problem-v4-en.html b/sites/feedback/ajax/deprecated/report-problem-v4-en.html
new file mode 100644
index 000000000..202c60404
--- /dev/null
+++ b/sites/feedback/ajax/deprecated/report-problem-v4-en.html
@@ -0,0 +1,93 @@
+<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>
diff --git a/sites/feedback/ajax/deprecated/report-problem-v4-fr.html b/sites/feedback/ajax/deprecated/report-problem-v4-fr.html
new file mode 100644
index 000000000..c43331a49
--- /dev/null
+++ b/sites/feedback/ajax/deprecated/report-problem-v4-fr.html
@@ -0,0 +1,92 @@
+<div class="row row-no-gutters"><div class="col-sm-11 col-md-7 col-lg-6">
+	<details class="brdr-0">
+		<summary class="btn btn-default text-center">Signaler un problème ou une erreur sur cette 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">Veuillez sélectionner toutes les cases qui s'appliquent :</span>
+							</legend>
+							<div class="checkbox">
+								<label for="problem1">
+									<input name="problem1" id="problem1" type="checkbox" value="Yes" >Un lien, un bouton ou une vidéo ne fonctionne pas
+								</label>
+								<input name="problem1" type="hidden" value="">
+							</div>
+							<div class="checkbox">
+								<label for="problem2">
+									<input name="problem2" id="problem2" type="checkbox" value="Yes" >Il y a une erreur d'orthographe ou de grammaire
+								</label>
+								<input name="problem2" type="hidden" value="">
+							</div>
+							<div class="checkbox">
+								<label for="problem3">
+									<input name="problem3" id="problem3" type="checkbox" value="Yes" >Les renseignements sont incomplets
+								</label>
+								<input name="problem3" type="hidden" value="">
+							</div>
+							<div class="checkbox">
+								<label for="problem4">
+									<input name="problem4" id="problem4" type="checkbox" value="Yes" >L'information n'est plus à jour ou est erronée
+								</label>
+								<input name="problem4" type="hidden" value="">
+							</div>
+							<div class="checkbox">
+								<label for="problem5">
+									<input name="problem5" id="problem5" type="checkbox" value="Yes" >Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte
+								</label>
+								<input name="problem5" type="hidden" value="">
+							</div>
+							<div class="checkbox">
+								<label for="problem11">
+									<input name="problem11" id="problem11" type="checkbox" value="Yes" >Je n'arrive pas à trouver ce que je cherche
+								</label>
+								<input name="problem11" type="hidden" value="">
+							</div>
+								<div class="checkbox">
+									<label for="problem12">
+										<input name="problem12" id="problem12" type="checkbox" value="Yes" >Autre problème qui ne figure pas sur cette liste
+									</label>
+								<input name="problem12" type="hidden" value="">
+							</div>
+						</fieldset>
+						<button type="submit" class="btn btn-primary">Soumettre</button>
+					</form>
+				</div>
+				<div class="success-message hide">
+					<h3>Merci de votre aide!</h3>
+					<p>Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît <a href="https://www.canada.ca/fr/contact.html">contactez-nous</a>.</p>
+				</div>
+				<p class="failure-message hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>
+			</div>
+		</div>
+	</details>
+	</div>
+</div>
diff --git a/sites/feedback/ajax/page-feedback-en.html b/sites/feedback/ajax/page-feedback-en.html
new file mode 100644
index 000000000..5d6990078
--- /dev/null
+++ b/sites/feedback/ajax/page-feedback-en.html
@@ -0,0 +1,84 @@
+<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>
diff --git a/sites/feedback/ajax/page-feedback-fr.html b/sites/feedback/ajax/page-feedback-fr.html
new file mode 100644
index 000000000..c0c147076
--- /dev/null
+++ b/sites/feedback/ajax/page-feedback-fr.html
@@ -0,0 +1,84 @@
+<div id="gc-pft" class="row wb-disable-allow" data-wb-jsonmanager='{
+	"name": "gc-pft",
+	"extractor": [
+		{ "selector": "title", "path": "pageTitle" },
+		{ "selector": "html", "attr": "lang", "path": "language" },
+		{ "interface": "locationHref", "path": "submissionPage" },
+		{ "selector": "#wb-lng ul li:first-child a[lang]", "attr": "href", "path": "oppositelang" },
+		{ "selector": "[data-feedback-theme]", "attr": "data-feedback-theme", "path": "themeopt" },
+		{ "selector": "[data-feedback-section]", "attr": "data-feedback-section", "path": "sectionopt" },
+		{ "selector": "meta[name=\"dcterms.creator\"]", "attr": "content", "path": "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">Donnez votre rétroaction sur cette 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]",
+					"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">Avez-vous trouvé ce que vous cherchiez?</span></legend>
+					<div class="col-xs-12 nojs-show">
+						<button name="helpful" value="Yes-Oui" class="btn btn-primary" aria-describedby="gc-pft-why">Oui</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">Oui</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"}
+						]'>Non</button>
+					</div>
+				</fieldset>
+				<div class="gc-pft-no nojs-show">
+					<p id="gc-pft-why" class="nojs-show mrgn-tp-lg mrgn-bttm-md">Sinon, dites nous pourquoi ci-dessous&nbsp;:</p>
+					<p class="nojs-hide wb-inv" aria-live="polite">Dites nous pourquoi ci-dessous&nbsp;:</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>Besoin d’aide urgente pour résoudre un problème? Communiquez avec nous</summary>
+								<p class="mrgn-bttm-0 mrgn-tp-md fnt-nrml">
+									<a href="#"></a>
+								</p>
+							</details>
+						</template>
+					</div>
+					<div class="form-group">
+						<label for="gc-pft-prblm" class="mrgn-bttm-0"><span class="field-name">Veuillez fournir plus de détails</span></label>
+						<p id="gc-pft-prblm-note" class="mrgn-bttm-sm"><small>Vous ne recevrez pas de réponse. N'incluez pas de renseignements personnels (téléphone, courriel, NAS, renseignements financiers, médicaux ou professionnels).</small></p>
+						<p id="gc-pft-prblm-instruction" class="fnt-nrml small">Maximum de 300 caractères</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">Soumettre</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> Merci de vos commentaires.</p>
+			</div>
+		</section>
+	</div>
+</div>
diff --git a/sites/feedback/ajax/report-problem-aa-en.html b/sites/feedback/ajax/report-problem-aa-en.html
deleted file mode 100644
index 5e2384442..000000000
--- a/sites/feedback/ajax/report-problem-aa-en.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<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;,&quot;content&quot;:&quot;.form-content&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"  data-gc-analytics-rap="A link, button or video is not working-Un lien, un bouton ou une vidéo ne fonctionne pas">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"  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>
-						<div class="checkbox">
-							<label for="problem3">
-								<input name="problem3" id="problem3" type="checkbox" value="Yes"  data-gc-analytics-rap="Information is missing-Les renseignements sont incomplets">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"  data-gc-analytics-rap="Information is outdated or wrong-L'information n'est plus à jour ou est erronée">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"  data-gc-analytics-rap=" Login error when trying to access an account (e.g. My Service Canada Account)-Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte (ex. Mon dossier Service Canada)">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"  data-gc-analytics-rap="GC Key access-Accès CléGC">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"  data-gc-analytics-rap="SecureKey Concierge (Banking Credential) access-Accès SecureKey Service de Concierge (justificatifs d'identité bancaires)">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"  data-gc-analytics-rap="Personal Access Code (PAC) problems or EI Access Code (AC) problems-Problème avec le Code d'accès personnel (CAP) ou avec le Code d'accès (CA) de l'assurance emploi">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"  data-gc-analytics-rap="Social Insurance Number (SIN) validation problems-Problème lié à la validation du numéro d'assurance sociale (NAS)">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"  data-gc-analytics-rap="Other login error not in this list-Autre erreur lors de l'ouverture de session qui ne figure pas sur cette liste">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"  data-gc-analytics-rap="I can't find what I'm looking for-Je n'arrive pas à trouver ce que je cherche">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"  data-gc-analytics-rap="Other issue not in this list-Autre problème qui ne figure pas sur cette liste">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>
diff --git a/sites/feedback/ajax/report-problem-aa-fr.html b/sites/feedback/ajax/report-problem-aa-fr.html
deleted file mode 100644
index 5d883e9c3..000000000
--- a/sites/feedback/ajax/report-problem-aa-fr.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<div class="row row-no-gutters"><div class="col-sm-11 col-md-7 col-lg-6">
-<details class="brdr-0">
-	<summary class="btn btn-default text-center">Signaler un problème ou une erreur sur cette 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;,&quot;content&quot;:&quot;.form-content&quot;}">
-					<!--
-
-					Insérez ici la configuration de soumission du formulaire
-
-					-->
-					<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="fr">
-					<input type="hidden" name="pageOwner" value="gc:institutions/"> <!-- Department name from canada.ca controlled vocabulary -->
-					<input name="subject" type="hidden" value="Signaler un problème ou une erreur sur cette page">
-					<fieldset>
-						<legend>
-							<span class="field-name">Veuillez sélectionner toutes les cases qui s'appliquent :</span>
-						</legend>
-						<div class="checkbox">
-							<label for="problem1">
-								<input name="problem1" id="problem1" type="checkbox" value="Yes"  data-gc-analytics-rap="A link, button or video is not working-Un lien, un bouton ou une vidéo ne fonctionne pas">Un lien, un bouton ou une vidéo ne fonctionne pas
-							</label>
-							<input name="problem1" type="hidden" value="">
-						</div>
-						<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">Il y a une erreur d'orthographe ou de grammaire
-							</label>
-							<input name="problem2" type="hidden" value="">
-						</div>
-						<div class="checkbox">
-							<label for="problem3">
-								<input name="problem3" id="problem3" type="checkbox" value="Yes"  data-gc-analytics-rap="Information is missing-Les renseignements sont incomplets">Les renseignements sont incomplets
-							</label>
-							<input name="problem3" type="hidden" value="">
-						</div>
-						<div class="checkbox">
-							<label for="problem4">
-								<input name="problem4" id="problem4" type="checkbox" value="Yes"  data-gc-analytics-rap=" Information is outdated or wrong-L'information n'est plus à jour ou est erronée">L'information n'est plus à jour ou est erronée
-							</label>
-							<input name="problem4" type="hidden" value="">
-						</div>
-						<div class="checkbox">
-							<label for="problem5">
-								<input name="problem5" id="problem5" type="checkbox" value="Yes"  data-gc-analytics-rap=" Login error when trying to access an account (e.g. My Service Canada Account)-Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte (ex. Mon dossier Service Canada)">Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte (ex. Mon dossier Service Canada)
-							</label>
-							<input name="problem5" type="hidden" value="">
-						</div>
-						<ul>
-							<li class="checkbox">
-								<label for="problem6a">
-									<input name="problem6" id="problem6a" type="checkbox" value="Yes"  data-gc-analytics-rap="GC Key access-Accès CléGC">Accès CléGC
-								</label>
-								<input name="problem6" type="hidden" value="">
-							</li>
-							<li class="checkbox">
-								<label for="problem7">
-									<input name="problem7" id="problem7" type="checkbox" value="Yes"  data-gc-analytics-rap="SecureKey Concierge (Banking Credential) access-Accès SecureKey Service de Concierge (justificatifs d'identité bancaires)">Accès SecureKey Service de Concierge (justificatifs d'identité bancaires)
-								</label>
-								<input name="problem7" type="hidden" value="">
-							</li>
-							<li class="checkbox">
-								<label for="problem8">
-									<input name="problem8" id="problem8" type="checkbox" value="Yes"  data-gc-analytics-rap="Personal Access Code (PAC) problems or EI Access Code (AC) problems-Problème avec le Code d'accès personnel (CAP) ou avec le Code d'accès (CA) de l'assurance emploi">Problème avec le Code d'accès personnel (CAP) ou avec le Code d'accès (CA) de l'assurance emploi
-								</label>
-								<input name="problem8" type="hidden" value="">
-							</li>
-							<li class="checkbox">
-								<label for="problem9">
-									<input name="problem9" id="problem9" type="checkbox" value="Yes"  data-gc-analytics-rap="Social Insurance Number (SIN) validation problems-Problème lié à la validation du numéro d'assurance sociale (NAS)">Problème lié à la validation du numéro d'assurance sociale (NAS)
-								</label>
-								<input name="problem9" type="hidden" value="">
-							</li>
-							<li class="checkbox">
-								<label for="problem10">
-									<input name="problem10" id="problem10" type="checkbox" value="Yes"  data-gc-analytics-rap="Other login error not in this list-Autre erreur lors de l'ouverture de session qui ne figure pas sur cette liste">Autre erreur lors de l'ouverture de session qui ne figure pas sur cette liste
-								</label>
-								<input name="problem10" type="hidden" value="">
-							</li>
-						</ul>
-						<div class="checkbox">
-							<label for="problem11">
-								<input name="problem11" id="problem11" type="checkbox" value="Yes"  data-gc-analytics-rap="I can't find what I'm looking for-Je n'arrive pas à trouver ce que je cherche">Je n'arrive pas à trouver ce que je cherche
-							</label>
-							<input name="problem11" type="hidden" value="">
-						</div>
-							<div class="checkbox">
-								<label for="problem12">
-									<input name="problem12" id="problem12" type="checkbox" value="Yes"  data-gc-analytics-rap="Other issue not in this list-Autre problème qui ne figure pas sur cette liste">Autre problème qui ne figure pas sur cette liste
-								</label>
-							<input name="problem12" type="hidden" value="">
-						</div>
-					</fieldset>
-					<button type="submit" class="btn btn-primary">Soumettre</button>
-				</form>
-			</div>
-			<div class="success-message hide">
-				<h3>Merci de votre aide!</h3>
-				<p>Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît <a href="https://www.canada.ca/fr/contact.html">contactez-nous</a>.</p>
-			</div>
-			<p class="failure-message hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>
-		</div>
-	</div>
-</details>
-</div></div>
diff --git a/sites/feedback/ajax/report-problem-en.html b/sites/feedback/ajax/report-problem-en.html
index 202c60404..e3b20d197 100644
--- a/sites/feedback/ajax/report-problem-en.html
+++ b/sites/feedback/ajax/report-problem-en.html
@@ -12,12 +12,10 @@
 							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='{
@@ -31,6 +29,8 @@
 									<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>
diff --git a/sites/feedback/ajax/report-problem-fr.html b/sites/feedback/ajax/report-problem-fr.html
index c43331a49..2603c761b 100644
--- a/sites/feedback/ajax/report-problem-fr.html
+++ b/sites/feedback/ajax/report-problem-fr.html
@@ -11,12 +11,10 @@
 						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='{
@@ -30,6 +28,8 @@
 								<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">Veuillez sélectionner toutes les cases qui s'appliquent :</span>
diff --git a/sites/feedback/ajax/report-problem-v1-en.html b/sites/feedback/ajax/report-problem-v1-en.html
deleted file mode 100644
index 5ffa139c1..000000000
--- a/sites/feedback/ajax/report-problem-v1-en.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<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>
diff --git a/sites/feedback/ajax/report-problem-v1-fr.html b/sites/feedback/ajax/report-problem-v1-fr.html
deleted file mode 100644
index e9a045d7a..000000000
--- a/sites/feedback/ajax/report-problem-v1-fr.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<div class="row row-no-gutters"><div class="col-sm-11 col-md-7 col-lg-6">
-<details class="brdr-0"><summary class="btn btn-default text-center">Signaler un problème ou une erreur sur cette 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">Veuillez cocher toutes les réponses pertinentes&nbsp;:</span></legend>
-				<div class="checkbox">
-					<label for="gc-rprt-prblm-f1">
-						<input type="checkbox" name="problem1" value="Oui" id="gc-rprt-prblm-f1" />Un lien, un bouton ou une vidéo ne fonctionne pas
-					</label>
-					<input name="problem1" type="hidden" value="Non" />
-				</div>
-				<div class="checkbox">
-					<label for="gc-rprt-prblm-f2">
-						<input type="checkbox" name="problem2" value="Oui" id="gc-rprt-prblm-f2" />Il y a une erreur d'orthographe ou de grammaire
-					</label>
-					<input name="problem2" type="hidden" value="Non" />
-				</div>
-				<div class="checkbox">
-					<label for="gc-rprt-prblm-f3">
-						<input type="checkbox" name="problem3" value="Oui" id="gc-rprt-prblm-f3" />Les renseignements sont incomplets
-					</label>
-					<input name="problem3" type="hidden" value="Non" />
-				</div>
-				<div class="checkbox">
-					<label for="gc-rprt-prblm-f4">
-						<input type="checkbox" name="problem4" value="Oui" id="gc-rprt-prblm-f4" />L'information n'est plus à jour ou est erronée
-					</label>
-					<input name="problem4" type="hidden" value="Non" />
-				</div>
-				<div class="checkbox">
-					<label for="gc-rprt-prblm-f5">
-						<input type="checkbox" name="problem5" value="Oui" id="gc-rprt-prblm-f5" />Je n'arrive pas à trouver ce que je cherche
-					</label>
-					<input name="problem5" type="hidden" value="Non" />
-				</div>
-				<div class="checkbox">
-					<label for="gc-rprt-prblm-f6">
-						<input type="checkbox" name="problem6" value="Oui" id="gc-rprt-prblm-f6" />Autre problème qui ne figure pas sur cette liste
-					</label>
-					<input name="problem6" type="hidden" value="Non" />
-				</div>
-			</fieldset>
-			<button type="submit" class="btn btn-primary wb-toggle" data-toggle='{"stateOff": "hide", "stateOn": "show", "selector": ".gc-rprt-prblm-tggl"}'>Soumettre</button>
-		</form>
-	</div>
-	<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide">
-		<h3>Merci de votre aide!</h3>
-		<p>Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît <a href="https://www.canada.ca/fr/contact.html">contactez-nous</a>.</p>
-	</div>
-</div>
-</details>
-</div></div>
diff --git a/sites/feedback/ajax/report-problem-v3-en.html b/sites/feedback/ajax/report-problem-v3-en.html
deleted file mode 100644
index 1c10340a8..000000000
--- a/sites/feedback/ajax/report-problem-v3-en.html
+++ /dev/null
@@ -1,78 +0,0 @@
-<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>
diff --git a/sites/feedback/ajax/report-problem-v3-fr.html b/sites/feedback/ajax/report-problem-v3-fr.html
deleted file mode 100644
index 6a673dc3a..000000000
--- a/sites/feedback/ajax/report-problem-v3-fr.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<div class="row row-no-gutters"><div class="col-sm-11 col-md-7 col-lg-6">
-<details class="brdr-0">
-	<summary class="btn btn-default text-center">Signaler un problème ou une erreur sur cette 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;,&quot;content&quot;:&quot;.form-content&quot;}" >
-					<!--
-
-					Insérez ici la configuration de soumission du formulaire
-
-					-->
-					<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="fr">
-					<input type="hidden" name="pageOwner" value="gc:institutions/"> <!-- Department name from canada.ca controlled vocabulary -->
-					<input name="subject" type="hidden" value="Signaler un problème ou une erreur sur cette page">
-					<fieldset>
-						<legend>
-							<span class="field-name">Veuillez sélectionner toutes les cases qui s'appliquent :</span>
-						</legend>
-						<div class="checkbox">
-							<label for="problem1">
-								<input name="problem1" id="problem1" type="checkbox" value="Yes" >Un lien, un bouton ou une vidéo ne fonctionne pas
-							</label>
-							<input name="problem1" type="hidden" value="">
-						</div>
-						<div class="checkbox">
-							<label for="problem2">
-								<input name="problem2" id="problem2" type="checkbox" value="Yes" >Il y a une erreur d'orthographe ou de grammaire
-							</label>
-							<input name="problem2" type="hidden" value="">
-						</div>
-						<div class="checkbox">
-							<label for="problem3">
-								<input name="problem3" id="problem3" type="checkbox" value="Yes" >Les renseignements sont incomplets
-							</label>
-							<input name="problem3" type="hidden" value="">
-						</div>
-						<div class="checkbox">
-							<label for="problem4">
-								<input name="problem4" id="problem4" type="checkbox" value="Yes" >L'information n'est plus à jour ou est erronée
-							</label>
-							<input name="problem4" type="hidden" value="">
-						</div>
-						<div class="checkbox">
-							<label for="problem5">
-								<input name="problem5" id="problem5" type="checkbox" value="Yes" >Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte
-							</label>
-							<input name="problem5" type="hidden" value="">
-						</div>
-						<div class="checkbox">
-							<label for="problem11">
-								<input name="problem11" id="problem11" type="checkbox" value="Yes" >Je n'arrive pas à trouver ce que je cherche
-							</label>
-							<input name="problem11" type="hidden" value="">
-						</div>
-							<div class="checkbox">
-								<label for="problem12">
-									<input name="problem12" id="problem12" type="checkbox" value="Yes" >Autre problème qui ne figure pas sur cette liste
-								</label>
-							<input name="problem12" type="hidden" value="">
-						</div>
-					</fieldset>
-					<button type="submit" class="btn btn-primary">Soumettre</button>
-				</form>
-			</div>
-			<div class="success-message hide">
-				<h3>Merci de votre aide!</h3>
-				<p>Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît <a href="https://www.canada.ca/fr/contact.html">contactez-nous</a>.</p>
-			</div>
-			<p class="failure-message hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>
-		</div>
-	</div>
-</details>
-</div></div>
diff --git a/sites/feedback/feedback-aa-en.html b/sites/feedback/feedback-aa-en.html
deleted file mode 100644
index 1420bce91..000000000
--- a/sites/feedback/feedback-aa-en.html
+++ /dev/null
@@ -1,24 +0,0 @@
----
-{
-	"title": "Page feedback form using Analytics data attributes",
-	"language": "en",
-	"altLangPage": "feedback-aa-fr.html",
-	"breadcrumbs": [
-		{ "title": "Canada.ca", "link": "https://www.canada.ca/en.html" }
-	],
-	"secondlevel": false,
-	"dateModified": "2022-04-26",
-	"share": "true",
-	"feedbackPath": "ajax/report-problem-aa-en.html"
-}
----
-<span class="wb-prettify all-pre hide"></span>
-<p>This page feedback form is using analytics data attributes.</p>
-<h2>HTML code</h2>
-<pre><code>&lt;div data-ajax-replace="ajax/report-problem-aa-en.html"&gt;
-	&lt;div class=&quot;row row-no-gutters&quot;&gt;
-		&lt;div class=&quot;col-sm-9 col-md-6 col-lg-5&quot;&gt;
-			&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html"&gt;Report a problem on this page&lt;/a&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;</code></pre>
diff --git a/sites/feedback/feedback-aa-fr.html b/sites/feedback/feedback-aa-fr.html
deleted file mode 100644
index 0de3a1b7d..000000000
--- a/sites/feedback/feedback-aa-fr.html
+++ /dev/null
@@ -1,24 +0,0 @@
----
-{
-	"title": "Formulaire de commentaires de page utilisant les attributs de données analytiques",
-	"language": "fr",
-	"altLangPage": "feedback-aa-en.html",
-	"breadcrumbs": [
-		{ "title": "Canada.ca", "link": "https://www.canada.ca/en.html" }
-	],
-	"secondlevel": false,
-	"dateModified": "2022-04-26",
-	"share": "true",
-	"feedbackPath": "ajax/report-problem-aa-fr.html"
-}
----
-<span class="wb-prettify all-pre hide"></span>
-<p>Ce formulaire de commentaires de page utilise des attributs de données analytiques.</p>
-<h2>Le code HTML</h2>
-<pre><code>&lt;div data-ajax-replace="ajax/report-problem-aa-fr.html"&gt;
-	&lt;div class=&quot;row row-no-gutters&quot;&gt;
-		&lt;div class=&quot;col-sm-11 col-md-7 col-lg-6&quot;&gt;
-			&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html"&gt;Signaler un problème ou une erreur sur cette page &lt;/a&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;</code></pre>
diff --git a/sites/feedback/feedback-docs-en.html b/sites/feedback/feedback-docs-en.html
index 3b2176c3d..e697ce38e 100644
--- a/sites/feedback/feedback-docs-en.html
+++ b/sites/feedback/feedback-docs-en.html
@@ -1,397 +1,379 @@
 ---
 {
-	"title": "Page feedback (RAP) - Documentation",
+	"title": "Feedback area - Documentation",
 	"language": "en",
 	"altLangPage": "feedback-docs-fr.html",
-	"breadcrumbs": [
-		{ "title": "Canada.ca", "link": "https://www.canada.ca/en.html" }
-	],
 	"secondlevel": false,
-	"dateModified": "2022-04-26",
-	"share": true,
-	"feedbackPath": "ajax/report-problem-en.html"
+	"dateModified": "2023-01-10",
+	"share": true
 }
 ---
 <span class="wb-prettify all-pre hide"></span>
 <dl class="horizontal">
 	<dt>Status</dt>
 	<dd>Stable</dd>
+	<dt>Version</dt>
+	<dd>5.0.0</dd>
 	<dt>Type</dt>
 	<dd>Canada.ca site functionality</dd>
-	<dt>Last review</dt>
-	<dd>2022-04-26</dd>
 </dl>
 
-<h2>Purpose</h2>
-<p>Displays the Page feedback form</p>
+<h2>Introduction</h2>
+<h3>Purpose</h3>
+<p>Provide feedback on any given page through a form.</p>
 
+<h3>Evaluation and report</h3>
+<p>There is no evaluation and report available for this component.</p>
+
+<h3>Guidance</h3>
+<ul>
+	<li><a href="https://design.canada.ca/continuous-improvement/monitoring/feedback.html">Page feedback tool</a></li>
+	<li><a href="https://design.canada.ca/common-design-patterns/report-problem.html">Report a problem</a></li>
+</ul>
 
-<h2>Working example</h2>
+<h3>Variants</h3>
+<p>This component supports the following variants:</p>
 <ul>
-	<li><a href="feedback-en.html">Default page feedback form example</a></li>
-	<li><a href="feedback-aa-en.html">Default page feedback form with analytics data attributes example</a></li>
-	<li><a href="/sites/page-details/deprecated/page-details-v1-en.html">Default page feedback form version 1 example</a></li>
+	<li><a href="#variantPFT">Page Feedback Tool (default)</a></li>
+	<li><a href="#variantPFTContact">Page Feedback Tool with contact link</a></li>
+	<li><a href="#variantRAP">Report a Problem (RAP)</a></li>
 </ul>
+<div class="alert alert-info">
+	<h4>Note</h4>
+	<p>All variants are comprised of two sub-components:</p>
+	<ul>
+		<li>The first one is used for the integration on the page.</li>
+		<li>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.</li>
+	</ul>
+</div>
+
+<h2 id="variantPFT">Variant 1: Page Feedback Tool (default) <span class="label label-warning mrgn-lft-md">Provisional</span></h2>
+<h3>Iteration 1</h3>
 
-<h2>How to implement</h2>
+<h4>Working example(s)</h4>
 <ul>
-	<li><p>To show the page feedback form, create a <code>&lt;div&gt;</code> with the following data attribute: <code>data-ajax-replace="ajax/report-problem-en.html"</code>.</p>
-		<p>For the basic HTML version, a link element should be created inside a <code>&lt;div&gt;</code> that points to the report a problem form page: <code>&lt;div&gt;&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html"&gt;Report a problem on this page&lt;/a&gt;&lt;/div&gt;</code></p>
-		<p>For more information about Data Ajax plugin, please visit <a href="https://wet-boew.github.io/wet-boew/docs/ref/data-ajax/data-ajax-en.html">Data Ajax documentation page</a></p>
+	<li><a href="page-feedback-en.html">Page feedback</a></li>
+</ul>
+
+<h4>How to implement</h4>
+<ul>
+	<li>To show the page feedback form, create a <code>&lt;div class="wb-disable-allow"&gt;</code> with the following data attributes:
+		<ul>
+			<li>Mandatory: <code>data-ajax-replace="ajax/page-feedback-en.html"</code></li>
+			<li>Optional: <code>data-feedback-theme="[Text defining the theme of your page]"</code></li>
+			<li>Optional: <code>data-feedback-section="[Text defining the section where your page resides]"</code></li>
+		</ul>
 	</li>
+	<li>Additionally, your page needs to have the following metadata: <code>&lt;meta name="dcterms.creator" content="[Department name]"&gt;</code></li>
 </ul>
+<p>For more information about Data Ajax plugin, please visit <a href="https://wet-boew.github.io/wet-boew/docs/ref/data-ajax/data-ajax-en.html">Data Ajax documentation page</a>.</p>
 
-<h2>Evaluation and report</h2>
-<p>There is no evaluation and report available for this component.</p>
+<h5>GCWeb Jekyll specific</h5>
+<p>To apply this variant's optional attributes on any given page, you will need to do the following in the page's front-matter:</p>
+<ul>
+	<li>Set the variable <code>feedbackData</code> to an object containing the following customizable strings:
+		<ul>
+			<li><code>section</code>: to define the section where your page resides.</li>
+			<li><code>theme</code>: to define the theme of your page.</li>
+		</ul>
+	</li>
+</ul>
+<p>For example:</p>
+<pre><code>"feedbackData": {
+	"theme": "Theme",
+	"section": "Section"
+}</code></pre>
+
+<h4>Code sample</h4>
+{%- highlight html -%}
+<div class="wb-disable-allow" data-ajax-replace="ajax/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>
+{%- endhighlight -%}
+<details>
+	<summary>Ajaxed-in content</summary>
+	{%- highlight html -%}
+	{%- include_relative ajax/page-feedback-en.html -%}
+	{%- endhighlight -%}
+</details>
+
+<h2 id="variantPFTContact">Variant 2: Page Feedback Tool With Contact Link <span class="label label-warning mrgn-lft-md">Provisional</span></h2>
+<h3>Iteration 1</h3>
+
+<h4>Working example(s)</h4>
+<ul>
+	<li><a href="page-feedback-contact-en.html">Page feedback tool with contact link</a></li>
+</ul>
 
-<h2>API (Version 2.0)</h2>
+<h4>How to implement</h4>
+<ul>
+	<li>To show the page feedback form, create a <code>&lt;div class="wb-disable-allow"&gt;</code> with the following data attributes:
+		<ul>
+			<li>Mandatory: <code>data-ajax-replace="ajax/page-feedback-en.html"</code></li>
+			<li>Mandatory: <code>data-feedback-link="[Contact link text]"</code></li>
+			<li>Mandatory: <code>data-feedback-url="[Contact link URL]"</code></li>
+			<li>Optional: <code>data-feedback-theme="[Text defining the theme of your page]"</code></li>
+			<li>Optional: <code>data-feedback-section="[Text defining the section where your page resides]"</code></li>
+		</ul>
+	</li>
+	<li>For the basic HTML version, a link element should be created inside your <code>&lt;div&gt;</code> that points to the report a problem form page: <code>&lt;div&gt;&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html"&gt;Report a problem on this page&lt;/a&gt;&lt;/div&gt;</code>.</li>
+	<li>Additionally, you can define the following metadata: <code>&lt;meta name="dcterms.creator" content="[Department name]"&gt;</code></li>
+</ul>
+<p>For more information about Data Ajax plugin, please visit <a href="https://wet-boew.github.io/wet-boew/docs/ref/data-ajax/data-ajax-en.html">Data Ajax documentation page</a>.</p>
+
+<h5>GCWeb Jekyll specific</h5>
+<p>To apply this variant on any given page, you will need to do the following in the page's front-matter:</p>
+<ul>
+	<li>Set the variable <code>feedbackContact</code> to an object containing the following customizable strings:
+		<ul>
+			<li><code>link</code>: to define the contact link's text.</li>
+			<li><code>url</code>: to define the contact link's URL.</li>
+		</ul>
+	</li>
+	<li>Optionally, you can set the variable <code>feedbackData</code> to an object containing the following customizable strings:
+		<ul>
+			<li><code>section</code>: to define the section where your page resides.</li>
+			<li><code>theme</code>: to define the theme of your page.</li>
+		</ul>
+	</li>
+</ul>
+<p>For example:</p>
+<pre><code>"feedbackContact": {
+	"link": "Contact link",
+	"url": "https://canada.ca"
+},
+"feedbackData": {
+	"theme": "Theme",
+	"section": "Section"
+}</code></pre>
+
+<h4>Code sample</h4>
+{%- highlight html -%}
+<div class="wb-disable-allow" data-ajax-replace="ajax/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>
+{%- endhighlight -%}
+<details>
+	<summary>Ajaxed-in content</summary>
+	{%- highlight html -%}
+	{%- include_relative ajax/page-feedback-en.html -%}
+	{%- endhighlight -%}
+</details>
 
+<h2 id="variantRAP">Variant 3: Report a Problem (RAP) <span class="label label-success mrgn-lft-md">Stable</span></h2>
+<h3>Iteration 5</h3>
+<p>Here is a list of changes that happened since the previous iteration:</p>
 <table class="table table-bordered">
 	<tr>
-		<th>CSS Class</th>
-		<th>Template</th>
-		<th>Visual rendering</th>
-		<th>Schema</th>
+		<th style="width:0;">Breaking</th>
+		<td>
+			<ul>
+				<li>Removed JSON Manager extraction for "externalReferer" and "subject".</li>
+			</ul>
+		</td>
+	</tr>
+	<tr>
+		<th>Additions</th>
+		<td>
+			<ul>
+				<li>Added static hidden inputs for "externalReferer" and "subject"</li>
+			</ul>
+		</td>
 	</tr>
 	<tr>
-		<td>n.a.</td>
-		<td>Version 2.0</td>
-		<td>n.a.</td>
-		<td>n.a.</td>
+		<th>Fixes</th>
+		<td>n/a</td>
 	</tr>
 </table>
 
-<h3>Template (latest: v2.0)</h3>
-<p>Template migration notes</p>
-<h4>Site template includes</h4>
-<div class="row">
-	<div class="col-md-6">
-		<h5>Version 2.0</h5>
-		<p>The html inserted by the Data Ajax plugin can be found on the following page: <a href="https://github.com/wet-boew/GCWeb/blob/master/sites/feedback/ajax/report-problem-en.html" >https://github.com/wet-boew/GCWeb/blob/master/sites/feedback/ajax/report-problem-en.html</a>.</p>
-<pre><code><ins>&lt;div data-ajax-replace="ajax/report-problem-en.html"&gt;
-	&lt;div class=&quot;row row-no-gutters&quot;&gt;
-		&lt;div class=&quot;col-sm-9 col-md-6 col-lg-5&quot;&gt;
-			&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html"&gt;Report a problem on this page&lt;/a&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;</ins></code></pre>
-	</div>
-	<div class="col-md-6">
-		<h5>Before, version 1.0</h5>
-<pre><code><del>&lt;details class="brdr-0"&gt;
-	&lt;summary class="btn btn-default text-center"&gt;Report a problem on this page&lt;/summary&gt;
-	&lt;div class="well row"&gt;
-		&lt;div class="gc-rprt-prblm"&gt;
-			&lt;div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl" id="wb-auto-4"&gt;
-				{ feedback form }
-			&lt;/div&gt;
-			&lt;div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" id="wb-auto-5"&gt;
-				&lt;h3&gt;Thank you for your help!&lt;/h3&gt;
-				&lt;p&gt;You will not receive a reply. For enquiries, please &lt;a href="https://www.canada.ca/en/contact.html"&gt;contact us&lt;/a&gt;.&lt;/p&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/details&gt;</del></code></pre>
-	</div>
-</div>
+<h4>Working example(s)</h4>
+<ul>
+	<li><a href="report-problem-en.html">Report a problem</a></li>
+</ul>
 
-<h4>Report a problem (RAP) form (feedback)</h4>
-<p>Implemented ajax files reference</p>
+<h4>How to implement</h4>
 <ul>
-	<li><a href="ajax/report-problem-en.html">Version 4.0</a></li>
-	<li><a href="ajax/report-problem-v3-en.html">Version 3.0</a></li>
-	<li><a href="ajax/report-problem-v2-en.html">Version 2.0</a></li>
-	<li><a href="ajax/report-problem-aa-en.html">Version 2.0 with Adobe Analytic configuration</a></li>
-	<li><a href="ajax/report-problem-v1-en.html">Version 1.0</a></li>
+	<li>To show the Report a problem form, create a <code>&lt;div&gt;</code> with the following data attribute: <code>data-ajax-replace="ajax/report-problem-en.html"</code>.</li>
+	<li>For the basic HTML version, a link element should be created inside a <code>&lt;div&gt;</code> that points to the report a problem form page: <code>&lt;div&gt;&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html"&gt;Report a problem on this page&lt;/a&gt;&lt;/div&gt;</code>.</li>
 </ul>
 
-<h5>Version 4.0</h5>
-<pre><code>&lt;div class="row row-no-gutters"&gt;
-	&lt;div class="col-sm-9 col-md-6 col-lg-5"&gt;
-		&lt;details class="brdr-0"&gt;
-			&lt;summary class="btn btn-default text-center"&gt;Report a problem on this page&lt;/summary&gt;
-			&lt;div class="well row"&gt;
-				&lt;div class="gc-rprt-prblm"&gt;
-					&lt;div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl"&gt;
-						&lt;form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback"
-							data-wb-postback=&apos;{
-								"success": ".success-message",
-								"failure": ".failure-message"}&apos;
-							<ins>data-wb-jsonmanager=&apos;{
-								"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" }
-								]
-							}&apos;&gt;
-							&lt;div data-wb-json=&apos;{
-								"url": "#[rap]",
-								"mapping": [
-									{ "selector": "input", "attr": "name", "value": "/@id" },
-									{ "selector": "input", "attr": "value", "value": "/@value" }
-								]
-							}&apos;&gt;
-								&lt;template&gt;
-									&lt;input type="hidden" name=" value=" /&gt;
-								&lt;/template&gt;
-							&lt;/div&gt;</ins>
-							&lt;fieldset&gt;
-								&lt;legend&gt;
-									&lt;span class="field-name"&gt;Please select all that apply:&lt;/span&gt;
-								&lt;/legend&gt;
-								&lt;div class="checkbox"&gt;
-									&lt;label for="problem1"&gt;
-										&lt;input name="problem1" id="problem1" type="checkbox" value="Yes" &gt;A link, button or video is not working
-									&lt;/label&gt;
-									&lt;input name="problem1" type="hidden" value="&gt;
-								&lt;/div&gt;
-								&lt;div class="checkbox"&gt;
-									&lt;label for="problem2"&gt;
-										&lt;input name="problem2" id="problem2" type="checkbox" value="Yes" &gt;It has a spelling mistake
-									&lt;/label&gt;
-									&lt;input name="problem2" type="hidden" value="&gt;
-								&lt;/div&gt;
-								&lt;div class="checkbox"&gt;
-									&lt;label for="problem3"&gt;
-										&lt;input name="problem3" id="problem3" type="checkbox" value="Yes" &gt;Information is missing
-									&lt;/label&gt;
-									&lt;input name="problem3" type="hidden" value="&gt;
-								&lt;/div&gt;
-								&lt;div class="checkbox"&gt;
-									&lt;label for="problem4"&gt;
-										&lt;input name="problem4" id="problem4" type="checkbox" value="Yes" &gt;Information is outdated or wrong
-									&lt;/label&gt;
-									&lt;input name="problem4" type="hidden" value="&gt;
-								&lt;/div&gt;
-								&lt;div class="checkbox"&gt;
-									&lt;label for="problem5"&gt;
-										&lt;input name="problem5" id="problem5" type="checkbox" value="Yes" &gt;Login error when trying to access an account
-									&lt;/label&gt;
-									&lt;input name="problem5" type="hidden" value="&gt;
-								&lt;/div&gt;
-								&lt;div class="checkbox"&gt;
-									&lt;label for="problem11"&gt;
-										&lt;input name="problem11" id="problem11" type="checkbox" value="Yes" &gt;I can&apos;t find what I&apos;m looking for
-									&lt;/label&gt;
-									&lt;input name="problem11" type="hidden" value="&gt;
-								&lt;/div&gt;
-								&lt;div class="checkbox"&gt;
-									&lt;label for="problem12"&gt;
-										&lt;input name="problem12" id="problem12" type="checkbox" value="Yes" &gt;Other issue not in this list
-									&lt;/label&gt;
-									&lt;input name="problem12" type="hidden" value="&gt;
-								&lt;/div&gt;
-							&lt;/fieldset&gt;
-							&lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
-						&lt;/form&gt;
-					&lt;/div&gt;
-					&lt;div class="success-message hide"&gt;
-						&lt;h3&gt;Thank you for your help!&lt;/h3&gt;
-						&lt;p&gt;You will not receive a reply. For enquiries, please &lt;a href="https://www.canada.ca/en/contact.html"&gt;contact us&lt;/a&gt;.&lt;/p&gt;
-					&lt;/div&gt;
-					&lt;p class="failure-message hide"&gt;Something went wrong. Please submit your information via an alternative method.&lt;/p&gt;
-				&lt;/div&gt;
-			&lt;/div&gt;
-		&lt;/details&gt;
-	&lt;/div&gt;
+<p>For more information about Data Ajax plugin, please visit <a href="https://wet-boew.github.io/wet-boew/docs/ref/data-ajax/data-ajax-en.html">Data Ajax documentation page</a>.</p>
+<details>
+	<summary>Adobe Analytics implementation</summary>
+	<p>To implement Adobe Analytics in the Report a problem form, simply add the attribute <code>data-gc-analytics-rap</code> 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.</p>
+	<p>For example:</p>
+	<pre><code>&lt;div class=&quot;checkbox&quot;&gt;
+	&lt;label for=&quot;problem2&quot;&gt;
+		&lt;input name=&quot;problem2&quot; id=&quot;problem2&quot; type=&quot;checkbox&quot; value=&quot;Yes&quot; <ins>data-gc-analytics-rap=&quot;It has a spelling mistake-Il y a une erreur d&apos;orthographe ou de grammaire&quot;</ins>&gt;It has a spelling mistake
+	&lt;/label&gt;
+	&lt;input name=&quot;problem2&quot; type=&quot;hidden&quot; value=&quot;&quot;&gt;
 &lt;/div&gt;</code></pre>
+</details>
+
+<h5>Hidden input fields</h5>
+<p>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.<p>
+<p>The following tag <strong>needs</strong> to be present in the page: <code>&lt;meta name="dcterms.creator" content="[Department name]"&gt;</code><br>Where [Department name] is a department name from canada.ca controlled vocabulary, for example: <code>gc:institutions/service-canada</code></p>
+
+<h5>GCWeb Jekyll specific</h5>
+<p>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 (<code>_config.yml</code>):</p>
+<ul>
+	<li>set the variable <code>feedbackPath</code> to <code>"ajax/report-problem-en.html"</code>.</li>
+	<li>set the variable <code>feedbackFallback</code> to <code>true</code>.</li>
+</ul>
+
+<h4>Code sample</h4>
+{%- highlight 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>
+{%- endhighlight -%}
+<details>
+	<summary>Ajaxed-in content</summary>
+	{%- highlight html -%}
+	{%- include_relative ajax/report-problem-en.html -%}
+	{%- endhighlight -%}
+</details>
+
+<h3>Previous iterations</h3>
 
-<h5 class="wb-inv">Previous versions</h5>
 <details>
-	<summary>Version 3.0</summary>
-	<pre><code>&lt;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;,&quot;content&quot;:&quot;.form-content&quot;}" &gt;
-		&lt;fieldset&gt;
-			&lt;legend&gt;
-				&lt;span class="field-name"&gt;Please select all that apply:&lt;/span&gt;
-			&lt;/legend&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem1"&gt;
-					&lt;input name="problem1" id="problem1" type="checkbox" value="Yes" &gt;A link, button or video is not working
-				&lt;/label&gt;
-				&lt;input name="problem1" type="hidden" value=""&gt;
-			&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem2"&gt;
-					&lt;input name="problem2" id="problem2" type="checkbox" value="Yes" &gt;It has a spelling mistake
-				&lt;/label&gt;
-				&lt;input name="problem2" type="hidden" value=""&gt;
-			&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem3"&gt;
-					&lt;input name="problem3" id="problem3" type="checkbox" value="Yes" &gt;Information is missing
-				&lt;/label&gt;
-				&lt;input name="problem3" type="hidden" value=""&gt;
-			&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem4"&gt;
-					&lt;input name="problem4" id="problem4" type="checkbox" value="Yes" &gt;Information is outdated or wrong
-				&lt;/label&gt;
-				&lt;input name="problem4" type="hidden" value=""&gt;
-			&lt;/div&gt;
-			<ins>&lt;div class="checkbox"&gt;
-				&lt;label for="problem5"&gt;
-					&lt;input name="problem5" id="problem5" type="checkbox" value="Yes" &gt;Login error when trying to access an account
-				&lt;/label&gt;
-				&lt;input name="problem5" type="hidden" value=""&gt;
-			&lt;/div&gt;</ins>
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem11"&gt;
-					&lt;input name="problem11" id="problem11" type="checkbox" value="Yes" &gt;I can't find what I'm looking for
-				&lt;/label&gt;
-				&lt;input name="problem11" type="hidden" value=""&gt;
-			&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem12"&gt;
-					&lt;input name="problem12" id="problem12" type="checkbox" value="Yes" &gt;Other issue not in this list
-				&lt;/label&gt;
-				&lt;input name="problem12" type="hidden" value=""&gt;
-			&lt;/div&gt;
-		&lt;/fieldset&gt;
-		&lt;strong&gt;&lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;&lt;/strong&gt;
-	&lt;/form&gt;
-	&lt;div class="success-message hide"&gt;
-		&lt;h3&gt;Thank you for your help!&lt;/h3&gt;
-		&lt;p&gt;You will not receive a reply. For enquiries, please &lt;a href="https://www.canada.ca/en/contact.html"&gt;contact us&lt;/a&gt;.&lt;/p&gt;
-	&lt;/div&gt;
-	&lt;p class="failure-message hide"&gt;Something went wrong. Please submit your information via an alternative method.&lt;/p&gt;</code></pre>
+	<summary>Iteration 4</summary>
+	<p>Here is a list of changes that happened since the previous iteration:</p>
+	<table class="table table-bordered">
+		<tr>
+			<th style="width:0;">Breaking</th>
+			<td>
+				<ul>
+					<li>Leveraging JSON Manager Extractor and Data JSON to generate hidden input fields</li>
+				</ul>
+			</td>
+		</tr>
+		<tr>
+			<th>Additions</th>
+			<td>n/a</td>
+		</tr>
+		<tr>
+			<th>Fixes</th>
+			<td>n/a</td>
+		</tr>
+	</table>
+
+	<h4>Code sample</h4>
+	{%- highlight html -%}
+	<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>
+	{%- endhighlight -%}
+	<details>
+		<summary>Ajaxed-in content</summary>
+		{%- highlight html -%}
+		{%- include_relative ajax/deprecated/report-problem-v4-en.html -%}
+		{%- endhighlight -%}
+	</details>
 </details>
+
 <details>
-	<summary>Version 2.0</summary>
-	<pre><code>&lt;form <ins>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;,&quot;content&quot;:&quot;.form-content&quot;}"</ins> &gt;
-		&lt;fieldset&gt;
-			&lt;legend&gt;
-				&lt;span class="field-name"&gt;Please select all that apply:&lt;/span&gt;
-			&lt;/legend&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem1"&gt;
-					&lt;input name="problem1" id="problem1" type="checkbox" value="Yes" &gt;A link, button or video is not working
-				&lt;/label&gt;
-				&lt;input name="problem1" type="hidden" value=""&gt;
-			&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem2"&gt;
-					&lt;input name="problem2" id="problem2" type="checkbox" value="Yes" &gt;It has a spelling mistake
-				&lt;/label&gt;
-				&lt;input name="problem2" type="hidden" value=""&gt;
-			&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem3"&gt;
-					&lt;input name="problem3" id="problem3" type="checkbox" value="Yes" &gt;Information is missing
-				&lt;/label&gt;
-				&lt;input name="problem3" type="hidden" value=""&gt;
-			&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem4"&gt;
-					&lt;input name="problem4" id="problem4" type="checkbox" value="Yes" &gt;Information is outdated or wrong
-				&lt;/label&gt;
-				&lt;input name="problem4" type="hidden" value=""&gt;
-			&lt;/div&gt;<ins>
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem5"&gt;
-					&lt;input name="problem5" id="problem5" type="checkbox" value="Yes" &gt;Login error when trying to access an account (e.g. My Service Canada Account)
-				&lt;/label&gt;
-				&lt;input name="problem5" type="hidden" value=""&gt;
-			&lt;/div&gt;
-			&lt;ul&gt;
-				&lt;li class="checkbox"&gt;
-					&lt;label for="problem6a"&gt;
-						&lt;input name="problem6" id="problem6a" type="checkbox" value="Yes" &gt;GC Key access
-					&lt;/label&gt;
-					&lt;input name="problem6" type="hidden" value=""&gt;
-				&lt;/li&gt;
-				&lt;li class="checkbox"&gt;
-					&lt;label for="problem7"&gt;
-						&lt;input name="problem7" id="problem7" type="checkbox" value="Yes" &gt;SecureKey Concierge (Banking Credential) access
-					&lt;/label&gt;
-					&lt;input name="problem7" type="hidden" value=""&gt;
-				&lt;/li&gt;
-				&lt;li class="checkbox"&gt;
-					&lt;label for="problem8"&gt;
-						&lt;input name="problem8" id="problem8" type="checkbox" value="Yes" &gt;Personal Access Code (PAC) problems or EI Access Code (AC) problems
-					&lt;/label&gt;
-					&lt;input name="problem8" type="hidden" value=""&gt;
-				&lt;/li&gt;
-				&lt;li class="checkbox"&gt;
-					&lt;label for="problem9"&gt;
-						&lt;input name="problem9" id="problem9" type="checkbox" value="Yes" &gt;Social Insurance Number (SIN) validation problems
-					&lt;/label&gt;
-					&lt;input name="problem9" type="hidden" value=""&gt;
-				&lt;/li&gt;
-				&lt;li class="checkbox"&gt;
-					&lt;label for="problem10"&gt;
-						&lt;input name="problem10" id="problem10" type="checkbox" value="Yes" &gt;Other login error not in this list
-					&lt;/label&gt;
-					&lt;input name="problem10" type="hidden" value=""&gt;
-				&lt;/li&gt;
-			&lt;/ul&gt;</ins>
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem11"&gt;
-					&lt;input name="problem11" id="problem11" type="checkbox" value="Yes" &gt;I can't find what I'm looking for
-				&lt;/label&gt;
-				&lt;input name="problem11" type="hidden" value=""&gt;
-			&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem12"&gt;
-					&lt;input name="problem12" id="problem12" type="checkbox" value="Yes" &gt;Other issue not in this list
-				&lt;/label&gt;
-				&lt;input name="problem12" type="hidden" value=""&gt;
-			&lt;/div&gt;
-		&lt;/fieldset&gt;
-		&lt;strong&gt;&lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;&lt;/strong&gt;
-	&lt;/form&gt;
-	<ins>&lt;div class="success-message hide"&gt;
-		&lt;h3&gt;Thank you for your help!&lt;/h3&gt;
-		&lt;p&gt;You will not receive a reply. For enquiries, please &lt;a href="https://www.canada.ca/en/contact.html"&gt;contact us&lt;/a&gt;.&lt;/p&gt;
-	&lt;/div&gt;
-	&lt;p class="failure-message hide"&gt;Something went wrong. Please submit your information via an alternative method.&lt;/p&gt;</ins></code></pre>
+	<summary>Iteration 3</summary>
+	<p>Here is a list of changes that happened since the previous iteration:</p>
+	<table class="table table-bordered">
+		<tr>
+			<th style="width:0;">Breaking</th>
+			<td>
+				<ul>
+					<li>Removed login error sub-options.</li>
+					<li>Renamed login error option.</li>
+				</ul>
+			</td>
+		</tr>
+		<tr>
+			<th>Additions</th>
+			<td>n/a</td>
+		</tr>
+		<tr>
+			<th>Fixes</th>
+			<td>n/a</td>
+		</tr>
+	</table>
+
+	<h4>Code sample</h4>
+	{%- highlight html -%}
+	<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>
+	{%- endhighlight -%}
+	<details>
+		<summary>Ajaxed-in content</summary>
+		{%- highlight html -%}
+		{%- include_relative ajax/deprecated/report-problem-v3-en.html -%}
+		{%- endhighlight -%}
+	</details>
 </details>
+
+
 <details>
-	<summary>Version 1.0</summary>
-	<pre><code>&lt;form action="#"&gt;
-		&lt;fieldset&gt;
-			&lt;legend&gt;&lt;span class="field-name"&gt;Please select all that apply:&lt;/span&gt;&lt;/legend&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="gc-rprt-prblm-f1"&gt;
-					&lt;input type="checkbox" name="problem1" value="Yes" id="gc-rprt-prblm-f1" /&gt;A link, button or video is not working
-				&lt;/label&gt;
-				&lt;input name="problem1" type="hidden" value="No" /&gt;
-			&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="gc-rprt-prblm-f2"&gt;
-					&lt;input type="checkbox" name="problem2" value="Yes" id="gc-rprt-prblm-f2" /&gt;It has a spelling mistake
-				&lt;/label&gt;
-				&lt;input name="problem2" type="hidden" value="No" /&gt;
-			&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="gc-rprt-prblm-f3"&gt;
-					&lt;input type="checkbox" name="problem3" value="Yes" id="gc-rprt-prblm-f3" /&gt;Information is missing
-				&lt;/label&gt;
-				&lt;input name="problem3" type="hidden" value="No" /&gt;
-			&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="gc-rprt-prblm-f4"&gt;
-					&lt;input type="checkbox" name="problem4" value="Yes" id="gc-rprt-prblm-f4" /&gt;Information is outdated or wrong
-				&lt;/label&gt;
-				&lt;input name="problem4" type="hidden" value="No" /&gt;
-			&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="gc-rprt-prblm-f5"&gt;
-					&lt;input type="checkbox" name="problem5" value="Yes" id="gc-rprt-prblm-f5" /&gt;I can't find what I'm looking for
-				&lt;/label&gt;
-				&lt;input name="problem5" type="hidden" value="No" /&gt;
-			&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="gc-rprt-prblm-f6"&gt;
-					&lt;input type="checkbox" name="problem6" value="Yes" id="gc-rprt-prblm-f6" /&gt;Other issue not in this list
-				&lt;/label&gt;
-				&lt;input name="problem6" type="hidden" value="No" /&gt;
-			&lt;/div&gt;
-		&lt;/fieldset&gt;
-		&lt;button type="submit" class="btn btn-primary wb-toggle" data-toggle='{"stateOff": "hide", "stateOn": "show", "selector": ".gc-rprt-prblm-tggl"}'&gt;Submit&lt;/button&gt;
-	&lt;/form&gt;</code></pre>
+	<summary>Iteration 2</summary>
+	<p>Here is a list of changes that happened since the previous iteration:</p>
+	<table class="table table-bordered">
+		<tr>
+			<th style="width:0;">Breaking</th>
+			<td>
+				<ul>
+					<li>Rework of the template to use data-ajax. Includes fallback for basic HTML version.</li>
+					<li>Updated form:
+						<ul>
+							<li>Now implements wb-postback for form validation and no longer uses data-toggle on submit.</li>
+							<li>Added login error options (problem 5 to problem 10).</li>
+							<li>Added error and success messages.</li>
+						</ul>
+					</li>
+				</ul>
+			</td>
+		</tr>
+		<tr>
+			<th>Additions</th>
+			<td>n/a</td>
+		</tr>
+		<tr>
+			<th>Fixes</th>
+			<td>n/a</td>
+		</tr>
+	</table>
+
+	<h4>Code sample</h4>
+	{%- highlight html -%}
+	<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>
+	{%- endhighlight -%}
+	<details>
+		<summary>Ajaxed-in content</summary>
+		{%- highlight html -%}
+		{%- include_relative ajax/deprecated/report-problem-v2-en.html -%}
+		{%- endhighlight -%}
+	</details>
+</details>
+<details>
+	<summary>Iteration 1</summary>
+	<h4>Code sample</h4>
+	{%- highlight html -%}
+	{%- include_relative ajax/deprecated/report-problem-v1-en.html -%}
+	{%- endhighlight -%}
 </details>
diff --git a/sites/feedback/feedback-docs-fr.html b/sites/feedback/feedback-docs-fr.html
index e2f445223..d80d1d531 100644
--- a/sites/feedback/feedback-docs-fr.html
+++ b/sites/feedback/feedback-docs-fr.html
@@ -1,396 +1,377 @@
 ---
 {
-	"title": "Commentaires de page (SUP) - Documentation",
+	"title": "Zone de rétroaction - Documentation",
 	"language": "fr",
 	"altLangPage": "feedback-docs-en.html",
-	"breadcrumbs": [
-		{ "title": "Canada.ca", "link": "https://www.canada.ca/en.html" }
-	],
 	"secondlevel": false,
-	"dateModified": "2022-04-26",
-	"share": "true",
-	"feedbackPath": "ajax/report-problem-fr.html"
-
+	"dateModified": "2023-01-10",
+	"share": "true"
 }
 ---
 <span class="wb-prettify all-pre hide"></span>
-
 <dl class="horizontal">
 	<dt>Statut</dt>
 	<dd>Stable</dd>
+	<dt>Version</dt>
+	<dd>5.0.0</dd>
 	<dt>Type</dt>
-	<dd>Fonctionnalité du site Canada.ca</dd>
-	<dt>Dernière révision</dt>
-	<dd>2022-04-26</dd>
+	<dd>Fonctionnalité globale de site de Canada.ca</dd>
 </dl>
 
-<h2>Objectif</h2>
-<p>Affiche le formulaire de commentaires sur la page</p>
+<h2>Introduction</h2>
+<h3>Objectif</h3>
+<p>Obtenir une rétroaction des utilisateurs sur une page donnée via un formulaire.</p>
+
+<h3>Évaluation et rapport</h3>
+<p>Il n'y a pas d'évaluation ni de rapport disponible pour cette composante.</p>
+
+<h3>Orientation</h3>
+<ul>
+	<li><a href="https://conception.canada.ca/amelioration-continue/mesure/retroaction.html">Outil de rétroaction sur la page</a></li>
+	<li><a href="https://conception.canada.ca/configurations-conception-communes/signaler-probleme.html">Signaler un problème sur cette page</a></li>
+</ul>
+
+<h3>Variantes</h3>
+<p>Ce composant prend en charge les variantes suivantes&nbsp;:</p>
+<ul>
+	<li><a href="#variantPFT">Outil de rétroaction sur la page (par défaut)</a></li>
+	<li><a href="#variantPFTContact">Outil de rétroaction sur la page avec lien de contact</a></li>
+	<li><a href="#variantRAP">Signaler un problème sur cette page (SUP)</a></li>
+</ul>
+<div class="alert alert-info">
+	<h4>Note</h4>
+	<p>Toutes les variantes sont composées de deux sous-composants&nbsp;:</p>
+	<ul>
+		<li>Le premier est utilisé pour l'intégration sur la page.</li>
+		<li>Le second est le formulaire qui est inséré dynamiquement via un appel Ajax. Ce sous-composant est par contre hors de portée de l'API.</li>
+	</ul>
+</div>
+
+<h2 id="variantPFT">Variante 1: Outil de rétroaction sur la page (par défaut) <span class="label label-warning mrgn-lft-md">Provisoire</span></h2>
+<h3>Itération 1</h3>
+
+<h4>Exemple(s) pratique(s)</h4>
+<ul>
+	<li><a href="page-feedback-fr.html">Outil de rétroaction sur la page</a></li>
+</ul>
+
+<h4>Comment mettre en œuvre</h4>
+<ul>
+	<li>Pour afficher le formulaire de rétroaction sur la page, créez un <code>&lt;div&gt;</code> avec les attributs suivants&nbsp;:
+		<ul>
+			<li>Obligatoire&nbsp;: <code>data-ajax-replace="ajax/page-feedback-en.html"</code></li>
+			<li>Optionnel&nbsp;: <code>data-feedback-theme="[Texte définissant le thème de votre page]"</code></li>
+			<li>Optionnel&nbsp;: <code>data-feedback-section="[Texte définissant la section où réside votre page]"</code></li>
+		</ul>
+	</li>
+	<li>Pour la version HTML de base, un lien doit être créé dans un <code>&lt;div&gt;</code> qui pointe vers la page du formulaire de signalement d'un problème&nbsp;: <code>&lt;div&gt;&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html"&gt;Signaler un problème sur cette page&lt;/a&gt;&lt;/div&gt;</code>.</li>
+	<li>De plus, vous pouvez définir les métadonnées suivantes: <code>&lt;meta name="dcterms.creator" content="[Nom du département]"&gt;</code></li>
+</ul>
+<p>Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la <a href="https://wet-boew.github.io/wet-boew/docs/ref/data-ajax/data-ajax-fr.html">page de documentation Data Ajax</a>.</p>
 
-<h2>Exemple pratique</h2>
+<h5>Spécifique à GCWeb Jekyll</h5>
+<p>Pour appliquer les attributs facultatifs de cette variante sur une page donnée, vous devrez procéder comme suit dans le front-matter de la page&nbsp;:</p>
 <ul>
-	<li><a href="feedback-fr.html">Exemple de formulaire de commentaires de page</a></li>
-	<li><a href="feedback-aa-fr.html">Exemple de formulaire de commentaires de page en utilisant les attributs de données analytiques</a></li>
-	<li><a href="/sites/page-details/deprecated/page-details-v1-fr.html">Exemple de formulaire de commentaires de page version 1</a></li>
+	<li>Définissez la variable <code>feedbackData</code> à un objet contenant les chaînes de caractères suivantes&nbsp;:
+		<ul>
+			<li><code>section</code>&nbsp;: pour définir la section où réside votre page.</li>
+			<li><code>theme</code>&nbsp;: pour définir le thème de votre page.</li>
+		</ul>
+	</li>
+</ul>
+<p>Par exemple&nbsp;:</p>
+<pre><code>"feedbackData": {
+	"theme": "Thème",
+	"section": "Section"
+}</code></pre>
+
+<h4>Exemple de code</h4>
+{%- highlight html -%}
+<div class="wb-disable-allow" data-ajax-replace="ajax/page-feedback-fr.html"
+	data-feedback-section="[Texte définissant le thème de votre page]"
+	data-feedback-theme="[Texte définissant la section où réside votre page]"></div>
+{%- endhighlight -%}
+<details>
+	<summary>Contenu ajouté via Ajax</summary>
+	{%- highlight html -%}
+	{%- include_relative ajax/page-feedback-fr.html -%}
+	{%- endhighlight -%}
+</details>
 
+<h2 id="variantPFTContact">Variante 2: Outil de rétroaction sur la page avec lien de contact <span class="label label-warning mrgn-lft-md">Provisoire</span></h2>
+<h3>Itération 1</h3>
+
+<h4>Exemple(s) pratique(s)</h4>
+<ul>
+	<li><a href="page-feedback-contact-fr.html">Outil de rétroaction sur la page avec lien de contact</a></li>
 </ul>
 
-<h2>Comment mettre en œuvre</h2>
+<h4>Comment mettre en œuvre</h4>
 <ul>
-	<li>
-		<p>Pour afficher le formulaire de commentaires de page, créez une code>&lt;div&gt;</code> avec l'attribut de données suivant : <code>data-ajax-replace="ajax/report-problem-fr.html"</code>.</p>
-		<p>Pour la version HTML simplifiée, un élément de lien doit être créé qui pointe vers la page du formulaire de signalement d'un problème : <code>&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html"&gt;Signaler un problème sur cette page&lt;/a&gt;</code></p>
-		<p>Pour plus d'informations sur le plugiciel Data Ajax, veuillez visiter <a href="https://wet-boew.github.io/wet-boew/docs/ref/data-ajax/data-ajax-fr.html" >Page de documentation Data Ajax</a></p>
+	<li>Pour afficher le formulaire de rétroaction sur la page, créez un <code>&lt;div&gt;</code> avec les attributs suivants&nbsp;:
+		<ul>
+			<li>Obligatoire&nbsp;: <code>data-ajax-replace="ajax/page-feedback-en.html"</code></li>
+			<li>Obligatoire&nbsp;: <code>data-feedback-link="[Texte du lien de contact]"</code></li>
+			<li>Obligatoire&nbsp;: <code>data-feedback-url="[URL du lien de contact]"</code></li>
+			<li>Optionnel&nbsp;: <code>data-feedback-theme="[Texte définissant le thème de votre page]"</code></li>
+			<li>Optionnel&nbsp;: <code>data-feedback-section="[Texte définissant la section où réside votre page]"</code></li>
+		</ul>
 	</li>
+	<li>Pour la version HTML de base, un lien doit être créé dans un <code>&lt;div&gt;</code> qui pointe vers la page du formulaire de signalement d'un problème&nbsp;: <code>&lt;div&gt;&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html"&gt;Signaler un problème sur cette page&lt;/a&gt;&lt;/div&gt;</code>.</li>
+	<li>De plus, votre page doit avoir les métadonnées suivantes: <code>&lt;meta name="dcterms.creator" content="[Nom du département]"&gt;</code></li>
 </ul>
+<p>Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la <a href="https://wet-boew.github.io/wet-boew/docs/ref/data-ajax/data-ajax-fr.html">page de documentation Data Ajax</a>.</p>
 
-<h2>Évaluation et rapport</h2>
-<p>Il n'y a pas d'évaluation ni de rapport disponible pour ce composant.</p>
+<h5>Spécifique à GCWeb Jekyll</h5>
+<p>Pour appliquer cette variante sur une page donnée, vous devrez faire ce qui suit dans l'en-tête de la page&nbsp;:</p>
+<ul>
+	<li>Définissez la variable <code>feedbackContact</code> à un objet contenant les chaînes personnalisables suivantes:
+		<ul>
+			<li><code>link</code>: pour définir le texte du lien de contact.</li>
+			<li><code>url</code>: pour définir l'URL du lien de contact.</li>
+		</ul>
+	</li>
+	<li>Facultativement, vous pouvez définir la variable <code>feedbackData</code> à un objet contenant les chaînes de caractères suivantes:
+		<ul>
+			<li><code>section</code>&nbsp;: pour définir la section où réside votre page.</li>
+			<li><code>theme</code>&nbsp;: pour définir le thème de votre page.</li>
+		</ul>
+	</li>
+</ul>
+<p>Par exemple&nbsp;:</p>
+<pre><code>"feedbackContact": {
+	"link": "Lien de contact",
+	"url": "https://canada.ca/fr"
+},
+"feedbackData": {
+	"theme": "Thème",
+	"section": "Section"
+}</code></pre>
 
-<h2>API (version 2.0)</h2>
-<table class="table bordée de table">
+<h4>Exemple de code</h4>
+{%- highlight html -%}
+<div class="wb-disable-allow" data-ajax-replace="ajax/page-feedback-fr.html"
+	data-feedback-link="[Texte du lien de contact]"
+	data-feedback-url="[URL du lien de contact]"
+	data-feedback-section="[Texte définissant le thème de votre page]"
+	data-feedback-theme="[Texte définissant la section où réside votre page]"></div>
+{%- endhighlight -%}
+<details>
+	<summary>Contenu ajouté via Ajax</summary>
+	{%- highlight html -%}
+	{%- include_relative ajax/page-feedback-fr.html -%}
+	{%- endhighlight -%}
+</details>
+
+<h2 id="variantRAP">Variante 3: Signaler un problème sur cette page (SUP) <span class="label label-success mrgn-lft-md">Stable</span></h2>
+<h3>Itération 5</h3>
+<p>Voici une liste des changements qui se sont produits depuis l'itération précédente&nbsp;:</p>
+<table class="table table-bordered">
+	<tr>
+		<th style="width:0;">Majeurs</th>
+		<td>
+			<ul>
+				<li>Suppression de l'extraction de données avec JSON Manager pour "externalReferer" et "subject".</li>
+			</ul>
+		</td>
+	</tr>
 	<tr>
-		<th>Classe CSS</th>
-		<th>Gabarit</th>
-		<th>Rendu visuel</th>
-		<th>Schéma</th>
+		<th>Additions</th>
+		<td>
+			<ul>
+				<li>Ajout de champs de saisie masqués statiques pour "externalReferer" et "subject"</li>
+			</ul>
+		</td>
 	</tr>
 	<tr>
-		<td>n.d.</td>
-		<td>Version 2.0</td>
-		<td>n.d.</td>
-		<td>n.d.</td>
+		<th>Correctifs</th>
+		<td>n/a</td>
 	</tr>
 </table>
 
-<h3>Gabarit (dernière : v.2.0)</h3>
-<p>Notes sur la migration du gabarit</p>
-<h4>Composant du gabarit de site</h4>
-<div class="row">
-	<div class="col-md-6">
-		<h5>Version 2.0</h5>
-		<p>Le html inséré par le plugiciel Data Ajax se trouve sur la page suivante : <a href="https://github.com/wet-boew/GCWeb/blob/master/sites/feedback/ajax/report-problem-fr.html" >https://github.com/wet-boew/GCWeb/blob/master/sites/feedback/ajax/report-problem-fr.html</a>.</p >
-<pre><code><ins>&lt;div data-ajax-replace="ajax/report-problem-fr.html"&gt;
-	&lt;div class=&quot;row row-no-gutters&quot;&gt;
-		&lt;div class=&quot;col-sm-11 col-md-7 col-lg-6&quot;&gt;
-			&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html"&gt;Signaler un problème ou une erreur sur cette page &lt;/a&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;</ins></code></pre>
-	</div>
-	<div class="col-md-6">
-		<h5>Avant, la version 1.0</h5>
-<pre><code><del>&lt;details class="brdr-0"&gt;
-	&lt;summary class="btn btn-default text-center"&gt;Signaler un problème sur cette page&lt;/summary&gt;
-	&lt;div class="well row"&gt;
-		&lt;div class="gc-rprt-prblm"&gt;
-			&lt;div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl" &gt;
-				{ formulaire de commentaires }
-			&lt;/div&gt;
-			&lt;div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" &gt;
-				&lt;h3&gt;Merci pour votre aide !&lt;/h3&gt;
-				&lt;p&gt;Vous ne recevrez pas de réponse. Pour toute demande, veuillez &lt;a href="https://www.canada.ca/fr/contact.html"&gt;nous contacter&lt;/a&gt;.&lt;/p&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/details&gt;</del></code></pre>
-	</div>
-</div>
-<h4>Formulaire de signalement d'un problème (SUP) (commentaires)</h4>
-<p>Référence des fichiers ajax implémentés</p>
+<h4>Exemple(s) pratique(s)</h4>
 <ul>
-	<li><a href="ajax/report-problem-fr.html">Version 4.0</a></li>
-	<li><a href="ajax/report-problem-v3-fr.html">Version 3.0</a></li>
-	<li><a href="ajax/report-problem-v2-fr.html">Version 2.0</a></li>
-	<li><a href="ajax/report-problem-aa-fr.html">Version 2.0 avec configuration Adobe Analytic</a></li>
-	<li><a href="ajax/report-problem-v1-fr.html">Version 1.0</a></li>
+	<li><a href="report-problem-fr.html">Signaler un problème sur cette page</a></li>
 </ul>
 
-<h5>Version 4.0</h5>
-<pre><code>&lt;div class="row row-no-gutters"&gt;&lt;div class="col-sm-11 col-md-7 col-lg-6"&gt;
-	&lt;details class="brdr-0"&gt;
-		&lt;summary class="btn btn-default text-center"&gt;Signaler un problème ou une erreur sur cette page&lt;/summary&gt;
-		&lt;div class="well row"&gt;
-			&lt;div class="gc-rprt-prblm"&gt;
-				&lt;div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl"&gt;
-					&lt;form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback"
-						data-wb-postback=&apos;{
-							"success": ".success-message",
-							"failure": ".failure-message"}&apos;
-						<ins>data-wb-jsonmanager=&apos;{
-							"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" }
-							]
-						}&apos;&gt;
-						&lt;div data-wb-json=&apos;{
-							"url": "#[rap]",
-							"mapping": [
-								{ "selector": "input", "attr": "name", "value": "/@id" },
-								{ "selector": "input", "attr": "value", "value": "/@value" }
-							]
-						}&apos;&gt;
-							&lt;template&gt;
-								&lt;input type="hidden" name=" value=" /&gt;
-							&lt;/template&gt;
-						&lt;/div&gt;</ins>
-						&lt;fieldset&gt;
-							&lt;legend&gt;
-								&lt;span class="field-name"&gt;Veuillez sélectionner toutes les cases qui s&apos;appliquent :&lt;/span&gt;
-							&lt;/legend&gt;
-							&lt;div class="checkbox"&gt;
-								&lt;label for="problem1"&gt;
-									&lt;input name="problem1" id="problem1" type="checkbox" value="Yes" &gt;Un lien, un bouton ou une vidéo ne fonctionne pas
-								&lt;/label&gt;
-								&lt;input name="problem1" type="hidden" value="&gt;
-							&lt;/div&gt;
-							&lt;div class="checkbox"&gt;
-								&lt;label for="problem2"&gt;
-									&lt;input name="problem2" id="problem2" type="checkbox" value="Yes" &gt;Il y a une erreur d&apos;orthographe ou de grammaire
-								&lt;/label&gt;
-								&lt;input name="problem2" type="hidden" value="&gt;
-							&lt;/div&gt;
-							&lt;div class="checkbox"&gt;
-								&lt;label for="problem3"&gt;
-									&lt;input name="problem3" id="problem3" type="checkbox" value="Yes" &gt;Les renseignements sont incomplets
-								&lt;/label&gt;
-								&lt;input name="problem3" type="hidden" value="&gt;
-							&lt;/div&gt;
-							&lt;div class="checkbox"&gt;
-								&lt;label for="problem4"&gt;
-									&lt;input name="problem4" id="problem4" type="checkbox" value="Yes" &gt;L&apos;information n&apos;est plus à jour ou est erronée
-								&lt;/label&gt;
-								&lt;input name="problem4" type="hidden" value="&gt;
-							&lt;/div&gt;
-							&lt;div class="checkbox"&gt;
-								&lt;label for="problem5"&gt;
-									&lt;input name="problem5" id="problem5" type="checkbox" value="Yes" &gt;Message d&apos;erreur à l&apos;ouverture de la session lorsque je tente d&apos;accéder à un compte
-								&lt;/label&gt;
-								&lt;input name="problem5" type="hidden" value="&gt;
-							&lt;/div&gt;
-							&lt;div class="checkbox"&gt;
-								&lt;label for="problem11"&gt;
-									&lt;input name="problem11" id="problem11" type="checkbox" value="Yes" &gt;Je n&apos;arrive pas à trouver ce que je cherche
-								&lt;/label&gt;
-								&lt;input name="problem11" type="hidden" value="&gt;
-							&lt;/div&gt;
-								&lt;div class="checkbox"&gt;
-									&lt;label for="problem12"&gt;
-										&lt;input name="problem12" id="problem12" type="checkbox" value="Yes" &gt;Autre problème qui ne figure pas sur cette liste
-									&lt;/label&gt;
-								&lt;input name="problem12" type="hidden" value="&gt;
-							&lt;/div&gt;
-						&lt;/fieldset&gt;
-						&lt;button type="submit" class="btn btn-primary"&gt;Soumettre&lt;/button&gt;
-					&lt;/form&gt;
-				&lt;/div&gt;
-				&lt;div class="success-message hide"&gt;
-					&lt;h3&gt;Merci de votre aide!&lt;/h3&gt;
-					&lt;p&gt;Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît &lt;a href="https://www.canada.ca/fr/contact.html"&gt;contactez-nous&lt;/a&gt;.&lt;/p&gt;
-				&lt;/div&gt;
-				&lt;p class="failure-message hide"&gt;Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l&apos;information via une méthode alternative.&lt;/p&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
-	&lt;/details&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-</code></pre>
+<h4>Comment mettre en œuvre</h4>
+<ul>
+	<li>Pour afficher le formulaire de commentaires sur la page, créez un <code>&lt;div&gt;</code> avec l'attribut suivant&nbsp;: <code>data-ajax-replace="ajax/report-problem-fr.html"</code>.</li>
+	<li>Pour la version HTML de base, un lien doit être créé dans un <code>&lt;div&gt;</code> qui pointe vers la page du formulaire de signalement d'un problème&nbsp;: <code>&lt;div&gt;&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html"&gt;Signaler un problème sur cette page&lt;/a&gt;&lt;/div&gt;</code>.</li>
+</ul>
+<p>Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la <a href="https://wet-boew.github.io/wet-boew/docs/ref/data-ajax/data-ajax-fr.html">page de documentation Data Ajax</a>.</p>
+<details>
+	<summary>Implémentation de Adobe Analytics</summary>
+	<p>Pour implémenter Adobe Analytics dans le formulaire Signaler un problème, ajoutez simplement l'attribut <code>data-gc-analytics-rap</code> à chaque case à cocher avec la valeur étant la même que le "label" de la langue actuelle, suivie d'un tiret et suivi par le "label" de l'autre langue.</p>
+	<p>Par exemple&nbsp;:</p>
+	<pre><code>&lt;div class=&quot;checkbox&quot;&gt;
+	&lt;label for=&quot;problem2&quot;&gt;
+		&lt;input name=&quot;problem2&quot; id=&quot;problem2&quot; type=&quot;checkbox&quot; value=&quot;Yes&quot; <ins>data-gc-analytics-rap=&quot;Il y a une erreur d&apos;orthographe ou de grammaire-It has a spelling mistake&quot;</ins>&gt;Il y a une erreur d'orthographe ou de grammaire
+	&lt;/label&gt;
+	&lt;input name=&quot;problem2&quot; type=&quot;hidden&quot; value=&quot;&quot;&gt;
+&lt;/div&gt;</code></pre>
+</details>
+
+<h5>Champs de saisie masqués</h5>
+<p>La variante Signaler un problème utilise JSON Manager et Data JSON pour obtenir des informations sur la page et générer des champs de saisie masqués dans le formulaire.<p>
+<p>La balise suivante <strong>doit</strong> être présente dans la page&nbsp;: <code>&lt;meta name="author" content="[Nom du service]"&gt;</code><br>Où [Nom du ministère] est un nom de ministère du vocabulaire contrôlé de canada.ca, par exemple&nbsp;: <code>gc:institutions/service-canada</code></p>
+
+<h5>Spécifique à GCWeb Jekyll</h5>
+<p>Pour appliquer cette variante sur une page donnée, vous devrez faire ce qui suit dans l'en-tête de la page ou dans les configurations du site (<code>_config.yml</code>).</p>
+<ul>
+	<li>définir la variable <code>feedbackPath</code> à <code>"ajax/report-problem-fr.html"</code>.</li>
+	<li>définir la variable <code>feedbackFallback</code> à <code>true</code>.</li>
+</ul>
 
-<h5 class="wb-inv">Versions précédentes</h5>
+<h4>Exemple de code</h4>
+{%- highlight html -%}
+<div data-ajax-replace="ajax/report-problem-fr.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">Signaler un problème sur cette page</a>
+		</div>
+	</div>
+</div>
+{%- endhighlight -%}
 <details>
-	<summary>Version 3.0</summary>
-	<pre><code>&lt;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;,&quot;content&quot;:&quot;.form-content&quot;}"&gt;
-	&lt;fieldset&gt;
-		&lt;legend&gt;
-			&lt;span class="field-name"&gt;Veuillez sélectionner toutes les cases qui s'appliquent :&lt;/span&gt;
-		&lt;/legend&gt;
-		&lt;div class="checkbox"&gt;
-			&lt;label for="problem1"&gt;
-				&lt;input name="problem1" id="problem1" type="checkbox" value="Yes" &gt;Un lien, un bouton ou une vidéo ne fonctionne pas
-			&lt;/label&gt;
-			&lt;input name="problem1" type="hidden" value=""&gt;
-		&lt;/div&gt;
-		&lt;div class="checkbox"&gt;
-			&lt;label for="problem2"&gt;
-				&lt;input name="problem2" id="problem2" type="checkbox" value="Yes" &gt;Il y a une erreur d'orthographe ou de grammaire
-			&lt;/label&gt;
-			&lt;input name="problem2" type="hidden" value=""&gt;
-		&lt;/div&gt;
-		&lt;div class="checkbox"&gt;
-			&lt;label for="problem3"&gt;
-				&lt;input name="problem3" id="problem3" type="checkbox" value="Yes" &gt;Les renseignements sont incomplets
-			&lt;/label&gt;
-			&lt;input name="problem3" type="hidden" value=""&gt;
-		&lt;/div&gt;
-		&lt;div class="checkbox"&gt;
-			&lt;label for="problem4"&gt;
-				&lt;input name="problem4" id="problem4" type="checkbox" value="Yes" &gt;L'information n'est plus à jour ou est erronée
-			&lt;/label&gt;
-			&lt;input name="problem4" type="hidden" value=""&gt;
-		&lt;/div&gt;
-		<ins>&lt;div class="checkbox"&gt;
-			&lt;label for="problem5"&gt;
-				&lt;input name="problem5" id="problem5" type="checkbox" value="Yes" &gt;Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte
-			&lt;/label&gt;
-			&lt;input name="problem5" type="hidden" value=""&gt;
-		&lt;/div&gt;</ins>
-		&lt;div class="checkbox"&gt;
-			&lt;label for="problem11"&gt;
-				&lt;input name="problem11" id="problem11" type="checkbox" value="Yes" &gt;Je n'arrive pas à trouver ce que je cherche
-			&lt;/label&gt;
-			&lt;input name="problem11" type="hidden" value=""&gt;
-		&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem12"&gt;
-					&lt;input name="problem12" id="problem12" type="checkbox" value="Yes" &gt;Autre problème qui ne figure pas sur cette liste
-				&lt;/label&gt;
-			&lt;input name="problem12" type="hidden" value=""&gt;
-		&lt;/div&gt;
-	&lt;/fieldset&gt;
-	&lt;strong&gt;&lt;button type="submit" class="btn btn-primary"&gt;Soumettre&lt;/button&gt;&lt;/strong&gt;
-&lt;/form&gt;&lt;div class="success-message hide"&gt;
-	&lt;h3&gt;Merci de votre aide!&lt;/h3&gt;
-	&lt;p&gt;Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît &lt;a href="https://www.canada.ca/fr/contact.html"&gt;contactez-nous&lt;/a&gt;.&lt;/p&gt;
-&lt;/div&gt;
-&lt;p class="failure-message hide"&gt;Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.&lt;/p&gt;</code></pre>
+	<summary>Contenu ajouté via Ajax</summary>
+	{%- highlight html -%}
+	{%- include_relative ajax/report-problem-fr.html -%}
+	{%- endhighlight -%}
+</details>
+
+<h3>Itérations précédentes</h3>
+<details>
+	<summary>Itération 4</summary>
+	<p>Voici une liste des changements qui se sont produits depuis l'itération précédente&nbsp;:</p>
+	<table class="table table-bordered">
+		<tr>
+			<th style="width:0;">Majeurs</th>
+			<td>
+				<ul>
+					<li>Utilise JSON Manager Extractor et Data JSON pour générer des champs de saisie masqués</li>
+				</ul>
+			</td>
+		</tr>
+		<tr>
+			<th>Additions</th>
+			<td>n/a</td>
+		</tr>
+		<tr>
+			<th>Correctifs</th>
+			<td>n/a</td>
+		</tr>
+	</table>
+
+	<h4>Exemple de code</h4>
+	{%- highlight html -%}
+	<div data-ajax-replace="ajax/deprecated/report-problem-v4-fr.html">
+		<div class="row row-no-gutters">
+			<div class="col-sm-11 col-md-7 col-lg-6">
+				<a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème sur cette page</a>
+			</div>
+		</div>
+	</div>
+	{%- endhighlight -%}
+	<details>
+		<summary>Contenu ajouté via Ajax</summary>
+		{%- highlight html -%}
+		{%- include_relative ajax/deprecated/report-problem-v4-fr.html -%}
+		{%- endhighlight -%}
+	</details>
 </details>
+
 <details>
-	<summary>Version 2.0</summary>
-	<pre><code>&lt;form <ins>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;,&quot;content&quot;:&quot;.form-content&quot;}" </ins> &gt;
-	&lt;fieldset&gt;
-		&lt;legend&gt;
-			&lt;span class="field-name"&gt;Veuillez sélectionner toutes les cases qui s'appliquent :&lt;/span&gt;
-		&lt;/legend&gt;
-		&lt;div class="checkbox"&gt;
-			&lt;label for="problem1"&gt;
-				&lt;input name="problem1" id="problem1" type="checkbox" value="Yes" &gt;Un lien, un bouton ou une vidéo ne fonctionne pas
-			&lt;/label&gt;
-			&lt;input name="problem1" type="hidden" value=""&gt;
-		&lt;/div&gt;
-		&lt;div class="checkbox"&gt;
-			&lt;label for="problem2"&gt;
-				&lt;input name="problem2" id="problem2" type="checkbox" value="Yes" &gt;Il y a une erreur d'orthographe ou de grammaire
-			&lt;/label&gt;
-			&lt;input name="problem2" type="hidden" value=""&gt;
-		&lt;/div&gt;
-		&lt;div class="checkbox"&gt;
-			&lt;label for="problem3"&gt;
-				&lt;input name="problem3" id="problem3" type="checkbox" value="Yes" &gt;Les renseignements sont incomplets
-			&lt;/label&gt;
-			&lt;input name="problem3" type="hidden" value=""&gt;
-		&lt;/div&gt;
-		&lt;div class="checkbox"&gt;
-			&lt;label for="problem4"&gt;
-				&lt;input name="problem4" id="problem4" type="checkbox" value="Yes" &gt;L'information n'est plus à jour ou est erronée
-			&lt;/label&gt;
-			&lt;input name="problem4" type="hidden" value=""&gt;
-		&lt;/div&gt;<ins>
-		&lt;div class="checkbox"&gt;
-			&lt;label for="problem5"&gt;
-				&lt;input name="problem5" id="problem5" type="checkbox" value="Yes" &gt;Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte (ex. Mon dossier Service Canada)
-			&lt;/label&gt;
-			&lt;input name="problem5" type="hidden" value=""&gt;
-		&lt;/div&gt;
-		&lt;ul&gt;
-			&lt;li class="checkbox"&gt;
-				&lt;label for="problem6a"&gt;
-					&lt;input name="problem6" id="problem6a" type="checkbox" value="Yes" &gt;Accès CléGC
-				&lt;/label&gt;
-				&lt;input name="problem6" type="hidden" value=""&gt;
-			&lt;/li&gt;
-			&lt;li class="checkbox"&gt;
-				&lt;label for="problem7"&gt;
-					&lt;input name="problem7" id="problem7" type="checkbox" value="Yes" &gt;Accès SecureKey Service de Concierge (justificatifs d'identité bancaires)
-				&lt;/label&gt;
-				&lt;input name="problem7" type="hidden" value=""&gt;
-			&lt;/li&gt;
-			&lt;li class="checkbox"&gt;
-				&lt;label for="problem8"&gt;
-					&lt;input name="problem8" id="problem8" type="checkbox" value="Yes" &gt;Problème avec le Code d'accès personnel (CAP) ou avec le Code d'accès (CA) de l'assurance emploi
-				&lt;/label&gt;
-				&lt;input name="problem8" type="hidden" value=""&gt;
-			&lt;/li&gt;
-			&lt;li class="checkbox"&gt;
-				&lt;label for="problem9"&gt;
-					&lt;input name="problem9" id="problem9" type="checkbox" value="Yes" &gt;Problème lié à la validation du numéro d'assurance sociale (NAS)
-				&lt;/label&gt;
-				&lt;input name="problem9" type="hidden" value=""&gt;
-			&lt;/li&gt;
-			&lt;li class="checkbox"&gt;
-				&lt;label for="problem10"&gt;
-					&lt;input name="problem10" id="problem10" type="checkbox" value="Yes" &gt;Autre erreur lors de l'ouverture de session qui ne figure pas sur cette liste
-				&lt;/label&gt;
-				&lt;input name="problem10" type="hidden" value=""&gt;
-			&lt;/li&gt;
-		&lt;/ul&gt;</ins>
-		&lt;div class="checkbox"&gt;
-			&lt;label for="problem11"&gt;
-				&lt;input name="problem11" id="problem11" type="checkbox" value="Yes" &gt;Je n'arrive pas à trouver ce que je cherche
-			&lt;/label&gt;
-			&lt;input name="problem11" type="hidden" value=""&gt;
-		&lt;/div&gt;
-			&lt;div class="checkbox"&gt;
-				&lt;label for="problem12"&gt;
-					&lt;input name="problem12" id="problem12" type="checkbox" value="Yes" &gt;Autre problème qui ne figure pas sur cette liste
-				&lt;/label&gt;
-			&lt;input name="problem12" type="hidden" value=""&gt;
-		&lt;/div&gt;
-	&lt;/fieldset&gt;
-	&lt;strong&gt;&lt;button type="submit" class="btn btn-primary"&gt;Soumettre&lt;/button&gt;&lt;/strong&gt;
-&lt;/form&gt;<ins>&lt;div class="success-message hide"&gt;
-	&lt;h3&gt;Merci de votre aide!&lt;/h3&gt;
-	&lt;p&gt;Vous ne recevrez pas de réponse. Pour toute question, s'il vous plaît &lt;a href="https://www.canada.ca/fr/contact.html"&gt;contactez-nous&lt;/a&gt;.&lt;/p&gt;
-&lt;/div&gt;
-&lt;p class="failure-message hide"&gt;Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.&lt;/p&gt;</ins></code></pre>
+	<summary>Itération 3</summary>
+	<p>Voici une liste des changements qui se sont produits depuis l'itération précédente&nbsp;:</p>
+	<table class="table table-bordered">
+		<tr>
+			<th style="width:0;">Majeurs</th>
+			<td>
+				<ul>
+					<li>Suppression des sous-options d'erreur de connexion.</li>
+					<li>Option d'erreur de connexion renommée.</li>
+				</ul>
+			</td>
+		</tr>
+		<tr>
+			<th>Additions</th>
+			<td>n/a</td>
+		</tr>
+		<tr>
+			<th>Correctifs</th>
+			<td>n/a</td>
+		</tr>
+	</table>
+
+	<h4>Exemple de code</h4>
+	{%- highlight html -%}
+	<div data-ajax-replace="ajax/deprecated/report-problem-v3-fr.html">
+		<div class="row row-no-gutters">
+			<div class="col-sm-11 col-md-7 col-lg-6">
+				<a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème sur cette page</a>
+			</div>
+		</div>
+	</div>
+	{%- endhighlight -%}
+	<details>
+		<summary>Contenu ajouté via Ajax</summary>
+		{%- highlight html -%}
+		{%- include_relative ajax/deprecated/report-problem-v3-fr.html -%}
+		{%- endhighlight -%}
+	</details>
 </details>
+
 <details>
-	<summary>Version 1.0</summary>
-	<pre><code>&lt;form action="#"&gt;
-	&lt;fieldset&gt;
-		&lt;legend&gt;&lt;span class="field-name"&gt;Veuillez cocher toutes les réponses pertinentes&nbsp;:&lt;/span&gt;&lt;/legend&gt;
-		&lt;div class="checkbox"&gt;
-			&lt;label for="gc-rprt-prblm-f1"&gt;
-				&lt;input type="checkbox" name="problem1" value="Oui" id="gc-rprt-prblm-f1" /&gt;Un lien, un bouton ou une vidéo ne fonctionne pas
-			&lt;/label&gt;
-			&lt;input name="problem1" type="hidden" value="Non" /&gt;
-		&lt;/div&gt;
-		&lt;div class="checkbox"&gt;
-			&lt;label for="gc-rprt-prblm-f2"&gt;
-				&lt;input type="checkbox" name="problem2" value="Oui" id="gc-rprt-prblm-f2" /&gt;Il y a une erreur d'orthographe ou de grammaire
-			&lt;/label&gt;
-			&lt;input name="problem2" type="hidden" value="Non" /&gt;
-		&lt;/div&gt;
-		&lt;div class="checkbox"&gt;
-			&lt;label for="gc-rprt-prblm-f3"&gt;
-				&lt;input type="checkbox" name="problem3" value="Oui" id="gc-rprt-prblm-f3" /&gt;Les renseignements sont incomplets
-			&lt;/label&gt;
-			&lt;input name="problem3" type="hidden" value="Non" /&gt;
-		&lt;/div&gt;
-		&lt;div class="checkbox"&gt;
-			&lt;label for="gc-rprt-prblm-f4"&gt;
-				&lt;input type="checkbox" name="problem4" value="Oui" id="gc-rprt-prblm-f4" /&gt;L'information n'est plus à jour ou est erronée
-			&lt;/label&gt;
-			&lt;input name="problem4" type="hidden" value="Non" /&gt;
-		&lt;/div&gt;
-		&lt;div class="checkbox"&gt;
-			&lt;label for="gc-rprt-prblm-f5"&gt;
-				&lt;input type="checkbox" name="problem5" value="Oui" id="gc-rprt-prblm-f5" /&gt;Je n'arrive pas à trouver ce que je cherche
-			&lt;/label&gt;
-			&lt;input name="problem5" type="hidden" value="Non" /&gt;
-		&lt;/div&gt;
-		&lt;div class="checkbox"&gt;
-			&lt;label for="gc-rprt-prblm-f6"&gt;
-				&lt;input type="checkbox" name="problem6" value="Oui" id="gc-rprt-prblm-f6" /&gt;Autre problème qui ne figure pas sur cette liste
-			&lt;/label&gt;
-			&lt;input name="problem6" type="hidden" value="Non" /&gt;
-		&lt;/div&gt;
-	&lt;/fieldset&gt;
-	&lt;button type="submit" class="btn btn-primary wb-toggle" data-toggle='{"stateOff": "hide", "stateOn": "show", "selector": ".gc-rprt-prblm-tggl"}'&gt;Soumettre&lt;/button&gt;
-&lt;/form&gt;</code></pre>
+	<summary>Itération 2</summary>
+	<p>Here is a list of changes that happened since the previous itération:</p>
+	<table class="table table-bordered">
+		<tr>
+			<th style="width:0;">Majeurs</th>
+			<td>
+				<ul>
+					<li>Refonte du gabarit pour utiliser data-ajax. Inclut la solution de secours pour la version HTML de base.</li>
+					<li>Mise à jour du formulaire:
+						<ul>
+							<li>Implémente désormais wb-postback pour la validation des formulaires et n'utilise plus data-toggle lors de l'envoi.</li>
+							<li>Ajout d'options d'erreur de connexion (problème 5 à problème 10).</li>
+							<li>Ajout de messages d'erreur et de réussite.</li>
+						</ul>
+					</li>
+				</ul>
+			</td>
+		</tr>
+		<tr>
+			<th>Additions</th>
+			<td>n/a</td>
+		</tr>
+		<tr>
+			<th>Correctifs</th>
+			<td>n/a</td>
+		</tr>
+	</table>
+
+	<h4>Exemple de code</h4>
+	{%- highlight html -%}
+	<div data-ajax-replace="ajax/report-problem-v2-fr.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/fr/signaler-probleme.html">Signaler un problème sur cette page</a>
+			</div>
+		</div>
 	</div>
+	{%- endhighlight -%}
+	<details>
+		<summary>Contenu ajouté via Ajax</summary>
+		{%- highlight html -%}
+		{%- include_relative ajax/deprecated/report-problem-v2-fr.html -%}
+		{%- endhighlight -%}
+	</details>
+</details>
+<details>
+	<summary>Itération 1</summary>
+	<h4>Exemple de code</h4>
+	{%- highlight html -%}
+	{%- include_relative ajax/deprecated/report-problem-v1-fr.html -%}
+	{%- endhighlight -%}
 </details>
diff --git a/sites/feedback/feedback-en.html b/sites/feedback/feedback-en.html
deleted file mode 100644
index 81e81945a..000000000
--- a/sites/feedback/feedback-en.html
+++ /dev/null
@@ -1,31 +0,0 @@
----
-{
-	"title": "Page feedback form",
-	"language": "en",
-	"altLangPage": "feedback-fr.html",
-	"breadcrumbs": [
-		{ "title": "Canada.ca", "link": "https://www.canada.ca/en.html" }
-	],
-	"secondlevel": false,
-	"dateModified": "2022-04-26",
-	"share": "true",
-	"feedbackPath": "ajax/report-problem-en.html"
-}
----
-<span class="wb-prettify all-pre hide"></span>
-<p>This page feedback form leverage the version 2 of the <a href="../page-details/page-details-docs-en.html">page-details</a> container which leverage the <a href="https://wet-boew.github.io/wet-boew/docs/ref/data-ajax/data-ajax-en.html">data ajax plugin</a>.</p>
-<p>Data ajax replace links:</p>
-<ul>
-	<li>Version 2 - https://www.canada.ca/ .... /report-problem-en.html (link to come)</li>
-	<li>Version 2 with Adobe Analytic - https://www.canada.ca/ .... /report-problem-en.html (link to come)</li>
-	<li>Version 1 - Deprecated, see the documentation for a code sample</li>
-</ul>
-<p>The version 2 of the <a href="../page-details/page-details-docs-en.html">page-details</a> container leverage a progressive enhancement design and that is why a link element need be created to point at the report a problem form page: <code>&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html"&gt;Report a problem on this page&lt;/a&gt;</code>. You can experience that fallback through the basic HTML version mode.</p>
-<h2>HTML code</h2>
-<pre><code>&lt;div data-ajax-replace="ajax/report-problem-en.html"&gt;
-	&lt;div class=&quot;row row-no-gutters&quot;&gt;
-		&lt;div class=&quot;col-sm-9 col-md-6 col-lg-5&quot;&gt;
-			&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html"&gt;Report a problem on this page&lt;/a&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;</code></pre>
diff --git a/sites/feedback/feedback-fr.html b/sites/feedback/feedback-fr.html
deleted file mode 100644
index fe2f3c9ba..000000000
--- a/sites/feedback/feedback-fr.html
+++ /dev/null
@@ -1,31 +0,0 @@
----
-{
-	"title": "Formulaire de commentaires de la page",
-	"language": "fr",
-	"altLangPage": "feedback-en.html",
-	"breadcrumbs": [
-		{ "title": "Canada.ca", "link": "https://www.canada.ca/en.html" }
-	],
-	"secondlevel": false,
-	"dateModified": "2022-04-26",
-	"share": "true",
-	"feedbackPath": "ajax/report-problem-fr.html"
-}
----
-<span class="wb-prettify all-pre hide"></span>
-<p>Ce formulaire de commentaires de page exploite la version 2 du conteneur <a href="../page-details/page-details-docs-fr.html">page-details</a> qui exploite le <a href ="https://wet-boew.github.io/wet-boew/docs/ref/data-ajax/data-ajax-fr.html">plugiciel data ajax</a>.</p>
-<p>Data ajax remplace les liens :</p>
-<ul>
-	<li>Version 2 - https://www.canada.ca/ ... /signaler-probleme.html (lien à venir)</li>
-	<li>Version 2 avec Adobe Analytic - https://www.canada.ca/ ... ./signaler-probleme.html (lien à venir)</li>
-	<li>Version 1 - Obsolète, consultez la documentation pour un exemple de code</li>
-</ul>
-<p>La version 2 du conteneur <a href="../page-details/page-details-docs-fr.html">page-details</a> implique une conception d'amélioration progressive et c'est pourquoi un lien doit être créé pour pointer vers la page du formulaire de signalement d'un problème : <code>&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html"&gt;Signaler un problème sur cette page&lt;/a&gt;</code>. Vous pouvez faire l'expérience de ce repli via le mode de version HTML de base.</p>
-<h2>Le code HTML</h2>
-<pre><code>&lt;div data-ajax-replace="ajax/report-problem-fr.html"&gt;
-	&lt;div class=&quot;row row-no-gutters&quot;&gt;
-		&lt;div class=&quot;col-sm-11 col-md-7 col-lg-6&quot;&gt;
-			&lt;a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html"&gt;Signaler un problème ou une erreur sur cette page &lt;/a&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;</code></pre>
diff --git a/sites/feedback/includes/feedback.html b/sites/feedback/includes/feedback.html
index 7d15638f0..13d38aa4b 100644
--- a/sites/feedback/includes/feedback.html
+++ b/sites/feedback/includes/feedback.html
@@ -2,21 +2,38 @@
 	{%- if page.feedbackPath -%}
 		{{ page.feedbackPath }}
 	{%- elsif site.global.feedbackPath and site.global.feedbackPath.first -%}
-		{{ site.global.feedbackPath[ i18nText-lang ] | relative_url }}
+		{{ setting-root }}{{ site.global.feedbackPath[ i18nText-lang ] }}
+	{%- endif -%}
+{%- endcapture -%}
+{%- capture feedbackFallback -%}
+	{%- if page.feedbackFallback -%}
+		{{ page.feedbackFallback }}
+	{%- elsif site.global.feedbackFallback -%}
+		{{ site.global.feedbackFallback }}
 	{%- endif -%}
 {%- endcapture -%}
 
 
-<div {% if feedbackPath and feedbackPath != "" -%}
+<div {% if feedbackPath and feedbackPath != "" %}
 		data-ajax-replace="{{feedbackPath}}"
-	{%- endif -%}>
-	<div class="row row-no-gutters">
-		{%- if i18nText-lang == "en" -%}
-			<div class="col-sm-9 col-md-6 col-lg-5">
-		{%- else -%}
-			<div class="col-sm-11 col-md-7 col-lg-6">
-		{%- endif -%}
-			<a class="btn btn-default btn-block" href="{{ i18nText-feedbackLink }}">{{ i18nText-feedback }}</a>
+		{% unless feedbackFallback and feedbackFallback != "" %}
+			class="wb-disable-allow"
+		{%- endunless -%}
+	{%- endif -%}
+	{% if page.feedbackContact %} data-feedback-link="{{page.feedbackContact.link}}" data-feedback-url="{{page.feedbackContact.url}}" {% endif %}
+	{% if page.feedbackData.section %} data-feedback-section="{{page.feedbackData.section}}" {% endif %}
+	{% if page.feedbackData.theme %} data-feedback-theme="{{page.feedbackData.theme}}" {% endif %}>
+	{%- if feedbackFallback and feedbackFallback != "" -%}
+		<div class="row row-no-gutters">
+			{%- if i18nText-lang == "en" -%}
+				<div class="col-sm-9 col-md-6 col-lg-5">
+			{%- else -%}
+				<div class="col-sm-11 col-md-7 col-lg-6">
+			{%- endif -%}
+				<a class="btn btn-default btn-block" href="{{ i18nText-feedbackLink }}">{{ i18nText-feedback }}</a>
+			</div>
 		</div>
-	</div>
+	{%- else -%}
+		<!-- Will always be replaced by data-ajax -->
+	{%- endif -%}
 </div>
diff --git a/sites/feedback/index.json-ld b/sites/feedback/index.json-ld
index 355bb2467..1fd13b970 100644
--- a/sites/feedback/index.json-ld
+++ b/sites/feedback/index.json-ld
@@ -7,39 +7,59 @@
 		"modified": "dct:modified"
 	},
 	"title": {
-		"en": "Report a problem (RAP) - Feedback",
-		"fr": "Signaler un problème (SUP) - Commentaires"
+		"en": "Feedback area",
+		"fr": "Zone de rétroaction"
 	},
 	"description": {
-		"en": "Documentation on how to use the page feedback form.",
-		"fr": "Documentation sur l'utilisation de formulaire de commentaires de page."
+		"en": "Documentation on how to use the elements of the feedback area.",
+		"fr": "Documentation sur l'utilisation des éléments de la zone commentaires."
 	},
-	"modified": "2022-04-26",
+	"modified": "2023-01-10",
 	"componentName": "feedback",
 	"status": "stable",
 	"pages": {
 		"docs": [
 			{
-				"title": "Documentation for Page feedback form",
+				"title": "Documentation for the feedback area",
 				"language": "en",
 				"path": "feedback-docs-en.html"
 			},
 			{
-				"title": "Documentation pour formulaire de commentaire de page",
+				"title": "Documentation pour la zone de rétroaction",
 				"language": "fr",
 				"path": "feedback-docs-fr.html"
 			}
 		],
 		"examples": [
 			{
-				"title": "Page feedback form",
+				"title": "Page feedback tool",
 				"language": "en",
-				"path": "feedback-en.html"
+				"path": "page-feedback-en.html"
 			},
 			{
-				"title": "Formulaire de commentaire de page",
+				"title": "Outil de rétroaction sur la page",
 				"language": "fr",
-				"path": "feedback-fr.html"
+				"path": "page-feedback-fr.html"
+			},
+			{
+				"title": "Page feedback tool with contact link",
+				"language": "en",
+				"path": "page-feedback-contact-en.html"
+			},
+			{
+				"title": "Outil de rétroaction sur la page avec lien de contact",
+				"language": "fr",
+				"path": "page-feedback-contact-fr.html"
+			},
+			{
+				"title": "Report a problem",
+				"language": "en",
+				"path": "report-problem-en.html"
+			},
+			{
+				"title": "Signaler un problème",
+				"language": "fr",
+				"path": "report-problem-fr.html"
 			}
 		]
 	}
diff --git a/sites/feedback/page-feedback-contact-en.html b/sites/feedback/page-feedback-contact-en.html
new file mode 100644
index 000000000..e67b46b65
--- /dev/null
+++ b/sites/feedback/page-feedback-contact-en.html
@@ -0,0 +1,31 @@
+---
+{
+	"altLangPage": "page-feedback-contact-fr.html",
+	"breadcrumbs": [
+		{ "title": "Feedback area - Documentation", "link": "sites/feedback/feedback-docs-en.html" }
+	],
+	"dateModified": "2023-04-12",
+	"description": "Page feedback tool for Canada.ca",
+	"language": "en",
+	"title": "Page feedback tool with contact link",
+	"share": "true",
+	"feedbackContact": {
+		"link": "Contact Service Name",
+		"url": "https://canada.ca"
+	},
+	"feedbackData": {
+		"theme": "Theme",
+		"section": "Section"
+	}
+}
+---
+
+{% include alert-provisional.html siteroot="../../" %}
+{% include alert-softlaunch.html genre="e" component="Page feedback tool with contact link" version="provisional" %}
+
+<div class="wb-prettify all-pre hide"></div>
+
+<h2>HTML code</h2>
+{% highlight text %}
+{% include_relative ajax/page-feedback-en.html %}
+{% endhighlight %}
diff --git a/sites/feedback/page-feedback-contact-fr.html b/sites/feedback/page-feedback-contact-fr.html
new file mode 100644
index 000000000..92fa17bed
--- /dev/null
+++ b/sites/feedback/page-feedback-contact-fr.html
@@ -0,0 +1,31 @@
+---
+{
+	"altLangPage": "page-feedback-contact-en.html",
+	"breadcrumbs": [
+		{ "title": "Zone de rétroaction - Documentation", "link": "sites/feedback/feedback-docs-fr.html" }
+	],
+	"dateModified": "2023-04-12",
+	"description": "Outil de rétroaction sur la page pour Canada.ca",
+	"language": "fr",
+	"title": "Outil de rétroaction sur la page avec lien de contact",
+	"share": "true",
+	"feedbackContact": {
+		"link": "Contacter Nom du service",
+		"url": "https://canada.ca/fr"
+	},
+	"feedbackData": {
+		"theme": "Thème",
+		"section": "Section"
+	}
+}
+---
+
+{% include alert-provisional.html siteroot="../../" %}
+{% include alert-softlaunch.html genre="e" component="Outil de rétroaction sur la page avec lien de contact" version="provisoire" %}
+
+<div class="wb-prettify all-pre hide"></div>
+
+<h2>Code HTML</h2>
+{% highlight text %}
+{% include_relative ajax/page-feedback-fr.html %}
+{% endhighlight %}
diff --git a/sites/feedback/page-feedback-en.html b/sites/feedback/page-feedback-en.html
new file mode 100644
index 000000000..a9f1ebed8
--- /dev/null
+++ b/sites/feedback/page-feedback-en.html
@@ -0,0 +1,27 @@
+---
+{
+	"altLangPage": "page-feedback-fr.html",
+	"breadcrumbs": [
+		{ "title": "Feedback area - Documentation", "link": "sites/feedback/feedback-docs-en.html" }
+	],
+	"dateModified": "2023-01-10",
+	"description": "Page feedback tool for Canada.ca",
+	"language": "en",
+	"title": "Page feedback tool",
+	"share": "true",
+	"feedbackData": {
+		"theme": "Theme",
+		"section": "Section"
+	}
+}
+---
+
+{% include alert-provisional.html siteroot="../../" %}
+{% include alert-softlaunch.html genre="e" component="Page feedback tool" version="provisional" %}
+
+<div class="wb-prettify all-pre hide"></div>
+
+<h2>HTML code</h2>
+{% highlight text %}
+{% include_relative ajax/page-feedback-en.html %}
+{% endhighlight %}
diff --git a/sites/feedback/page-feedback-fr.html b/sites/feedback/page-feedback-fr.html
new file mode 100644
index 000000000..a94f1538e
--- /dev/null
+++ b/sites/feedback/page-feedback-fr.html
@@ -0,0 +1,27 @@
+---
+{
+	"altLangPage": "page-feedback-en.html",
+	"breadcrumbs": [
+		{ "title": "Zone de rétroaction - Documentation", "link": "sites/feedback/feedback-docs-fr.html" }
+	],
+	"dateModified": "2023-01-10",
+	"description": "Outil de rétroaction sur la page pour Canada.ca",
+	"language": "fr",
+	"title": "Outil de rétroaction sur la page",
+	"share": "true",
+	"feedbackData": {
+		"theme": "Thème",
+		"section": "Section"
+	}
+}
+---
+
+{% include alert-provisional.html siteroot="../../" %}
+{% include alert-softlaunch.html genre="e" component="Outil de rétroaction sur la page" version="provisoire" %}
+
+<div class="wb-prettify all-pre hide"></div>
+
+<h2>Code HTML</h2>
+{% highlight text %}
+{% include_relative ajax/page-feedback-fr.html %}
+{% endhighlight %}
diff --git a/sites/feedback/report-problem-en.html b/sites/feedback/report-problem-en.html
new file mode 100644
index 000000000..8acaef12f
--- /dev/null
+++ b/sites/feedback/report-problem-en.html
@@ -0,0 +1,21 @@
+---
+{
+	"title": "Report a problem",
+	"language": "en",
+	"altLangPage": "report-problem-fr.html",
+	"breadcrumbs": [
+		{ "title": "Feedback area - Documentation", "link": "sites/feedback/feedback-docs-en.html" }
+	],
+	"secondlevel": false,
+	"dateModified": "2023-01-10",
+	"share": "true",
+	"feedbackPath": "ajax/report-problem-en.html",
+	"feedbackFallback": true
+}
+---
+<div class="wb-prettify all-pre hide"></div>
+
+<h2>Code HTML</h2>
+{% highlight text %}
+{% include_relative ajax/report-problem-en.html %}
+{% endhighlight %}
diff --git a/sites/feedback/report-problem-fr.html b/sites/feedback/report-problem-fr.html
new file mode 100644
index 000000000..311f779a7
--- /dev/null
+++ b/sites/feedback/report-problem-fr.html
@@ -0,0 +1,21 @@
+---
+{
+	"title": "Signaler un problème",
+	"language": "fr",
+	"altLangPage": "report-problem-en.html",
+	"breadcrumbs": [
+		{ "title": "Zone de rétroaction - Documentation", "link": "sites/feedback/feedback-docs-fr.html" }
+	],
+	"secondlevel": false,
+	"dateModified": "2023-01-10",
+	"share": "true",
+	"feedbackPath": "ajax/report-problem-fr.html",
+	"feedbackFallback": true
+}
+---
+<div class="wb-prettify all-pre hide"></div>
+
+<h2>Code HTML</h2>
+{% highlight text %}
+{% include_relative ajax/report-problem-fr.html %}
+{% endhighlight %}
diff --git a/sites/gc-page-feedback/_print.scss b/sites/gc-page-feedback/_print.scss
deleted file mode 100644
index 5f9c4031d..000000000
--- a/sites/gc-page-feedback/_print.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
-  @title: Page feedback tool - Print view
- */
-
-.gc-pft {
-	@extend %gcweb-print-display-none-important;
-}
diff --git a/sites/gc-page-feedback/_screen-sm-min.scss b/sites/gc-page-feedback/_screen-sm-min.scss
deleted file mode 100644
index 72627320f..000000000
--- a/sites/gc-page-feedback/_screen-sm-min.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
-  @title: Page feedback tool - Small view and over
- */
-
-/* In noscript/basic HTML mode... */
-.no-js,
-.wb-disable {
-	.gc-pft {
-		/* Disable the legend's right padding */
-		.nojs-pr-sm-0 {
-			padding-right: 0 !important;
-		}
-	}
-}
diff --git a/sites/gc-page-feedback/gc-page-feedback-custom-en.html b/sites/gc-page-feedback/gc-page-feedback-custom-en.html
deleted file mode 100644
index 00b0b2f1e..000000000
--- a/sites/gc-page-feedback/gc-page-feedback-custom-en.html
+++ /dev/null
@@ -1,29 +0,0 @@
----
-{
-	"altLangPage": "gc-page-feedback-custom-fr.html",
-	"breadcrumbs": [
-		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }
-	],
-	"css": ["https://use.fontawesome.com/releases/v5.15.4/css/all.css"],
-	"dateModified": "2022-12-06",
-	"description": "Page feedback tool for Canada.ca",
-	"language": "en",
-	"title": "Page feedback tool with custom parameters",
-	"pageFeedback": {
-		"institutionopt": "Custom institution",
-		"themeopt": "Custom theme",
-		"sectionopt": "Custom section",
-		"pageTitle": "true",
-		"language": "true",
-		"submissionPage": "true"
-	}
-}
----
-<div class="wb-prettify all-pre hide"></div>
-
-<h2>HTML code</h2>
-{%- comment -%} Manually-included variable-core.liquid so that gc-page-feedback.html's code sample can use the i18nText-lang variable {%- endcomment -%}
-{% include variable-core.liquid %}
-{% highlight text %}
-{% include_relative includes/gc-page-feedback.html %}
-{% endhighlight %}
diff --git a/sites/gc-page-feedback/gc-page-feedback-custom-fr.html b/sites/gc-page-feedback/gc-page-feedback-custom-fr.html
deleted file mode 100644
index e2b493dc3..000000000
--- a/sites/gc-page-feedback/gc-page-feedback-custom-fr.html
+++ /dev/null
@@ -1,29 +0,0 @@
----
-{
-	"altLangPage": "gc-page-feedback-custom-en.html",
-	"breadcrumbs": [
-		{ "title": "Accueil GCWeb", "link": "https://wet-boew.github.io/GCWeb/index-fr.html" }
-	],
-	"css": ["https://use.fontawesome.com/releases/v5.15.4/css/all.css"],
-	"dateModified": "2022-12-06",
-	"description": "Outil de rétroaction sur la page pour Canada.ca",
-	"language": "fr",
-	"title": "Outil de rétroaction sur la page avec paramètres personnalisés",
-	"pageFeedback": {
-		"institutionopt": "Institution personnalisée",
-		"themeopt": "Thème personnalisé",
-		"sectionopt": "Section personnalisée",
-		"pageTitle": "true",
-		"language": "true",
-		"submissionPage": "true"
-	}
-}
----
-<div class="wb-prettify all-pre hide"></div>
-
-<h2>Code HTML</h2>
-{%- comment -%} Manually-included variable-core.liquid so that gc-page-feedback.html's code sample can use the i18nText-lang variable {%- endcomment -%}
-{% include variable-core.liquid %}
-{% highlight text %}
-{% include_relative includes/gc-page-feedback.html %}
-{% endhighlight %}
diff --git a/sites/gc-page-feedback/gc-page-feedback-en.html b/sites/gc-page-feedback/gc-page-feedback-en.html
deleted file mode 100644
index 7bebd0b85..000000000
--- a/sites/gc-page-feedback/gc-page-feedback-en.html
+++ /dev/null
@@ -1,23 +0,0 @@
----
-{
-	"altLangPage": "gc-page-feedback-fr.html",
-	"breadcrumbs": [
-		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }
-	],
-	"css": ["https://use.fontawesome.com/releases/v5.15.4/css/all.css"],
-	"dateModified": "2022-12-06",
-	"description": "Page feedback tool for Canada.ca",
-	"language": "en",
-	"title": "Page feedback tool",
-	"pageFeedback": "true",
-	"share": "true"
-}
----
-<div class="wb-prettify all-pre hide"></div>
-
-<h2>HTML code</h2>
-{%- comment -%} Manually-included variable-core.liquid so that gc-page-feedback.html's code sample can use the i18nText-lang variable {%- endcomment -%}
-{% include variable-core.liquid %}
-{% highlight text %}
-{% include_relative includes/gc-page-feedback.html %}
-{% endhighlight %}
diff --git a/sites/gc-page-feedback/gc-page-feedback-fr.html b/sites/gc-page-feedback/gc-page-feedback-fr.html
deleted file mode 100644
index 636ff3119..000000000
--- a/sites/gc-page-feedback/gc-page-feedback-fr.html
+++ /dev/null
@@ -1,23 +0,0 @@
----
-{
-	"altLangPage": "gc-page-feedback-en.html",
-	"breadcrumbs": [
-		{ "title": "Accueil GCWeb", "link": "https://wet-boew.github.io/GCWeb/index-fr.html" }
-	],
-	"css": ["https://use.fontawesome.com/releases/v5.15.4/css/all.css"],
-	"dateModified": "2022-12-06",
-	"description": "Outil de rétroaction sur la page pour Canada.ca",
-	"language": "fr",
-	"title": "Outil de rétroaction sur la page",
-	"pageFeedback": "true",
-	"share": "true"
-}
----
-<div class="wb-prettify all-pre hide"></div>
-
-<h2>Code HTML</h2>
-{%- comment -%} Manually-included variable-core.liquid so that gc-page-feedback.html's code sample can use the i18nText-lang variable {%- endcomment -%}
-{% include variable-core.liquid %}
-{% highlight text %}
-{% include_relative includes/gc-page-feedback.html %}
-{% endhighlight %}
diff --git a/sites/gc-page-feedback/includes/css.html b/sites/gc-page-feedback/includes/css.html
deleted file mode 100644
index 6c703f071..000000000
--- a/sites/gc-page-feedback/includes/css.html
+++ /dev/null
@@ -1,121 +0,0 @@
-<style>
-/* Custom CSS for testing on GitHub Pages - should be equivalent to updated SCSS files */
-
-/*----------*/
-
-/* sites/page-details/_base.scss */
-/*
- * Share/feedback-specific overrides
- */
-
-/* Undo the old report a problem well selector */
-.pagedetails .well {
-	margin-left: 0;
-	margin-right: 0;
-}
-
-/* More specific well selector for report a problem (to prevent a conflict with the page feedback tool's well) */
-.pagedetails details .well {
-	margin-left: -1.1em;
-	margin-right: -1.1em;
-}
-
-/*----------*/
-
-/* sites/page-details/_screen-sm-min.scss */
-@media screen and (min-width: 768px) {
-	/*
-	 * Share/feedback-specific overrides (small view and over)
-	 */
-
-	/* Add a larger top margin on the share button (only if its plugin has initialized) if adjacent to the page feedback tool. */
-	.pagedetails div:has(.gc-pft) + .wb-share-inited {
-		margin-top: 29px;
-	}
-}
-
-/*----------*/
-
-/* sites/page-details/_screen-md-min.scss */
-@media screen and (min-width: 992px) {
-	/*
-	 * Share/feedback-specific overrides (medium view and over)
-	 */
-
-	/* Add a larger top margin on the share button (only if its plugin has initialized) if adjacent to the page feedback tool. */
-	.pagedetails div:has(.gc-pft) + .wb-share-inited {
-		margin-top: 21px;
-	}
-}
-
-/*----------*/
-
-/* sites/gc-page-feedback/_base.scss */
-/*
-  @title: Page feedback tool - Base
- */
-
-/* In noscript/basic HTML mode...*/
-
-/* Disable row gutters (default selector isn't specific-enough) */
-.no-js .gc-pft .row-no-gutters [class*="col-"],
-.wb-disable .gc-pft .row-no-gutters [class*="col-"] {
-	padding-left: 0;
-	padding-right: 0;
-}
-
-/* Make the legend full width */
-.no-js .gc-pft .nojs-col-sm-12,
-.wb-disable .gc-pft .nojs-col-sm-12 {
-	position: relative;
-	min-height: 1px;
-	padding-right: 15px;
-	padding-left: 15px;
-}
-
-/* Left-align the legend and yes/no buttons */
-.no-js .gc-pft .nojs-text-left,
-.wb-disable .gc-pft .nojs-text-left {
-	text-align: left;
-}
-
-@media (min-width: 768px) {
-	.no-js .gc-pft .nojs-col-sm-12,
-	.wb-disable .gc-pft .nojs-col-sm-12 {
-		float: left;
-	}
-
-	.no-js .gc-pft .nojs-col-sm-12,
-	.wb-disable .gc-pft .nojs-col-sm-12 {
-		width: 100%;
-	}
-}
-
-/*----------*/
-
-/* sites/gc-page-feedback/_screen-sm-min.scss */
-@media screen and (min-width: 768px) {
-	/*
-	  @title: Page feedback tool - Small view and over
-	 */
-
-	/* Disable the legend's right padding */
-	.no-js .gc-pft .nojs-pr-sm-0,
-	.wb-disable .gc-pft .nojs-pr-sm-0 {
-		padding-right: 0 !important;
-	}
-}
-
-/*----------*/
-
-/* sites/gc-page-feedback/_print.scss */
-@media print {
-	/*
-	  @title: Page feedback tool - Print view
-	 */
-
-	.gc-pft {
-		display: none !important;
-	}
-}
-</style>
diff --git a/sites/gc-page-feedback/includes/gc-page-feedback.html b/sites/gc-page-feedback/includes/gc-page-feedback.html
deleted file mode 100644
index 6acde9c18..000000000
--- a/sites/gc-page-feedback/includes/gc-page-feedback.html
+++ /dev/null
@@ -1,62 +0,0 @@
-{%- include_relative includes/parameters.liquid -%}
-{%- include_relative includes/strings.liquid -%}
-
-<div class="gc-pft row">
-	<div class="col-sm-10 col-md-9 col-lg-8">
-		<section class="well mrgn-bttm-0" aria-live="polite">
-			<h3 class="wb-inv">{{ pft_h3 }}</h3>
-			<form id="gc-pft-frm" action="https://pagesuccessemailqueue.azurewebsites.net/api/QueueProblemForm" method="post" class="wb-postback" data-wb-postback='{"success":".gc-pft-thnk","content":"#gc-pft-frm"}'>
-				<input type="hidden" name="institutionopt" value="{{ pft_institutionopt_value }}" />
-				<input type="hidden" name="themeopt" value="{{ pft_themeopt_value }}" />
-				<input type="hidden" name="sectionopt" value="{{ pft_sectionopt_value }}" />
-				<input type="hidden" name="pageTitle" value="{{ pft_pageTitle_value }}" />
-				<input type="hidden" name="language" value="{{ pft_language_value }}" />
-				<input type="hidden" name="submissionPage" value="{{ pft_submissionPage_value }}" />
-				<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 nojs-pr-sm-0"><span class="field-name">{{ pft_legend }}</span></legend>
-					<div class="col-xs-12 nojs-show">
-						<button type="submit" name="helpful" value="{{ pft_yes_value }}" class="btn btn-primary" aria-describedby="why-note">{{ pft_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 type="submit" name="helpful" value="{{ pft_yes_value }}" class="btn btn-primary mrgn-tp-sm mrgn-bttm-sm">{{ pft_yes }}</button>
-						<button type="button" class="btn btn-primary mrgn-tp-sm mrgn-bttm-sm mrgn-lft-sm" data-wb-doaction='[
-							{"action":"removeClass","source":".gc-pft-no","class":"nojs-show"},
-							{"action":"addClass","source":".gc-pft-btns","class":"hide"}
-						]'>{{ pft_no }}</button>
-					</div>
-				</fieldset>
-				<div class="gc-pft-no nojs-show">
-					<p id="why-note" class="nojs-show mrgn-tp-lg mrgn-bttm-md"><strong>{{ pft_why_note_nojs }}</strong></p>
-					<p class="nojs-hide wb-inv"><strong>{{ pft_why_note_js }}</strong></p>
-					<div aria-live="off">
-						<fieldset class="chkbxrdio-grp">
-							<legend><span class="field-name">{{ pft_no_legend }}</span></legend>
-							<div class="radio">
-								<label for="problem1"><input name="problem" id="problem1" type="radio" value="{{ pft_problem1_value }}" /> {{ pft_problem1_label }}</label>
-							</div>
-							<div class="radio">
-								<label for="problem2"><input name="problem" id="problem2" type="radio" value="{{ pft_problem2_value }}" /> {{ pft_problem2_label }}</label>
-							</div>
-							<div class="radio">
-								<label for="problem3"><input name="problem" id="problem3" type="radio" value="{{ pft_problem3_value }}" /> {{ pft_problem3_label }}</label>
-							</div>
-							<div class="radio">
-								<label for="problem4"><input name="problem" id="problem4" type="radio" value="{{ pft_problem4_value }}" /> {{ pft_problem4_label }}</label>
-							</div>
-							<input type="hidden" name="problem" value="" />
-						</fieldset>
-						<div class="form-group">
-							<label for="problem6" class="mrgn-tp-sm mrgn-bttm-0"><span class="field-name">{{ pft_problem6_label }}</span></label>
-							<textarea id="problem6" aria-describedby="problem6-note" name="details" class="form-control full-width" maxlength="300"></textarea>
-							<p id="problem6-note"><small>{{ pft_problem6_note }}</small></p>
-						</div>
-						<button name="helpful" value="{{ pft_no_value }}" class="btn btn-primary">{{ pft_submit }}</button>
-					</div>
-				</div>
-			</form>
-			<div class="gc-pft-thnk hide">
-				<p class="mrgn-tp-sm mrgn-bttm-0"><span class="far fa-check-circle text-success mrgn-rght-sm" aria-hidden="true"></span> {{ pft_submit_message }}</p>
-			</div>
-		</section>
-	</div>
-</div>
diff --git a/sites/gc-page-feedback/includes/parameters.liquid b/sites/gc-page-feedback/includes/parameters.liquid
deleted file mode 100644
index e17fb3b00..000000000
--- a/sites/gc-page-feedback/includes/parameters.liquid
+++ /dev/null
@@ -1,57 +0,0 @@
-{%- comment -%}
-Set parameter variables
-{%- endcomment -%}
-
-{%- capture pft_institutionopt_value -%}
-	{%- if page.pageFeedback.institutionopt -%}
-		{{ page.pageFeedback.institutionopt }}
-	{%- else -%}
-		Institution - required - must use same abbreviation value EN and FR
-	{%- endif -%}
-{%- endcapture -%}
-
-{%- capture pft_themeopt_value -%}
-	{%- if page.pageFeedback.themeopt -%}
-		{{ page.pageFeedback.themeopt }}
-	{%- else -%}
-		Theme - required - must use same value EN and FR
-	{%- endif -%}
-{%- endcapture -%}
-
-{%- capture pft_sectionopt_value -%}
-	{%- if page.pageFeedback.sectionopt -%}
-		{{ page.pageFeedback.sectionopt }}
-	{%- else -%}
-		Section - required but can be blank - same value EN and FR
-	{%- endif -%}
-{%- endcapture -%}
-
-{%- capture pft_pageTitle_value -%}
-	{%- if page.pageFeedback.pageTitle == "true" -%}
-		{{ page.title }}
-	{%- elsif page.pageFeedback.title -%}
-		{{ page.pageFeedback.pageTitle }}
-	{%- else -%}
-		Page title (EN) - required
-	{%- endif -%}
-{%- endcapture -%}
-
-{%- capture pft_language_value -%}
-	{%- if page.pageFeedback.language == "true" -%}
-		{{ i18nText-lang }}
-	{%- elsif page.pageFeedback.language -%}
-		{{ page.pageFeedback.language }}
-	{%- else -%}
-		Language - required - use EN or FR
-	{%- endif -%}
-{%- endcapture -%}
-
-{%- capture pft_submissionPage_value -%}
-	{%- if page.pageFeedback.submissionPage == "true" -%}
-		{{ page.url | absolute_url }}
-	{%- elsif page.pageFeedback.submissionPage -%}
-		{{ page.pageFeedback.submissionPage }}
-	{%- else -%}
-		Page URL - required
-	{%- endif -%}
-{%- endcapture -%}
diff --git a/sites/gc-page-feedback/includes/strings.liquid b/sites/gc-page-feedback/includes/strings.liquid
deleted file mode 100644
index 20f8155e2..000000000
--- a/sites/gc-page-feedback/includes/strings.liquid
+++ /dev/null
@@ -1,58 +0,0 @@
-{%- comment -%}
-Set string variables
-{%- endcomment -%}
-
-{%- assign pft_yes_en = "Yes" -%}
-{%- assign pft_no_en = "No" -%}
-{%- assign pft_problem1_label_en = "I can’t <strong>find</strong> the information" -%}
-{%- assign pft_problem2_label_en = "The information is hard to <strong>understand</strong>" -%}
-{%- assign pft_problem3_label_en = "There was an error or something <strong>didn’t work</strong>" -%}
-{%- assign pft_problem4_label_en = "Other reason" -%}
-
-{%- assign pft_yes_fr = "Oui" -%}
-{%- assign pft_no_fr = "Non" -%}
-{%- assign pft_problem1_label_fr = "Je ne peux pas <strong>trouver</strong> l’information" -%}
-{%- assign pft_problem2_label_fr = "L’information est difficile à <strong>comprendre</strong>" -%}
-{%- assign pft_problem3_label_fr = "Il y avait une erreur ou quelque chose <strong>ne fonctionnait pas</strong>" -%}
-{%- assign pft_problem4_label_fr = "Autre raison" -%}
-
-{%- assign pft_yes_value = pft_yes_en | append: "-" | append: pft_yes_fr -%}
-{%- assign pft_no_value = pft_no_en | strip_html | append: "-" | append: pft_no_fr | strip_html -%}
-{%- assign pft_problem1_value = pft_problem1_label_en | strip_html | append: "-" | append: pft_problem1_label_fr | strip_html -%}
-{%- assign pft_problem2_value = pft_problem2_label_en | strip_html | append: "-" | append: pft_problem2_label_fr | strip_html -%}
-{%- assign pft_problem3_value = pft_problem3_label_en | strip_html | append: "-" | append: pft_problem3_label_fr | strip_html -%}
-{%- assign pft_problem4_value = pft_problem4_label_en | strip_html | append: "-" | append: pft_problem4_label_fr | strip_html -%}
-
-{%- if i18nText-lang == "en" -%}
-	{%- assign pft_h3 = "Page feedback" -%}
-	{%- assign pft_legend = "Did you find what you were looking for?" -%}
-	{%- assign pft_yes = pft_yes_en -%}
-	{%- assign pft_no = pft_no_en -%}
-	{%- assign pft_why_note_nojs = "If not, tell us why below:" -%}
-	{%- assign pft_why_note_js = "Tell us why below:" -%}
-	{%- assign pft_no_legend = "What was wrong?" -%}
-	{%- assign pft_problem1_label = pft_problem1_label_en -%}
-	{%- assign pft_problem2_label = pft_problem2_label_en -%}
-	{%- assign pft_problem3_label = pft_problem3_label_en -%}
-	{%- assign pft_problem4_label = pft_problem4_label_en -%}
-	{%- assign pft_problem6_label = "Please provide more details (maximum 300 characters)" -%}
-	{%- assign pft_problem6_note = "You will not receive a reply. Telephone numbers and email addresses will be removed." -%}
-	{%- assign pft_submit = "Submit" -%}
-	{%- assign pft_submit_message = "Thank you for your feedback." -%}
-{%- elsif i18nText-lang == "fr" -%}
-	{%- assign pft_h3 = "Rétroaction sur la page" -%}
-	{%- assign pft_legend = "Avez-vous trouvé ce que vous cherchiez?" -%}
-	{%- assign pft_yes = pft_yes_fr -%}
-	{%- assign pft_no = pft_no_fr -%}
-	{%- assign pft_why_note_nojs = "Sinon, dites nous pourquoi ci-dessous&nbsp;:" -%}
-	{%- assign pft_why_note_js = "Dites nous pourquoi ci-dessous&nbsp;:" -%}
-	{%- assign pft_no_legend = "Qu’est-ce qui n’allait pas?" -%}
-	{%- assign pft_problem1_label = pft_problem1_label_fr -%}
-	{%- assign pft_problem2_label = pft_problem2_label_fr -%}
-	{%- assign pft_problem3_label = pft_problem3_label_fr -%}
-	{%- assign pft_problem4_label = pft_problem4_label_fr -%}
-	{%- assign pft_problem6_label = "Veuillez fournir plus de détails (maximum de 300 caractères)" -%}
-	{%- assign pft_problem6_note = "Vous ne recevrez aucune réponse. Les numéros de téléphone et les adresses électroniques seront supprimés." -%}
-	{%- assign pft_submit = "Soumettre" -%}
-	{%- assign pft_submit_message = "Merci de vos commentaires." -%}
-{%- endif -%}
diff --git a/sites/gc-page-feedback/index.json-ld b/sites/gc-page-feedback/index.json-ld
deleted file mode 100644
index b9e019806..000000000
--- a/sites/gc-page-feedback/index.json-ld
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-	"@context": {
-		"@version": 1.1,
-		"dct": "http://purl.org/dc/terms/",
-		"title": { "@id": "dct:title", "@container": "@language" },
-		"description": { "@id": "dct:description", "@container": "@language" },
-		"modified": "dct:modified"
-	},
-	"title": {
-		"en": "Page feedback tool",
-		"fr": "Outil de rétroaction sur la page"
-	},
-	"description": {
-		"en": "Page feedback tool for Canada.ca",
-		"fr": "Outil de rétroaction sur la page pour Canada.ca"
-	},
-	"modified": "2022-12-06",
-	"componentName": "gc-page-feedback",
-	"status": "stable",
-	"pages": {
-		"examples": [
-			{
-				"title": "Page feedback tool",
-				"language": "en",
-				"path": "gc-page-feedback-en.html"
-			},
-			{
-				"title": "Outil de rétroaction sur la page",
-				"language": "fr",
-				"path": "gc-page-feedback-fr.html"
-			},
-			{
-				"title": "Page feedback tool with custom parameters",
-				"language": "en",
-				"path": "gc-page-feedback-custom-en.html"
-			},
-			{
-				"title": "Outil de rétroaction sur la page avec paramètres personnalisés",
-				"language": "fr",
-				"path": "gc-page-feedback-custom-fr.html"
-			}
-		]
-	}
-}
diff --git a/sites/includes/settings.liquid b/sites/includes/settings.liquid
index 631fce2fc..16eb9205a 100644
--- a/sites/includes/settings.liquid
+++ b/sites/includes/settings.liquid
@@ -12,3 +12,4 @@
 	https://wet-boew.github.io/themes-dist/GCWeb/{{ setting-packageName }}
 {%- endcapture -%}
 {%- assign setting-resourcesBasePathWetboew = "https://wet-boew.github.io/themes-dist/GCWeb/wet-boew" -%}
+{%- assign setting-root = "/GCWeb" -%}
diff --git a/sites/page-details/includes/footer.html b/sites/page-details/includes/footer.html
index 76b3e36c9..1a189a7e1 100644
--- a/sites/page-details/includes/footer.html
+++ b/sites/page-details/includes/footer.html
@@ -2,7 +2,7 @@
 	<h2 class="wb-inv">{{ i18nText-pageDetails }}</h2>
 
 	{% assign col-modified = "col-xs-12" %}
-	{%- if page.pageFeedback or page.noReportProblem != true -%}
+	{%- if page.noFeedback != true -%}
 		{% assign col-feedback = "col-sm-8 col-md-9 col-lg-9" %}
 		{%- if page.share -%}
 			{% assign col-share = "col-sm-4 col-md-3" %}
@@ -15,15 +15,9 @@ <h2 class="wb-inv">{{ i18nText-pageDetails }}</h2>
 	{%- endif -%}
 
 	<div class="row">
-		{%- if page.pageFeedback or page.noReportProblem != true -%}
+		{%- if page.noFeedback != true -%}
 			<div class="{{ col-feedback }}">
-				{%- if page.pageFeedback -%}
-					{% include gc-page-feedback/gc-page-feedback.html %}
-				{%- else -%}
-					{%- unless page.noReportProblem -%}
-						{% include feedback/feedback.html %}
-					{%- endunless -%}
-				{%- endif -%}
+				{% include feedback/feedback.html %}
 			</div>
 		{%- endif -%}
 		{%- if page.share -%}
diff --git a/sites/page-details/page-details-without-buttons-en.html b/sites/page-details/page-details-without-buttons-en.html
index a8418c98f..6868bf8b8 100644
--- a/sites/page-details/page-details-without-buttons-en.html
+++ b/sites/page-details/page-details-without-buttons-en.html
@@ -8,7 +8,7 @@
 	],
 	"secondlevel": false,
 	"dateModified": "2022-04-14",
-	"noReportProblem": true
+	"noFeedback": true
 }
 ---
 <span class="wb-prettify all-pre hide"></span>
diff --git a/sites/page-details/page-details-without-buttons-fr.html b/sites/page-details/page-details-without-buttons-fr.html
index 93d8c6046..ffc66742c 100644
--- a/sites/page-details/page-details-without-buttons-fr.html
+++ b/sites/page-details/page-details-without-buttons-fr.html
@@ -8,7 +8,7 @@
 	],
 	"secondlevel": false,
 	"dateModified": "2022-04-14",
-	"noReportProblem": true
+	"noFeedback": true
 }
 ---
 <span class="wb-prettify all-pre hide"></span>
diff --git a/sites/page-details/page-details-without-report-btn-en.html b/sites/page-details/page-details-without-report-btn-en.html
index 2309601b8..20e32ccfe 100644
--- a/sites/page-details/page-details-without-report-btn-en.html
+++ b/sites/page-details/page-details-without-report-btn-en.html
@@ -9,7 +9,7 @@
 	"secondlevel": false,
 	"dateModified": "2022-04-14",
 	"share": true,
-	"noReportProblem": true
+	"noFeedback": true
 }
 ---
 <span class="wb-prettify all-pre hide"></span>
diff --git a/sites/page-details/page-details-without-report-btn-fr.html b/sites/page-details/page-details-without-report-btn-fr.html
index 94944df34..66aace63c 100644
--- a/sites/page-details/page-details-without-report-btn-fr.html
+++ b/sites/page-details/page-details-without-report-btn-fr.html
@@ -9,7 +9,7 @@
 	"secondlevel": false,
 	"dateModified": "2022-04-14",
 	"share": true,
-	"noReportProblem": true
+	"noFeedback": true
 }
 ---
 <span class="wb-prettify all-pre hide"></span>
diff --git a/sites/theme.scss b/sites/theme.scss
index eb1999684..83bcc6334 100644
--- a/sites/theme.scss
+++ b/sites/theme.scss
@@ -74,7 +74,7 @@
 @import "search/base";
 @import "secondary-menu/base";
 @import "page-details/base";
-@import "gc-page-feedback/base";
+@import "feedback/base";
 @import "gcweb-menu/base";
 @import "authentication/base";
 @import "header/base";
@@ -312,7 +312,7 @@
 
 	@import "baseline/lists/screen-md-min";
 	@import "gcweb-menu/screen-md-min";
-	@import "page-details/screen-md-min";
+	@import "feedback/screen-md-min";
 
 	@import "wet-boew/src/plugins/feeds/screen-md-min";
 	@import "wet-boew/src/plugins/tabs/screen-md-min";
@@ -368,8 +368,7 @@
 	@import "wet-boew/src/base/views/screen-sm-min-to-screen-sm-max";
 
 	@import "search/screen-sm-min-to-screen-sm-max";
-	@import "page-details/screen-sm-min";
-	@import "gc-page-feedback/screen-sm-min";
+	@import "feedback/screen-sm-min-to-screen-sm-max";
 
 	@import "../templates/campaign/screen-sm-min-to-screen-sm-max";
 }
@@ -410,7 +409,7 @@
 	@import "search/print";
 	@import "secondary-menu/print";
 	@import "page-details/print";
-	@import "gc-page-feedback/print";
+	@import "feedback/print";
 
 	@import "wet-boew/src/plugins/footnotes/print";
 	@import "wet-boew/src/plugins/geomap/print";
diff --git a/templates/home/home-en.html b/templates/home/home-en.html
index c4af65ddc..cb6114e01 100644
--- a/templates/home/home-en.html
+++ b/templates/home/home-en.html
@@ -4,7 +4,7 @@
 altLangPage: home-fr.html
 dateModified: 2021-07-07
 layout: home
-noReportProblem: true
+noFeedback: true
 breadcrumbs: false
 ---
 
diff --git a/templates/home/home-fr.html b/templates/home/home-fr.html
index becf0d7ff..f597052c4 100644
--- a/templates/home/home-fr.html
+++ b/templates/home/home-fr.html
@@ -4,7 +4,7 @@
 altLangPage: home-en.html
 dateModified: 2021-07-07
 layout: home
-noReportProblem: true
+noFeedback: true
 breadcrumbs: false
 ---
 
diff --git a/templates/thematic/dark-theme-home-en.html b/templates/thematic/dark-theme-home-en.html
index 8978dddd0..9df0df8e2 100644
--- a/templates/thematic/dark-theme-home-en.html
+++ b/templates/thematic/dark-theme-home-en.html
@@ -4,7 +4,7 @@
 altLangPage: dark-theme-home-fr.html
 dateModified: 2021-07-07
 layout: home
-noReportProblem: true
+noFeedback: true
 share: true
 pageclass: provisional dark-theme
 ---
diff --git a/templates/thematic/dark-theme-home-fr.html b/templates/thematic/dark-theme-home-fr.html
index 7f6d9ec55..8398d74ae 100644
--- a/templates/thematic/dark-theme-home-fr.html
+++ b/templates/thematic/dark-theme-home-fr.html
@@ -4,7 +4,7 @@
 altLangPage: dark-theme-home-en.html
 dateModified: 2021-07-07
 layout: home
-noReportProblem: true
+noFeedback: true
 share: true
 pageclass: provisional dark-theme
 ---
diff --git a/templates/thematic/pink-day-home-en.html b/templates/thematic/pink-day-home-en.html
index c87c1a9d8..313b7d6ba 100644
--- a/templates/thematic/pink-day-home-en.html
+++ b/templates/thematic/pink-day-home-en.html
@@ -4,7 +4,7 @@
 altLangPage: pink-day-home-fr.html
 dateModified: 2021-07-07
 layout: home
-noReportProblem: true
+noFeedback: true
 share: true
 pageclass: provisional pnkDy-theme
 ---
diff --git a/templates/thematic/pink-day-home-fr.html b/templates/thematic/pink-day-home-fr.html
index aec32142c..fac217ff7 100644
--- a/templates/thematic/pink-day-home-fr.html
+++ b/templates/thematic/pink-day-home-fr.html
@@ -4,7 +4,7 @@
 altLangPage: pink-day-home-en.html
 dateModified: 2021-07-07
 layout: home
-noReportProblem: true
+noFeedback: true
 share: true
 pageclass: provisional pnkDy-theme
 ---