Commentaires de page (SUP) - Documentation
- Statut
- Stable
- Type
- Fonctionnalité du site Canada.ca
- Dernière révision
- 2022-04-26
Objectif
Affiche le formulaire de commentaires sur la page
Exemple pratique
- Exemple de formulaire de commentaires de page
- Exemple de formulaire de commentaires de page en utilisant les attributs de données analytiques
- Exemple de formulaire de commentaires de page version 1
Comment mettre en œuvre
-
Pour afficher le formulaire de commentaires de page, créez une code><div> avec l'attribut de données suivant :
data-ajax-replace="ajax/report-problem-fr.html".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 :
<a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème sur cette page</a>Pour plus d'informations sur le plugiciel Data Ajax, veuillez visiter Page de documentation Data Ajax
Évaluation et rapport
Il n'y a pas d'évaluation ni de rapport disponible pour ce composant.
API (version 2.0)
| Classe CSS | Gabarit | Rendu visuel | Schéma |
|---|---|---|---|
| n.d. | Version 2.0 | n.d. | n.d. |
Gabarit (dernière : v.2.0)
Notes sur la migration du gabarit
Composant du gabarit de site
Version 2.0
Le html inséré par le plugiciel Data Ajax se trouve sur la page suivante : https://github.com/wet-boew/GCWeb/blob/master/sites/feedback/ajax/report-problem-fr.html.
<div data-ajax-replace="ajax/report-problem-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 ou une erreur sur cette page </a>
</div>
</div>
</div>Avant, la version 1.0
<details class="brdr-0">
<summary class="btn btn-default text-center">Signaler un problème sur cette page</summary>
<div class="well row">
<div class="gc-rprt-prblm">
<div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl" >
{ formulaire de commentaires }
</div>
<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" >
<h3>Merci pour votre aide !</h3>
<p>Vous ne recevrez pas de réponse. Pour toute demande, veuillez <a href="https://www.canada.ca/fr/contact.html">nous contacter</a>.</p>
</div>
</div>
</div>
</details>Formulaire de signalement d'un problème (SUP) (commentaires)
Référence des fichiers ajax implémentés
Version 2.0
<form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback" data-wb-postback="{"success":".success-message","failure":".failure-message","content":".form-content"}" >
<fieldset>
<legend>
<span class="field-name">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>
<strong><button type="submit" class="btn btn-primary">Soumettre</button></strong>
</form><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>Avant, la version 1.0
<form action="#">
<fieldset>
<legend><span class="field-name">Veuillez cocher toutes les réponses pertinentes :</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>