Aller au contenu principal

Configuration HTML

Référence complète de la structure HTML des modèles Auco — espaces réservés, positionnement des signatures, champs automatiques et contraintes du générateur de PDF.

Structure de base d'un champ​

Chaque champ de formulaire est représenté par un élément doté d'un attribut name unique :

<span name="question_1">___________</span>

Fonctionnement :

  • Le SDK détecte les éléments HTML ayant un attribut name.
  • Il recherche la question correspondante dans le JSON à partir de name.
  • Il remplace le contenu de l'élément par la valeur saisie par l'utilisateur.

Le contenu initial (___________ ci-dessus) n'est qu'un espace réservé et sera écrasé. Vous pouvez utiliser des tirets bas, des tirets, ou le laisser vide — choisissez ce qui se lit le mieux dans un aperçu.

Champs de clause (visibilité conditionnelle)​

Pour les questions de type clausula, créez un <span> par option dans le HTML, en utilisant le modèle de nom {question_name}_{option_value} :

<span name="document_type_id_card">Carte d'identité</span>
<span name="document_type_foreign_id" hidden>Pièce d'identité étrangère</span>
<span name="document_type_passport" hidden>Passport</span>
Visibilité de l'option par défaut

Le span qui correspond à la value par défaut de la question dans la configuration JSON ne doit pas avoir hidden. Tous les autres spans d'options doivent avoir hidden. Le SDK modifie la visibilité à mesure que l'utilisateur choisit différentes options.

Emplacement des signatures​

Dans le HTML complet, placez un <div> avec la classe sign-margin et l'attribut name à l'endroit où chaque signature doit apparaître. Le name doit correspondre à la valeur type du signataire dans signatureProfile :

<div name="buyer" class="sign-margin"></div>

Si un même signataire signe à plusieurs endroits du document, répétez le <div> avec le même name à chaque occurrence :

<!-- Page 1 -->
<div name="buyer" class="sign-margin"></div>

<!-- Page 5 -->
<div name="buyer" class="sign-margin"></div>
Utilisez name, pas id

Avec id, la signature apparaît dans le PDF, mais elle n'apparaît pas dans l'aperçu du formulaire ; un signataire qui signe sur place ne voit donc pas sa signature dans le document pendant qu'il le remplit. De plus, si un <div id="buyer"> existe n'importe où dans le document, tous les <div name="buyer"> sont ignorés silencieusement. Si vous avez des modèles qui utilisent id, remplacez-le par name.

Champs automatiques à la fin de la signature​

La plateforme remplit automatiquement une valeur name réservée lorsque le document est entièrement signé. Ajoutez-la là où cela a du sens :

signDate — se remplit avec la date de signature​

<p>Signé le <span name="signDate">________</span></p>

Lorsque le document est scellé, ce span est remplacé par la date à laquelle la signature a été finalisée, au format DD de mes de YYYY (localisé).

info

N'ajoutez pas signDate comme question dans la config de votre JSON. Il s'agit d'un nom réservé géré entièrement par l'environnement d'exécution.

Contraintes du générateur de PDF​

Le générateur de PDF d'Auco prend en charge un CSS limité. L'utilisation de fonctionnalités non prises en charge entraînera des mises en page défectueuses.

❌ À NE PAS utiliser​

  • display: flex, flex-direction, flex-wrap ou toute propriété flexbox
  • display: grid, grid-template-* ou toute propriété CSS Grid
  • Propriétés/variables personnalisées CSS : var(--x)
  • Requêtes @media (prise en charge limitée)
  • Unités de mise en page modernes comme vw, vh, dvh, cqw

✅ Alternatives sûres​

  • display: block, display: inline-block, display: table, display: table-cell
  • float: left / float: right pour les mises en page en colonnes
  • position: absolute / relative pour un placement précis
  • Éléments HTML <table> pour les mises en page complexes à plusieurs colonnes
  • style="..." en ligne ou un bloc <style> dans le <head>
  • Piles de polices sûres pour le web : Arial, Helvetica, Times New Roman, Georgia

✅ Encodage​

  • Définissez <meta charset="UTF-8"> dans le <head>
  • Écrivez directement les caractères accentués (á, é, ñ) — n'utilisez pas d'entités HTML (&aacute;, &ntilde;)

Principe du document continu​

Le HTML complet est rendu comme un flux continu, et non comme une réplique page par page d'un document source.

À faireÀ ne pas faire
Traiter le contenu comme un seul long fluxDécouper le contenu selon les pages d'un PDF d'origine
Inclure un en-tête/logo une seule fois en hautRépéter les en-têtes sur chaque page
Inclure un pied de page une seule fois s'il apporte un contenu réelRépéter les pieds de page sur chaque page
Laisser le générateur de PDF gérer les sauts de pageInsérer <div style="page-break-after: always">
Omettre totalement les compteurs « Page N sur M »Inclure une pagination comme « Pág. 1 de 4 »
avertissement

Le CSS de saut de page manuel (page-break-before, page-break-after) est rarement nécessaire et produit souvent de moins bonnes mises en page que si l'on laisse le générateur de PDF décider. À utiliser avec modération.

Exemple complet de base​

<div class="form-container">
  <h1>Formulaire d'achat</h1>

  <!-- Champ simple -->
  <p>Nom de l'acheteur : <span name="buyer_name">___________</span></p>

  <!-- Champ e-mail -->
  <p>Adresse e-mail : <span name="buyer_email">___________</span></p>

  <!-- Champ monétaire -->
  <p>Valeur totale : <span name="total_amount">___________</span></p>

  <!-- Clause avec options -->
  <p>
    Type de document :
    <span name="doc_type_id_card">Carte d'identité</span>
    <span name="doc_type_foreign_id" hidden>Pièce d'identité étrangère</span>
  </p>

  <!-- Emplacement de la signature -->
  <h2>Signature</h2>
  <div name="buyer" class="sign-margin"></div>

  <!-- Date de signature automatique -->
  <p>Signé le <span name="signDate">________</span></p>
</div>

Pour un exemple complet de bout en bout couvrant le HTML masque, le HTML complet et le JSON, consultez l'Introduction.