Le code a usage unique qui vaut consentement dans une signature electronique. C'est le moment le plus fragile du parcours : un signataire qui bute sur le code abandonne et le document reste non signe. Quatre regles tenues partout : le collage et le remplissage automatique (autocomplete="one-time-code") remplissent toutes les cases d'un coup, inputmode="numeric" ouvre le pave numerique (jamais type="number"), on dit ou le code est parti et combien de temps il reste valable, et une erreur garde les chiffres visibles en annoncant les essais restants. Les champs des demonstrations sont actifs : tapez, collez, effacez.
A. Styles de cases
Encadrees, soulignees, pleines, groupees, jointes, grand format, masquees, alphanumeriques, et les deux techniques a champ unique. Le socle est SIG-A1, le reste n'est que modificateurs.
6 chiffres, envoyes au 06 •• •• •• 56 78
Cases encadrees
Le socle de la categorie et le choix par defaut : six cases bordees, lisibles par tous, sans ambiguite sur le nombre de chiffres attendus.
Pour une page de signature epuree, posee sur le document lui-meme. Un simple trait par chiffre, qui s'epaissit et prend la couleur primaire sur la case active.
Interface d'application mobile ou de produit SaaS : cases sans bordure sur un fond enfonce, la bordure n'apparait qu'au focus. Moins de traits a l'ecran, meme lisibilite.
Un code de 6 chiffres se memorise en deux paquets de 3 : c'est ainsi qu'il est ecrit dans le SMS (482 913), le champ reprend la meme coupure. Le tiret est decoratif, il n'est ni saisi ni lu.
Signature sur la tablette du technicien ou sur le telephone d'un client age : cases de 56 px, chiffres de 28 px. La cible tactile depasse largement les 44 px exiges.
Quand l'ecran est visible par d'autres (signature en agence, ecran partage en visio). Les chiffres sont remplaces par des points, un bouton les devoile le temps de verifier.
Code remis sur papier ou lu au telephone (lettres et chiffres, 8 caracteres). Police a chasse fixe, majuscules forcees, et un alphabet sans les caracteres ambigus : ni O, ni 0, ni I, ni 1.
La technique la plus robuste : UN seul input, les cases sont dessinees en fond et les chiffres espaces pour tomber dedans. Le remplissage automatique iOS et Android, le collage et les lecteurs d'ecran fonctionnent sans une ligne de JavaScript.
.sig-peigne {
--pas: 44px; /* largeur d'une case + son espace */
--case: 38px; /* largeur dessinee de la case */
/* Une case de plus que necessaire : l'espacement suit aussi le dernier
chiffre, sans cette marge le champ defilerait d'un cran a la sixieme saisie. */
width: calc(var(--pas) * 7);
height: 54px;
padding: 0 0 0 calc((var(--case) - 1ch) / 2);
border: 0;
border-radius: 0;
background:
repeating-linear-gradient(90deg, var(--c-border-strong) 0 var(--case), transparent var(--case) var(--pas))
left bottom / calc(var(--pas) * 5 + var(--case)) 2px no-repeat,
repeating-linear-gradient(90deg, var(--c-surface) 0 var(--case), transparent var(--case) var(--pas))
left top / calc(var(--pas) * 5 + var(--case)) 100% no-repeat;
color: var(--c-text);
font-family: var(--font-mono);
font-size: 24px;
font-weight: var(--fw-bold);
letter-spacing: calc(var(--pas) - 1ch);
caret-color: var(--c-primary);
}
.sig-peigne:focus {
outline: none;
background:
repeating-linear-gradient(90deg, var(--c-primary) 0 var(--case), transparent var(--case) var(--pas))
left bottom / calc(var(--pas) * 5 + var(--case)) 2px no-repeat,
repeating-linear-gradient(90deg, var(--c-surface) 0 var(--case), transparent var(--case) var(--pas))
left top / calc(var(--pas) * 5 + var(--case)) 100% no-repeat;
}
@media (max-width: 380px) { .sig-peigne { --pas: 42px; --case: 36px; } }
un input, letter-spacing calcule, cases en repeating-linear-gradient sur le fond
Cliquez puis tapez ou collez le code
Champ unique et cases dessinees
Le schema des parcours de signature recents : un input invisible pose par-dessus six cases. On garde tous les avantages du champ unique (remplissage automatique, collage) avec le rendu des cases et un curseur qui clignote dans la case active.
Verification, code accepte, code incorrect, code expire, signature suspendue. Chaque etat dit ce qui se passe et quelle est la suite.
Verification du code...
Verification en cours
Les cases se figent des que le sixieme chiffre est saisi : on n'attend pas de clic sur un bouton. Le message dit ce qui se passe, pas seulement qu'il se passe quelque chose.
Code incorrect. Verifiez le SMS : il vous reste 2 essais.
Code incorrect
Bordure rouge, secousse breve, et les chiffres restent affiches pour que le signataire voie son erreur. Le nombre d'essais restants est annonce avant qu'il soit trop tard.
[&_input]:border-red-600 + animate-[secousse_400ms] ; aria-invalid sur chaque case
Ce code a expire apres 10 minutes.
Code expire
Le code a une duree de vie (10 minutes en general). Une fois expire, les cases se desactivent et la seule action proposee est la bonne : en recevoir un nouveau.
[&_input]:disabled:bg-slate-100 ; une seule action proposee
Signature suspendue
Trois codes incorrects ont ete saisis. Par securite, un nouveau code pourra etre demande dans 14:59.
Ce n'est pas vous ? Prevenez l'emetteur du document : contact@exemple.fr
Trop d'essais
Apres 3 codes faux, la signature est suspendue un temps. On dit pourquoi, pour combien de temps, et qui contacter : un blocage sans issue fait appeler l'emetteur en colere.
Voir le codeMasquer le code
<div class="sig-bloque" role="alert">
<div class="sig-bloque__tete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg><strong>Signature suspendue</strong></div>
<p>Trois codes incorrects ont ete saisis. Par securite, un nouveau code pourra etre demande dans <strong class="sig-rebours" data-sig-rebours="899">14:59</strong>.</p>
<p class="sig-bloque__aide">Ce n'est pas vous ? Prevenez l'emetteur du document : <a href="#">contact@exemple.fr</a></p>
</div>
Ecrans complets prets a coller : signature par SMS, choix du canal, renvoi, consentement, feuille mobile, courriel, texte du SMS, preuve de signature.
Devis D-2026-0418Pompe a chaleur air/eau · 3 pages
Saisissez votre code de signature
Nous venons d'envoyer un code a 6 chiffres au 06 •• •• •• 56 78.
Le code est valable 10 minutes.
Signature par SMS
L'ecran complet, pret a coller : le document a signer, ou le code est parti, le champ, le renvoi et l'action. Tapez 482913 pour voir la reussite, n'importe quel autre code pour l'erreur.
Avant l'envoi, le signataire choisit ou recevoir son code. Les coordonnees sont masquees mais reconnaissables : assez pour verifier que c'est bien les siennes, pas assez pour les exposer.
Le lien de renvoi est bloque 30 secondes avec un decompte visible : sans cela, le signataire impatient en demande trois et saisit le premier, qui n'est plus valable. Puis deux portes de sortie : changer de numero, ou recevoir un appel.
disabled:opacity-60 pendant le decompte ; chiffres tabular-nums
Consentement et code
La forme qui tient juridiquement : la case d'acceptation precede le code, et le bouton reste inactif tant que les deux ne sont pas remplis. La phrase dit exactement ce qui est signe.
bouton disabled tant que case non cochee ou code incomplet
Code de signature
Envoye au 06 •• •• •• 56 78
Depuis Messages482913
Feuille mobile
Sur telephone, le code s'ouvre dans une feuille montee du bas, par-dessus le document. Les cases restent au-dessus du clavier, et le document reste visible en arriere-plan pour rappeler ce qu'on signe.
Rien recu ? Regardez dans les courriers indesirables et l'onglet Promotions, ou recevez le code par SMS.
Code envoye par courriel
Quand le code part par courriel, le signataire doit changer d'application. Un raccourci vers sa messagerie et un rappel des dossiers ou chercher evitent l'abandon.
lien vers le webmail deduit du domaine de l'adresse
ODISIGNmaintenant
ECO CONFORT HABITAT vous invite a signer le devis D-2026-0418.
Votre code : 482 913
Valable 10 min. Ne le communiquez a personne, meme a l'emetteur.
@signer.exemple.fr #482913
SMS du code
Le message lui-meme fait partie de l'interface. Le nom de l'emetteur en premier, le code en clair, la duree de validite, l'avertissement de ne pas le transmettre, et la derniere ligne au format WebOTP pour que le navigateur remplisse le champ tout seul.
Voir le codeMasquer le code
<div class="sig-sms">
<div class="sig-sms__tete"><strong>ODISIGN</strong><span>maintenant</span></div>
<div class="sig-sms__bulle">
ECO CONFORT HABITAT vous invite a signer le devis D-2026-0418.<br>
Votre code : <strong>482 913</strong><br>
Valable 10 min. Ne le communiquez a personne, meme a l'emetteur.<br><br>
<span class="sig-sms__otp">@signer.exemple.fr #482913</span>
</div>
</div>
la derniere ligne « @domaine #code » est lue par l'API WebOTP (Chrome Android) et par le remplissage iOS
Document signe
Une copie vous est envoyee par courriel. Vous pouvez fermer cette page.
Signataire
Martine Lefevre
Date
24/10/2026 a 14:32:07
Moyen
Code SMS au 06 •• •• •• 56 78
Reference
SIG-7F3A-92C1-0B4E
Signature confirmee
Le dernier ecran sert de preuve : qui a signe, quand (a la seconde), par quel moyen, et la reference du dossier de preuve. Le document signe se telecharge tout de suite, sans attendre le courriel.
Voir le codeMasquer le code
<div class="sig-carte">
<h3 class="sig-carte__titre">Document signe</h3>
<p class="sig-carte__texte">Une copie vous est envoyee par courriel. Vous pouvez fermer cette page.</p>
<dl class="sig-preuve">
<div><dt>Signataire</dt><dd>Martine Lefevre</dd></div>
<div><dt>Date</dt><dd>24/10/2026 a 14:32:07</dd></div>
<div><dt>Moyen</dt><dd>Code SMS au 06 •• •• •• 56 78</dd></div>
<div><dt>Reference</dt><dd class="sig-preuve__ref">SIG-7F3A-92C1-0B4E</dd></div>
</dl>
<div class="sig-ligne">
<button type="button" class="btn btn--plein"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Telecharger le PDF signe</button>
<button type="button" class="btn btn--texte">Dossier de preuve</button>
</div>
</div>