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

De : Secrétariat du Conseil du Trésor du Canada

Obligatoire sur toutes les pages

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.

Utilisez ce modèle pour 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.

Sur cette page

Quand l'utiliser

Ce modèle est obligatoire sur toutes les pages.

Éléments obligatoires du système de conception

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

Utilisation de la Solution de gabarits à déploiement centralisé (SGDC) pour mettre en œuvre le thème du site Canada.ca.

Ne mettez pas en œuvre ce modèle au moyen de la SGDC. Pour désactiver le pied de page dans la SGDC :

  • utilisez la version de la SGDC pour les applications Web du GC, même s’il s’agit de vos pages HTML statiques;
  • supprimez la référence pour le « pré-pied de page ».

Vous devriez ensuite afficher le formulaire « Signaler un problème » à sa place.

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

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 :

Déclaration de confidentialité

Merci de votre aide!

Vous ne recevrez pas de réponse. Pour toute question, communiquez avec nous.

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>

Discussion

Discutez de ce modèle dans GitHub

Date de modification :