Signaler un problème sur cette page: Configuration de conception de Canada.ca

Nous mettons hors service la configuration « Signaler un problème sur cette page ». Nous ne vous conseillons pas d’ajouter cette configuration à vos pages.

Si vous souhaitez recueillir de la rétroaction pour des pages Web en particulier, vous pouvez utiliser la configuration « Outil de rétroaction sur la page (ORP) ». N’ajoutez l’ORP qu’aux pages pour lesquelles vous prévoyez d’assurer un suivi actif et d’exploiter la rétroaction reçue.

Le modèle « Signaler un problème » permet aux gens de fournir des commentaires par le biais d'un formulaire pour tout problème qu'ils rencontrent avec la page Web sur laquelle ils se trouvent.

Ce modèle permet d'activer la rétroaction au niveau de la page. Lorsque les gens cliquent sur le bouton « Signaler un problème sur cette page », ils se voient présenter des problèmes courants à sélectionner à l'aide de cases à cocher. Si aucune de ces questions ne s'applique, ils peuvent choisir « Autre » pour fournir plus de détails.

Quand l'utiliser

Utilisez ce modèle pour activer la rétroaction au niveau de la page.

Quoi éviter

Assurez-vous que la rétroaction reçue est exploitable. Si vous le pouvez, fournissez un formulaire qui permet aux utilisateurs de fournir des détails sur les problèmes qu’ils éprouvent.

Comment mettre en œuvre

Le bouton, l’étiquette, le placement et l’énoncé de protection des renseignements personnels sont obligatoires :

le modèle est présenté comme un bouton qui utilise la configuration boutons pour les actions secondaires, qui, lorsqu’on clique dessus, ouvre un formulaire de rétroaction;
l’étiquette indique : « Signaler un problème sur cette page » ;
placement : placée directement sous la zone de contenu principale, alignée à gauche;
énoncé de protection des renseignements personnels : placé dans une fenêtre superposée qu’on peut fermer.

Le modèle pour les contenus du formulaire de rétroaction est recommandé. Si on ne reçoit pas des données significatives, il est possible d’utiliser un lien « mailto » comme solution de rechange.

Envoyez le formulaire : assurez-vous de remplacer le paramètre fictif « # » dans la ligne action du formulaire par l’emplacement où votre institution peut recueillir les données du formulaire. Envisagez la possibilité d’envoyer le formulaire à une boîte de réception générale si vous ne possédez pas de serveur pour traiter ce type de formulaire.

Signaler un problème sur cette page

Veuillez cocher toutes les réponses qui s'appliquent :

Quelque chose ne fonctionne pas

Il y a une erreur d'orthographe ou de grammaire

L'information est erronée

L'information n'est plus à jour

Je ne trouve pas ce que je cherche

Autre

Déclaration de confidentialité

Code

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-4">
   <details class="brdr-0" closed>
    <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-tggl">
       <form id="gc-rprt-prblm-form" action="#" method="post">
        <fieldset>
         <legend><span class="field-name">Veuillez cocher toutes les réponses qui s'appliquent : </span></legend>
         <div class="checkbox">
          <label for="problem1"><input type="checkbox" data-reveal="#broken" name="problem" value="Quelque chose ne fonctionne pas" id="problem1">Quelque chose ne fonctionne pas</label>
         </div>
         <div class="form-group hide" id="broken">
          <label for="problem1-detail">Fournissez plus de détails (facultatif) :</label>
          <input type="text" class="form-control full-width" id="problem1-detail">
         </div>
         <div class="checkbox">
          <label for="problem2"><input type="checkbox" data-reveal="#spelling" name="problem" value="Il y a une erreur d'orthographe ou de grammaire" id="problem2">Il y a une erreur d'orthographe ou de grammaire</label>
         </div>
         <div class="form-group hide" id="spelling">
          <label for="problem2-detail">Fournissez plus de détails (facultatif) :</label>
          <input type="text" class="form-control full-width" id="problem2-detail">
         </div>
         <div class="checkbox">
          <label for="problem3"><input type="checkbox" data-reveal="#wrong" name="problem" value="L'information est erronée" id="problem3">L'information est erronée</label>
         </div>
         <div class="form-group hide" id="wrong">
          <label for="problem3-detail">Fournissez plus de détails (facultatif) :</label>
          <input type="text" class="form-control full-width" id="problem3-detail">
         </div>
         <div class="checkbox">
          <label for="problem4"><input type="checkbox" data-reveal="#outdated" name="problem" value="L'information n'est plus à jour" id="problem4">L'information n'est plus à jour</label>
         </div>
         <div class="form-group hide" id="outdated">
          <label for="problem4-detail">Fournissez plus de détails (facultatif) :</label>
          <input type="text" class="form-control full-width" id="problem4-detail">
         </div>
         <div class="checkbox">
          <label for="problem5"><input type="checkbox" data-reveal="#find" name="problem" value="Je ne trouve pas ce que je cherche" id="problem5">Je ne trouve pas ce que je cherche</label>
         </div>
         <div class="form-group hide" id="find">
          <label for="problem5-detail">Fournissez plus de détails (facultatif) :</label>
          <input type="text" class="form-control full-width" id="problem5-detail">
         </div>
         <div class="checkbox">
          <label for="problem6"><input type="checkbox" data-reveal="#confusing" name="problem" value="Autre" id="problem6">Autre</label>
         </div>
         <div class="form-group hide" id="confusing">
          <label for="problem6-detail">Fournissez plus de détails (facultatif) :</label>
          <input type="text" class="form-control full-width" id="problem6-detail">
         </div>
        </fieldset>
        <p><a class="wb-lbx" href="#privacy-statement">Déclaration de confidentialité</a></p>
        <section class="mfp-hide modal-dialog modal-content overlay-def" id="privacy-statement">
         <header class="modal-header">
          <h2 class="modal-title">Déclaration de confidentialité</h2>
         </header>
         <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna.</p>
         </div>
        </section>
        <button type="submit" class="btn btn-primary wb-toggle" data-toggle="{&quot;stateOff&quot;: &quot;hide&quot;, &quot;stateOn&quot;: &quot;show&quot;, &quot;selector&quot;: &quot;.gc-rprt-prblm-tggl&quot;}">Envoyer</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, <a href="https://www.canada.ca/fr/contact.html">communiquez avec nous</a>.</p>
      </div>
     </div>
    </div>
   </details>
  </div>
 </div>

Détails de la page

Date de modification :: 2023-10-03

Sélection de la langue

Recherche