Aller au contenu
TDS

Page de confirmation

Pattern — Page de confirmation

La page de confirmation est affichée après la soumission réussie d’une demande. C’est le moment de rassurer le citoyen, de lui confirmer les prochaines étapes et de lui fournir une référence pour le suivi.

Structure

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demande reçue — Nom du service</title>
  <link rel="stylesheet" href="/styles/tds.css">
  <!-- Empêcher la resoumission sur F5 -->
  <meta name="robots" content="noindex">
</head>
<body>
  <header class="tds-gov-header" role="banner">
    <div class="tds-gov-header__brand">
      <img src="/images/armoiries-tchad.svg" alt="République du Tchad" height="48">
      <span>Nom du service</span>
    </div>
  </header>


  <main id="main-content">
    <div style="
      max-width: 640px;
      margin: var(--tds-spacing-16) auto;
      padding: 0 var(--tds-spacing-4);
    ">


      <!-- Indicateur de succès -->
      <div style="
        display: flex;
        align-items: center;
        gap: var(--tds-spacing-3);
        margin-bottom: var(--tds-spacing-6);
        color: var(--tds-color-semantic-success-icon);
      ">
        <svg aria-hidden="true" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5l-5-5 1.41-1.41L10 13.67l7.59-7.59L19 7.5l-9 9z"/>
        </svg>
        <span style="
          font-size: var(--tds-font-size-lg);
          font-weight: var(--tds-font-weight-semibold);
        ">
          Demande envoyée avec succès
        </span>
      </div>


      <!-- Titre principal -->
      <h1 style="
        font-size: var(--tds-font-size-4xl);
        font-weight: var(--tds-font-weight-semibold);
        margin-bottom: var(--tds-spacing-4);
      ">
        Votre demande a été reçue
      </h1>


      <!-- Numéro de référence -->
      <div style="
        background: var(--tds-color-neutral-100);
        border: 1px solid var(--tds-color-neutral-200);
        border-radius: var(--tds-radius-sm);
        padding: var(--tds-spacing-4) var(--tds-spacing-5);
        margin-bottom: var(--tds-spacing-6);
      ">
        <p style="
          font-size: var(--tds-font-size-sm);
          color: var(--tds-color-neutral-600);
          margin-bottom: var(--tds-spacing-1);
        ">
          Numéro de référence
        </p>
        <p style="
          font-size: var(--tds-font-size-2xl);
          font-weight: var(--tds-font-weight-bold);
          font-family: var(--tds-font-family-mono);
          color: var(--tds-color-neutral-900);
        ">
          REF-2024-{{REFERENCE_ID}}
        </p>
        <p style="
          font-size: var(--tds-font-size-sm);
          color: var(--tds-color-neutral-500);
          margin-top: var(--tds-spacing-1);
        ">
          Notez ce numéro pour le suivi de votre dossier.
        </p>
      </div>


      <!-- Récapitulatif -->
      <h2 style="
        font-size: var(--tds-font-size-xl);
        font-weight: var(--tds-font-weight-semibold);
        margin-bottom: var(--tds-spacing-4);
      ">
        Récapitulatif
      </h2>


      <dl style="
        border: 1px solid var(--tds-color-neutral-200);
        border-radius: var(--tds-radius-sm);
        overflow: hidden;
        margin-bottom: var(--tds-spacing-8);
      ">
        <div style="
          display: flex;
          gap: var(--tds-spacing-4);
          padding: var(--tds-spacing-3) var(--tds-spacing-4);
          border-bottom: 1px solid var(--tds-color-neutral-200);
        ">
          <dt style="
            font-weight: var(--tds-font-weight-semibold);
            min-width: 160px;
            color: var(--tds-color-neutral-700);
          ">Type de demande</dt>
          <dd>{{TYPE_DEMANDE}}</dd>
        </div>
        <div style="
          display: flex;
          gap: var(--tds-spacing-4);
          padding: var(--tds-spacing-3) var(--tds-spacing-4);
          border-bottom: 1px solid var(--tds-color-neutral-200);
        ">
          <dt style="
            font-weight: var(--tds-font-weight-semibold);
            min-width: 160px;
            color: var(--tds-color-neutral-700);
          ">Date de soumission</dt>
          <dd>{{DATE_SOUMISSION}}</dd>
        </div>
        <div style="
          display: flex;
          gap: var(--tds-spacing-4);
          padding: var(--tds-spacing-3) var(--tds-spacing-4);
        ">
          <dt style="
            font-weight: var(--tds-font-weight-semibold);
            min-width: 160px;
            color: var(--tds-color-neutral-700);
          ">Délai estimé</dt>
          <dd>{{DELAI_TRAITEMENT}}</dd>
        </div>
      </dl>


      <!-- Prochaines étapes -->
      <h2 style="
        font-size: var(--tds-font-size-xl);
        font-weight: var(--tds-font-weight-semibold);
        margin-bottom: var(--tds-spacing-4);
      ">
        Prochaines étapes
      </h2>


      <ol style="
        padding-left: var(--tds-spacing-6);
        margin-bottom: var(--tds-spacing-8);
        line-height: var(--tds-line-height-lg);
      ">
        <li style="margin-bottom: var(--tds-spacing-3);">
          Un e-mail de confirmation a été envoyé à <strong>{{EMAIL_UTILISATEUR}}</strong>.
        </li>
        <li style="margin-bottom: var(--tds-spacing-3);">
          Votre dossier sera examiné dans un délai de {{DELAI_TRAITEMENT}}.
        </li>
        <li>
          Vous serez notifié par e-mail lorsque votre demande sera traitée.
        </li>
      </ol>


      <!-- Actions -->
      <div style="display: flex; gap: var(--tds-spacing-3); flex-wrap: wrap;">
        <a
          href="/tableau-de-bord"
          class="tds-button tds-button--primary tds-button--md"
        >
          Accéder à mes demandes
        </a>
        <a
          href="/"
          class="tds-button tds-button--secondary tds-button--md"
        >
          Retour à l'accueil
        </a>
      </div>


    </div>
  </main>
</body>
</html>

Points critiques

  • Ne pas permettre la resoumission — utiliser le pattern POST/redirect/GET
  • Toujours fournir un numéro de référence — c’est la preuve de la transaction
  • Confirmer par e-mail — doublon rassurant pour le citoyen
  • Indiquer les prochaines étapes — le citoyen doit savoir ce qui se passe
  • Proposer un retour clair — accès au tableau de bord ou à l’accueil