Zone de rétroaction - Documentation

Statut: Stable
Version: 5.0.0
Type: Fonctionnalité globale de site de Canada.ca

Introduction

Objectif

Obtenir une rétroaction des utilisateurs sur une page donnée via un formulaire.

Évaluation et rapport

Il n'y a pas d'évaluation ni de rapport disponible pour cette composante.

Orientation

Variantes

Ce composant prend en charge les variantes suivantes :

Outil de rétroaction sur la page (par défaut)
Outil de rétroaction sur la page avec lien de contact
Signaler un problème sur cette page (SUP)

Note

Toutes les variantes sont composées de deux sous-composants :

Le premier est utilisé pour l'intégration sur la page.
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.

Variante 1: Outil de rétroaction sur la page (par défaut) Provisoire

Itération 1

Exemple(s) pratique(s)

Outil de rétroaction sur la page

Comment mettre en œuvre

Pour afficher le formulaire de rétroaction sur la page, créez un <div> avec les attributs suivants :
- Obligatoire : data-ajax-replace="assets/page-feedback-en.html"
- Optionnel : data-feedback-theme="[Texte définissant le thème de votre page]"
- Optionnel : data-feedback-section="[Texte définissant la section où réside votre page]"
Pour la version HTML de base, un lien doit être créé dans un <div> qui pointe vers la page du formulaire de signalement d'un problème : <div><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>.
De plus, vous pouvez définir les métadonnées suivantes: <meta name="dcterms.creator" content="[Nom du département]">

Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la page de documentation Data Ajax.

Spécifique à GCWeb Jekyll

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 :

Définissez la variable feedbackData à un objet contenant les chaînes de caractères suivantes :
- section : pour définir la section où réside votre page.
- theme : pour définir le thème de votre page.

Par exemple :

"feedbackData": {
	"theme": "Thème",
	"section": "Section"
}

Exemple de code

<div class="wb-disable-allow" data-ajax-replace="assets/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>

Contenu ajouté via Ajax

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

Variante 2: Outil de rétroaction sur la page avec lien de contact Provisoire

Itération 1

Exemple(s) pratique(s)

Outil de rétroaction sur la page avec lien de contact

Comment mettre en œuvre

Pour afficher le formulaire de rétroaction sur la page, créez un <div> avec les attributs suivants :
- Obligatoire : data-ajax-replace="assets/page-feedback-en.html"
- Obligatoire : data-feedback-link="[Texte du lien de contact]"
- Obligatoire : data-feedback-url="[URL du lien de contact]"
- Optionnel : data-feedback-theme="[Texte définissant le thème de votre page]"
- Optionnel : data-feedback-section="[Texte définissant la section où réside votre page]"
Pour la version HTML de base, un lien doit être créé dans un <div> qui pointe vers la page du formulaire de signalement d'un problème : <div><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>.
De plus, votre page doit avoir les métadonnées suivantes: <meta name="dcterms.creator" content="[Nom du département]">

Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la page de documentation Data Ajax.

Spécifique à GCWeb Jekyll

Pour appliquer cette variante sur une page donnée, vous devrez faire ce qui suit dans l'en-tête de la page :

Définissez la variable feedbackContact à un objet contenant les chaînes personnalisables suivantes:
- link: pour définir le texte du lien de contact.
- url: pour définir l'URL du lien de contact.
Facultativement, vous pouvez définir la variable feedbackData à un objet contenant les chaînes de caractères suivantes:
- section : pour définir la section où réside votre page.
- theme : pour définir le thème de votre page.

Par exemple :

"feedbackContact": {
	"link": "Lien de contact",
	"url": "https://canada.ca/fr"
},
"feedbackData": {
	"theme": "Thème",
	"section": "Section"
}

Exemple de code

<div class="wb-disable-allow" data-ajax-replace="assets/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>

Contenu ajouté via Ajax

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

Variante 3: Signaler un problème sur cette page (SUP) Stable

Itération 5

Voici une liste des changements qui se sont produits depuis l'itération précédente :

Majeurs	Suppression de l'extraction de données avec JSON Manager pour "externalReferer" et "subject".
Additions	Ajout de champs de saisie masqués statiques pour "externalReferer" et "subject"
Correctifs	n/a

Exemple(s) pratique(s)

Signaler un problème sur cette page

Comment mettre en œuvre

Pour afficher le formulaire de commentaires sur la page, créez un <div> avec l'attribut suivant : data-ajax-replace="ajax/report-problem-fr.html".
Pour la version HTML de base, un lien doit être créé dans un <div> qui pointe vers la page du formulaire de signalement d'un problème : <div><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>.

Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la page de documentation Data Ajax.

Implémentation de Adobe Analytics

Pour implémenter Adobe Analytics dans le formulaire Signaler un problème, ajoutez simplement l'attribut data-gc-analytics-rap à 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.

Par exemple :

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

Champs de saisie masqués

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.

La balise suivante doit être présente dans la page : <meta name="author" content="[Nom du service]">
Où [Nom du ministère] est un nom de ministère du vocabulaire contrôlé de canada.ca, par exemple : gc:institutions/service-canada

Spécifique à GCWeb Jekyll

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 (_config.yml).

définir la variable feedbackPath à "ajax/report-problem-fr.html".
définir la variable feedbackFallback à true.

Exemple de code

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

Contenu ajouté via Ajax

<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": [
								{ "selector": "title", "path": "pageTitle" },
								{ "interface": "locationHref", "path": "submissionPage" },
								{ "selector": "html", "attr": "lang", "path": "lang" },
								{ "selector": "meta[name=\"dcterms.creator\"]", "attr": "content", "path": "pageOwner" }
							]
						}'>
						<div data-wb-json='{
							"url": "#[rap]",
							"mapping": [
								{ "selector": "input", "attr": "name", "value": "/@id" },
								{ "selector": "input", "attr": "value", "value": "/@value" }
							]
						}'>
							<template>
								<input type="hidden" name="" value="" />
							</template>
						</div>
						<input type="hidden" name="externalReferer" value="">
						<input type="hidden" name="subject" value="Report a problem or mistake on this page">
						<fieldset>
							<legend>
								<span class="field-name">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>

Itérations précédentes

Itération 4

Voici une liste des changements qui se sont produits depuis l'itération précédente :

Majeurs	Utilise JSON Manager Extractor et Data JSON pour générer des champs de saisie masqués
Additions	n/a
Correctifs	n/a

Exemple de code

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

Contenu ajouté via Ajax

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

Itération 3

Voici une liste des changements qui se sont produits depuis l'itération précédente :

Majeurs	Suppression des sous-options d'erreur de connexion. Option d'erreur de connexion renommée.
Additions	n/a
Correctifs	n/a

Exemple de code

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

Contenu ajouté via Ajax

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

Itération 2

Here is a list of changes that happened since the previous itération:

Majeurs	Refonte du gabarit pour utiliser data-ajax. Inclut la solution de secours pour la version HTML de base. Mise à jour du formulaire: Implémente désormais wb-postback pour la validation des formulaires et n'utilise plus data-toggle lors de l'envoi. Ajout d'options d'erreur de connexion (problème 5 à problème 10). Ajout de messages d'erreur et de réussite.
Additions	n/a
Correctifs	n/a

Exemple de code

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

Contenu ajouté via Ajax

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

Itération 1

Exemple de code

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

Détails de la page

Date de modification :: 2023-01-10

Sélection de la langue

Recherche

Zone de rétroaction - Documentation

Introduction

Objectif

Évaluation et rapport

Orientation

Variantes

Note

Variante 1: Outil de rétroaction sur la page (par défaut) Provisoire

Itération 1

Exemple(s) pratique(s)

Comment mettre en œuvre

Spécifique à GCWeb Jekyll

Exemple de code

Variante 2: Outil de rétroaction sur la page avec lien de contact Provisoire

Itération 1

Exemple(s) pratique(s)

Comment mettre en œuvre

Spécifique à GCWeb Jekyll

Exemple de code

Variante 3: Signaler un problème sur cette page (SUP) Stable

Itération 5

Exemple(s) pratique(s)

Comment mettre en œuvre

Champs de saisie masqués

Spécifique à GCWeb Jekyll

Exemple de code

Itérations précédentes

Exemple de code

Exemple de code

Exemple de code

Exemple de code

Détails de la page