Liquid Mode pour l’expérience de signature web mobile

Rechercher

Dernière mise à jour le

Introduction

L’expérience de signature Liquid Mode améliore l’affichage de vos documents en fonction du type d’appareil du destinataire. Il n’est ainsi plus toujours nécessaire de pincer et zoomer, ce qui permet de se concentrer facilement sur les champs à remplir.

Les accords compatibles Liquid Mode sont générés avec deux vues pour le destinataire :

L’affichage PDF créé à l’aide de toutes les informations de style présentes dans le code HTML chargé. Cela correspond à la version signée de l’accord qui peut être téléchargée, tout comme la vue PDF générée par Adobe Acrobat Sign pour tous les accords.
La vue Liquid Mode qui redistribue le document HTML d’entrée et est optimisée pour les écrans de petite taille. La vue Liquid Mode présente une expérience hautement structurée qui remplace le style spécifié dans le document HTML d’origine.

L’interface permet à votre destinataire de basculer facilement entre la vue Liquid Mode et les vues PDF traditionnelles du document, selon ses préférences. Les signatures juridiquement contraignantes restent les mêmes.

Le contenu source à partir duquel les accords compatibles Liquid Mode sont créés est un fichier HTML unique.

Il existe quelques restrictions sur les structures de champs de formulaire et HTML dans le document HTML chargé. Plus précisément :

l’accord doit être créé avec un document HTML unique (un seul fichier) ;
- si plusieurs documents sont utilisés pour créer l’accord, seule une vue PDF est générée ;
le document HTML ne doit pas avoir de contenu JavaScript ; l’utilisation de balises <script> (en tant que code JavaScript intégré, en tant que référence à des fichiers JavaScript externes ou dans les attributs de balises HTML) n’est pas autorisée ;
- si un contenu JavaScript est présent dans le document HTML, Acrobat Sign crée uniquement la vue PDF ;
le document HTML ne peut utiliser que les balises HTML prises en charge dans la partie <body> du document HTML, comme décrit dans la section Balises HTML prises en charge ;
- si des balises HTML non prises en charge se trouvent dans le corps du document HTML, Acrobat Sign crée uniquement la vue PDF.

Comme la vue Liquid Mode offre une expérience très structurée, la feuille de style CSS spécifiée dans le fichier HTML est ignorée (UNIQUEMENT pour la vue Liquid Mode) et seuls les attributs des balises HTML prises en charge influent sur la vue Liquid Mode. Il n’existe aucune restriction de ce type pour la vue PDF : Acrobat Sign utilise la gamme complète d’attributs disponibles pour les balises prises en charge, ainsi que le code CSS spécifié dans le document HTML pour générer la vue PDF.

La notation Balise de texte Adobe Acrobat Sign permet de spécifier les champs de formulaire dans le document HTML.

Remarque :

Si la fonction Liquid Mode est activée, mais que la vue Liquid Mode ne peut pas être générée pour une raison quelconque, l’accord est créé avec la vue PDF uniquement.

L’e-mail de confirmation envoyé à l’expéditeur répertorie les raisons pour lesquelles la vue Liquid Mode n’a pas pu être générée.

Liquid Mode est actuellement pris en charge sur les appareils mobiles. Cette prise en charge devrait s’étendre progressivement.

Activation de Liquid Mode pour la création et l’envoi d’accords

Assurez-vous que Liquid Mode est activé dans le menu Administrateur Acrobat Sign :
- Accédez à Paramètres d’envoi > Liquid Mode
  
  Le paramètre peut être modifié au niveau du compte ou du groupe
Envoyez un seul fichier HTML en utilisant l’une des méthodes suivantes :
- À l’aide de l’API REST v6 POST /agreements d’Acrobat Sign
- À partir de la page Envoyer de l’application web Acrobat Sign
- À partir de la page des formulaires web de l’application web Acrobat Sign
- À l’aide de l’API REST v6 POST /widgets d’Acrobat Sign

Balises HTML prises en charge

Pour créer un accord avec la vue Liquid Mode, le document HTML NE DOIT PAS contenir de structures JavaScript.

Seules les balises suivantes peuvent être utilisées dans le corps du document HTML :

Catégorie	Balises HTML	Attributs ayant une incidence sur la vue Liquid Mode	Restrictions
En-têtes	<h1>, <h2>, <h3>, <h4>, <h5>, <h6>	AUCUN
Division du contenu	<div>	alignement
Saut	<br>	AUCUN
Règle horizontale	<hr>	AUCUN
Paragraphe	<p>	alignement
Images	<img>	source, alt, hauteur, largeur	Consultez la section « Prise en charge des images »
Format de texte	<b>, <i>, <u>, <s>, <strong>, <em>, <span>, <sub>, <sup>	AUCUN
Liste numérotée	<ol>, <li>	valeur, type, inversé, début
Liste non numérotée	<ul>, <li>	valeur, inversée, début
Lien hypertexte	<a>	href	Le protocole d’URL est limité à http, https et mailto
Tableau	<table>, <thead>, <tbody>, <tfoot>, <th>, <tr>, <td>, <caption>, <col>, <colgroup>	AUCUN	1. Les tableaux imbriqués NE SONT PAS pris en charge 2. Les champs de formulaire dans les tableaux NE SONT PAS pris en charge
Libellé de champs de formulaire	<label>	pour	Consultez la section « Libellés des champs de formulaire ».
Regroupement de champs de formulaire	<fieldset>, <legend>	AUCUN	Consultez la section « Étiquetage de groupes de champs ».
Images	<img>	source, alt, hauteur, largeur	La taille de l’image et du code HTML complet doit être inférieure à 400 Ko. Les formats suivants sont pris en charge JPEG, PNG, GIF, BMP et TIFF. La source de l’image doit être une URL HTTP.

Spécification des champs de formulaire

Les champs de formulaire doivent être spécifiés dans le document HTML à l’aide de la notation Balise de texte Adobe Acrobat Sign.

Le tableau suivant présente des exemples de champs de formulaire utilisant des balises de texte Acrobat Sign :

Champ	Balise de texte Sign
Champs de signature (signature, paraphe, bloc de signature, tampon)	{{Sig_es_:signer1:signature}}
	{{Int_es_:signer1:initials}}
	{{SigB_es_:signer1:signatureblock}}
	{{OSig_es_:signer1:optsignature}}
	{{OInt_es_:signer1:optinitials}}
	{{SigStamp_es_:signer1:stampimage(25)}}
Champs de signataire	{{Cmpy_es_:signer1:company}}
	{{N_es_:signer2:fullname}}
	{{Dte_es_:signer1:date}}
	{{Em_es_:signer1:email}}
Champs d’expéditeur	{{*Ttl_es_:sender:title}}
Tampons de participant et ID de transaction	{{userstamp_es_:signer1:stamp:repeat}} {{transstamp1_es_:transactionid:repeat}}
Champ en lecture seule	{{!price}} {{price_es_:readonly}}
Saisie de texte	{{address_es_:signer1}} {{*city_es_:signer1}}
Cases à cocher	{{CB1_es_:checkbox(checked)}}
Case d’option	{{(Red)Color_es_:signer1:label(“Red”)}} {{(Blue)Color_es_:signer1:label(“Blue”)}} {{(Green)Color_es_:signer1:label(“Green”)}}
Image	{{Image1_es_:signer1:inlineimage(4)}}
Liste déroulante	{{Color_es_:signer1:dropdown(options="Red,Green,Blue”, values=”R,G,B”)}}
Lien hypertexte	{{companywebsite_es_:link(http://www.adobe.com):label(Adobe)}}
Pièce jointe	{{*DriversLicense_es_:signer1:attachment}}
Info-bulle	{{Car_color_es:signer1:tooltip('Choose a color')}}
Signature numérique	{{digsig1_es_:signer1:digitalsignature}}
Validation du champ	{{*Mobile_es_:signer1:phone}} {{d_es_:signer1:num(>0,<60)}}
Règles conditionnelles	e.g. {{field_es_:showif(price>60)}}
Champs calculés	{{TV_es_:calc([SubTotal]+[Tax])}}

Remarque :

Toutes les structures de champs de formulaire Acrobat Sign sont prises en charge sauf les suivantes :

Catégorie	Structures non prises en charge	Exceptions
Champ de formulaire de signature numérique	:digitalsignature ne sera pas pris en charge.
Workflows de préremplissage	:prefill ne sera pas pris en charge.
Champ de formulaire de lien hypertexte	La directive :page(N) ne sera pas prise en charge. :link avec des protocoles autres que http, https et mailto.	Les directives :signer1 et :everyone seront prises en charge.
Champs de formulaire sans nom	Les champs de formulaire sans nom ne seront pas pris en charge.	Les cases à cocher sans nom seront prises en charge.
Champs de formulaire renommés	Si plusieurs champs de formulaire avec le même nom mais des directives différentes sont présents, ils ne seront pas pris en charge.

Libellés des champs de formulaire

Chaque champ de formulaire doit être associé à un libellé. Bien que les libellés ne soient pas obligatoires pour chaque champ, il est vivement recommandé de donner à chaque champ de formulaire un libellé.

Plus précisément, en Liquid Mode :

Les libellés sont utilisés pour améliorer la représentation visuelle du champ.
Un libellé associé à un champ fournit des conseils d’accessibilité. Lorsqu’un champ est actif, un lecteur d’écran utilise le libellé pour annoncer le champ à l’utilisateur.
Il est possible de cliquer sur un libellé pour activer un champ. Dans le cas d’une case d’option ou d’une case à cocher, si vous cliquez sur le libellé, la valeur bascule.

Les champs de formulaire peuvent être liés à des libellés à l’aide de la balise HTML <label> de l’une des façons suivantes :

Champ de formulaire Acrobat Sign inclus dans une balise <label>.
- <label>Signature : {{sig_es_:signer1:signature}}</label>
L’attribut « for » de la balise <label> peut faire référence au nom du champ de formulaire pour le lier à un champ de formulaire.
- {{sig_es_:signer1:signature}} … <label for=”sig”>Signature : </label>

Les libellés qui ne peuvent pas être liés à des champs de formulaire par les règles susmentionnées seront rendus en tant que texte de libellé non lié.

En outre, les balises de texte Acrobat Sign prennent en charge la directive :label pour les types de champs de formulaire suivants :

Pièces jointes
Liens hypertexte
Cases à cocher
Cases d’option

La directive de balise de texte Acrobat Sign :label et la balise <label> peuvent être combinées de la manière suivante :

Type de champ de formulaire	Rôle de la directive :label	Rôle de la balise HTML <label>
Pièces jointes, liens hypertexte	Indique le libellé affiché dans la zone de champ de formulaire.	La balise <label> spécifie le libellé ou l’en-tête du champ de formulaire.
Case à cocher, cases d’option	Spécifie le libellé ou l’en-tête du champ de formulaire.	Si la directive de balise de texte Acrobat Sign :label est absente, <label> prend sa place pour le champ de formulaire. Si les deux balises :label et <label> sont présentes, la vue Liquid Mode ne peut pas être créée. Exemples : {{CB_es_:checkbox: signer1:label("I agree.")}}} <label for=” CB”> Yes</label> {{(Red_v)Color_es_:signer1::label(“Red Color”)} <label for=”(Red_v)Color”>Red</label>

Remarque :

Les libellés des cases à cocher peuvent être spécifiés de la façon suivante :

{{CB_es_:checkbox: signer1:label("I agree.")}}
<label> {{CB_es_:checkbox:signer1}} I agree.</label>
{{CB_es_:checkbox:signer1}} <label for="CB"> I agree.</label>

Les libellés pour les cases d’option peuvent être spécifiés de la façon suivante :

{{(Red_v)Color_es_:signer1:label(“Red”)}}
<label> {{(Red_v)Color_es_:signer1}} Red </label>
{{(Red_v)Color_es_:signer1}} <label for=”(Red_v)Color”>Red</label>

Attention :

Habituellement, dans le langage HTML, l’attribut « for » fait référence à une valeur d’ID de champ. La vue Liquid Mode utilise l’attribut « for » pour faire référence aux noms de champs. Cela peut créer une ambiguïté pour les champs de formulaire clonés où il existe plusieurs instances de champs avec exactement la même directive de balise de texte Acrobat Sign. Dans ce cas, nous devons éviter d’utiliser l’attribut « for » et associer des libellés en encadrant la balise de texte dans un élément <label>.

L’exemple suivant crée des champs de formulaire clonés avec des libellés différents pour chacune des deux instances dans la vue de redistribution mobile :

<label> Official {{name_of_official_es_:signer1}} </label>
<label> Name {{name_of_official_es_:signer1}} </label>

Si un champ de formulaire cloné spécifie un libellé à l’aide d’un attribut « for », les références sont ambiguës et ne peuvent pas être résolues. Dans ce cas, la vue Liquid Mode ne sera pas créée.

L’exemple suivant crée uniquement une vue PDF :

<label for="name_of_official> Official </label> {{name_of_official_es_:signer1}}
<label for="name_of_official> Name</label> {{name_of_official_es_:signer1}}

Étiquetage de groupes de champs

Les libellés sont associés à un seul champ de formulaire. Pour associer un libellé/une légende à un groupe de champs (notamment des groupes de cases d’option), nous encourageons l’utilisation d’éléments <fieldset> et <legend>. L’élément <fieldset> permet de regrouper les éléments et <legend> fournit un libellé/une légende au groupe. Comme pour le libellé, les avantages de Liquid Mode sont les suivants :

Meilleure représentation visuelle d’un libellé/une légende associé au groupe de champs
Meilleure expérience d’accès. Les lecteurs d’écran annonceront correctement le groupe de champs à l’aide du contenu <legend>.

Par exemple :

<fieldset>

<legend>Choose your favorite primary color</legend>

{{(Red)Color_es_:signer1:label("Red")}}<br/>

{{(Blue)Color_es_:signer1:label("Blue")}}<br/>

{{(Green)Color_es_:signer1:label("Green")}}<br/>

</fieldset>

Remarque :

Pour la plupart des documents, l’auteur ne souhaite pas utiliser le rendu par défaut d’un élément <fieldset>.

Le cadre de sélection peut être supprimé avec cette feuille de style CSS :

fieldset {

border: none;

margin: 0;

padding: 0;

}

Prise en charge des images

Les images sont prises en charge avec les restrictions suivantes :

Seul l’élément <img> est pris en charge
La source d’une <img> peut être fournie en tant que données incorporées (données : schéma) ou en tant qu’URL web (https : schéma uniquement)
Les formats suivants sont pris en charge : JPEG, PNG, GIF, BMP et TIFF
- Pour les GIF animés, la première image sera utilisée comme image statique
La taille d’une image récupérée à partir d’une URL web est limitée à 5 Mo

Workflows Acrobat Sign non pris en charge

Liquid Mode ne prend pas en charge les workflows Acrobat Sign suivants :

Accords créés à partir de plusieurs documents
Accords créés à partir de documents non HTML
Accords créés à partir de modèles de bibliothèque
Accords créés depuis l’état VERSION PRÉLIMINAIRE ou CRÉATION
Workflows de signature numérique
Workflows de signature manuscrite
Workflows de modification à la volée
Workflows à partir de groupes pour lesquels la case à cocher Aperçu est activée par défaut
Accords avec les motifs de signature activés
Accords configurés pour demander au signataire de s’authentifier chaque fois qu’il clique sur un champ de signature

Une tentative de création d’une vue Liquid Mode dans les workflows susmentionnés entraîne la création d’un accord avec la vue PDF uniquement. L’e-mail de confirmation envoyé à l’expéditeur répertorie les raisons pour lesquelles la vue Liquid Mode n’a pas pu être générée.

Notification d’erreur de Liquid Mode

Si l’expéditeur a tenté de générer un accord avec une vue Liquid Mode, mais qu’Acrobat Sign n’a pas pu le faire, l’expéditeur est informé dans l’e-mail de confirmation de l’accord des problèmes précis qui ont empêché la création de la vue Liquid Mode. L’expéditeur peut résoudre les problèmes signalés et tenter de créer l’accord avec une vue Liquid Mode lors de tentatives ultérieures.

Les problèmes signalés peuvent être regroupés en trois grandes catégories :

Structures HTML non prises en charge
Balises de texte Acrobat Sign non prises en charge
Workflows Acrobat Sign non pris en charge
Erreur interne de Liquid Mode

Des erreurs internes de Liquid Mode se produisent lorsque le serveur rencontre des conditions d’erreur inattendues lors de la tentative de création de la vue Liquid Mode.

Pour les autres catégories d’erreurs, vous trouverez des détails sur les problèmes signalés dans les sous-sections suivantes :

Si la vue Liquid Mode ne peut pas être générée en raison de structures HTML non prises en charge, l’e-mail de confirmation envoyé à l’expéditeur inclut une ou plusieurs des chaînes d’erreur suivantes :

Chaînes d’erreur

Éléments non pris en charge [+NomBalise]

Protocole URL non pris en charge [+url]

Champs de formulaire dans les tableaux non pris en charge [+NomBalise]

Tableaux imbriqués non pris en charge

Libellé enfant non valide [+NomBalise]

Pour plus d’informations, consultez la section Balises HTML prises en charge.

Si la vue Liquid Mode ne peut pas être générée en raison de structures de balises de texte Acrobat Sign non prises en charge, l’e-mail de confirmation envoyé à l’expéditeur inclut une ou plusieurs des chaînes d’erreur suivantes :

Chaînes d’erreur

Impossible de trouver la balise de définition pour la référence [+NomRaccourci]

Les champs préremplis ne sont pas pris en charge [+Nom]

Les liens hypertexte internes ne sont pas pris en charge [+Nom]

Les champs sans nom ne sont pris en charge que pour les cases à cocher.

Les champs portant le même nom mais des directives différentes ne sont pas pris en charge [+Nom]

Les signatures numériques ne sont pas prises en charge [+Nom]

Les champs ne peuvent pas avoir à la fois un élément de type libellé et une directive de type libellé [+Nom]

Champ de formulaire Sign manquant pour la balise de texte [+Nom]

Pour plus d’informations, consultez la section Spécification des champs de formulaire.

Si la vue Liquid Mode ne peut pas être générée en raison de workflows Acrobat Sign non pris en charge, l’e-mail de confirmation envoyé à l’expéditeur inclut une ou plusieurs des chaînes d’erreur suivantes :

Chaînes d’erreur
L’accord est un modèle de bibliothèque.
L’accord nécessite une signature écrite.
L’option CFR du motif de signature est activée dans l’accord.
L’option CFR de modification eSign est activée dans l’accord.

Pour plus d’informations, consultez la section Spécification des champs de formulaire.

Exemple de document HTML : demande d’état de crédit

Les qualités de formulaire prioritaires pour la création de la vue Liquid Mode sont les suivantes :

documents comportant de grands blocs de texte pouvant nécessiter un grand pincement et un zoom important ;
formulaires où il n’y a pas de chevauchement de champs et où le flux de champs en vue Liquid Mode est acceptable.

Telechargement

Obtenir un fichier

Exemple de document HTML

<!DOCTYPE html>

<head>

<title>Sample Title</title>

<style>

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px

}

fieldset {

border: none;

margin: 0;

padding: 0;

}

legend {

float: left;

}

h2 {

margin: 10px 0;

font-size: 13px;

margin: 20px 0 0 0;

}

h3 {

margin: 0;

font-size: 12px;

}

ul {

margin: 0;

}

li {

margin-bottom: 3px;

padding-left: 5px;

}

p {

margin: 4px 0;

}

.header {

border-bottom: 2px solid #000;

margin: 0 5px 15px 5px;

}

.header h1 {

font-weight: 700;

margin: 0;

font-size: 15px;

}

.body {

border: 1px solid #000;

padding: 0 5px 10px 5px;

}

.page {

padding: 0 25px;

margin: 0 auto;

}

.txt_logo {

font-size: 30px;

color:blue;

font-style:oblique

}

.textTag {

padding: 9px 0;

border-bottom: 2px solid #000;

margin: 0 -4px 5px 0

}

.underline {

text-decoration: underline;

font-weight: 700;

font-size: 12px

}

.columns-2 .item {

width: 49%

}

.columns-3 .item {

width: 33 %

}

.item {

display: inline-block

}

.address .item {

width: 16 %

}

.item.big {

width: 30 %

}

.checkbox {

margin: 15px 0

}

.checkbox span {

font-weight: 700;

font-size: 11px

}

.card-info label {

width: 12%;

font-size: 11px;

text-transform: capitalize

}

.card-info p {

border-bottom: 1px solid #000;

margin-right: 10px;

padding-bottom:5px;

display: inline-block

}

.card-number {

width: 40 %;

}

.expiry-date {

width: 25 %;

}

.radio-button label {

width: 55 %

}

.radio-button .item {

width: 16 %

}

.note {

font-size: 12px

}

.footer {

padding: 0 10px;

font-size: 11px;

}

</style>

</head>

<body>

<h2 class="txt_logo"><b>SAMPLE COMPANY</b></h2>

<h1 class="h1_header">SAMPLE REQUEST TO OBTAIN MY FREE CREDIT REPORT </h1>

</div>

<h3>Sample Important Information & Instructions:</h3>

<p>In order to protect your personal information we will validate your identity before mailing your credit report to your <u>confirmed</u>

home address. You must provide a photocopy of the front and back of:</p>

<li class="info__item">Two pieces of government-issued identification</li>

<li class="info__item">If your address is not up-to-date on either identification, you <u>must also</u> provide an additional document showing your <u>current home address</u> (e.g. a utility bill).</li>

<li class="info__item">If you provide your <b>Social Insurance Number</b>, we will cross-reference it with our records to ensure that we disclose the correct information to you. Knowing it helps us avoid delays and confusion in case another individual's identifying information (such as name and address) is similar to the one you provided.</li>

<li class="info__item">If you provide a <b>credit card </b>statement or copy of your <b>credit card</b> as proof, please ensure to <b>blackout</b> your private information.</li>

</ul>

<p>The information you provide on the form will be used to confirm your identity and may also be used to update your credit report. Such updated information will be stored, safeguarded, used and/or disclosed in the normal course as part of your credit file. For more information about SAMPLE COMPANY’s privacy practices, please see our Privacy Policy at https://www.adobe.com/privacy/policy.html. For clarity, in any case, we will keep a copy of the information you provide to demonstrate that we complied with our obligation to obtain reasonable identification from you.

</p>

<p>Please send your completed form with proof of identity to: <b>Lorem inseam dolor sit amen, consenttetur</b>or by fax to: <b>XXX-XX-XXXX.</b>Kindly allow X-Y days for delivery. If any corrections to your credit report are necessary you must complete the Credit Report Update form enclosed with your package, or visit <a href="http://sampleurl">SampleURL</a> and click on “How to File a Something” under Our Sample Assistance.

</p>

</div>

<p class="textTag">{{*LastName_es_:signer1}}</p>

</div>

<p class="textTag">{{*FirstName_es_:signer1}}</p>

<label for="FirstName">FIRST NAME, INITIAL</label>

</div>

<p class="textTag">{{Suffix_es_:signer1}}</p>

<label for="Suffix">SUFFIX (Sr., Jr., etc.)</label>

</div>

<p class="textTag">{{*StreetAddress_es_:signer1 }}</p>

<label for="StreetAddress">CURRENT STREET ADDRESS </label>

</div>

<p class="textTag">{{*Apt_es_:signer1}}</p>

</div>

<p class="textTag">{{*City_es_:signer1}}</p>

</div>

<p class="textTag">{{*Prov_es_:signer1}}</p>

<label for="Prov">PROVINCE</label>

</div>

<p class="textTag">{{*Zip_es_:signer1:zip}}</p>

<label for="Zip">POSTAL CODE</label>

</div>

<h2>PREVIOUS ADDRESS(ES) WITHIN LAST 3 YEARS</h2>

<p class="textTag">{{*StreetAddressPr_es_:signer1 }}</p>

<label for="StreetAddressPr">PREVIOUS STREET ADDRESS </label>

</div>

<p class="textTag">{{*AptPr_es_:signer1}}</p>

</div>

<p class="textTag">{{*CityPr_es_:signer1}}</p>

</div>

<p class="textTag">{{*PrvPr_es_:signer1}}</p>

<label for="PrvPr">PROVINCE</label>

</div>

<p class="textTag">{{*ZipPr_es_:signer1:zip}}</p>

<label for="ZipPr">POSTAL CODE</label>

</div>

<div>

<p class="textTag">{{*EmailAddress_es_:signer1:isemail}}</p>

<label for="EmailAddress">EMAIL</label>

</div>

<p class="textTag">{{$DATEOFBIRTH}}</p>

<label for="Date">DATE OF BIRTH </label>

</div>

<p class="textTag">{{SocialSecurityNumber_es_:signer1:ssn}}</p>

</div>

<p class="textTag">{{$NAMEMAJORCARD}}</p>

<label for="NameMajorCard">NAME OF MAJOR CREDIT CARD:</label>

</div>

<p class="textTag">{{$LAST4}}</p> <label for="Last4">LAST 4 DIGITS OF MAJOR CREDIT CARD:</label>

</div>

<p class="textTag">{{*Signature_es_:signer1:signature}}</p><label for="Signature">Signature</label>

</div>

<p class="textTag">{{*DateOfSignature_es_:signer1:date}}</p><label for="DateOfSignature">Date</label>

</div>

<label class="underline">{{$PAY}} YES, I WOULD ALSO LIKE TO PURCHASE MY Sample Company SCORE* FOR $X.XX (tax included)</label>

            </div>
            <fieldset>
            <legend> I authorize Sample Company to charge the payment to my credit card:</legend>

<div class="item"><label>{{$M}}MasterCard</label></div>

</div>
</legend>

<label for="CardholderName">Cardholder Name:</label>

<p>{{$CALCULATEDCARDHOLDERNAME}}</p>

</div>

<label for="CardNumber">Card Number:</label>

<p class="card-number">{{*CardNumber_es_:signer1}}</p> <label for="ExpiryDate">Expiry Date:</label>

<p class="expiry-date">{{$EXPIRYDATE}}</p>

</div>

<p>Note: Cheque and cash payments are not accepted. Cardholder’s name must be same as requestor’s name.</p>

</div>

<p>*Sample company’s XY is a product some service providers use when assessing applications for credit and services. It is not part of your sample credit report, but is based on the particular information in your credit file at the time it is calculated. Lorem Ipsem is not the same as the Lorem Ipsem, which is also used by some lenders. Sample Company will provide your sample report free of charge, whether or not you purchase your Lorem Ipsem. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sample company can provide more sample services:</b> Sample Address Telephone: 1-XXX-XXX-XXXX Telephone in Sample: 1-XXX-XXX-XXXX</p>

</div>

<p>{{#PAY=*Pay_es_:signer1:checkbox}}</p>

<p>{{#V=(Visa)CCard_es_:signer1:enableif(Pay=checked)}}</p>

<p>{{#M=(MasterCard)CCard_es_:signer1:enableif(Pay=checked)}}</p>

<p>{{#A=(AMEX)CCard_es_:signer1:enableif(Pay=checked)}}</p>

{{#NAMEMAJORCARD=*NameMajorCard_es_:dropdown(options="Visa,MasterCard,AMEX,Discover")}}

<p>{{#CALCULATEDCARDHOLDERNAME=*CardholderName_es_:signer1:calc([FirstName]+" "+[LastName]+" "+[Suffix])}}

<p>{{#LAST4=*Last4_es_:signer1:custom(regexp="^[0-9]{4}$")}}

<p>{{#CREDITCARDNUMBER=*CardNumber_es_:signer1:custom(regexp="^[0-9]{16}$")}}</p>

<p>{{#EXPIRYDATE=*ExpiryDate_es_:isdate(format=mm/yy)}}</p>

<p>{{#DATEOFBIRTH=*Date_es_:signer1:isdate(format=mm/dd/yyyy)}}</p>

</body>

</html>

Vue de l’accord :

Problèmes connus et FAQ

Nous vous recommandons de tester le code HTML à plusieurs reprises, de vérifier qu’il n’y a aucune erreur et qu’il répond aux critères généraux de votre workflow avant de l’envoyer aux destinataires prévus.

Les éléments HTML du document doivent suivre l’ordre de lecture de ce dernier.

Les sauts de page dans le document doivent être spécifiés explicitement à l’aide de la propriété CSS « page-break-after » comme indiqué ci-dessous :

<div style="page-break-after:always"></div>

La refonte du document en gardant à l’esprit la redistribution peut améliorer l’expérience mobile générale. Si vous n’envisagez PAS de revoir toute la présentation du document, vous pouvez conserver l’aspect général du fichier PDF d’origine, avec quelques exceptions :

La vue Liquid Mode n’offre aucune option de gestion spéciale des niveaux de page. Si des niveaux de page tels que des en-têtes, des pieds de page, des filigranes et autres sont présents dans le document HTML, ils peuvent apparaître au milieu du contenu redistribué.
Si le formulaire comprend des instructions pour remplir les champs de formulaire comme « VEUILLEZ IMPRIMER » ou « FACULTATIF », ou des instructions de formatage comme « (mm/jj/aaaa) », veuillez ne pas inclure le texte dans le code HTML. Certaines informations comme les instructions de formatage « (mm/jj/aaaa) » ou un champ de formulaire « FACULTATIF » doivent être spécifiées dans les caractéristiques du champ de formulaire à l’aide des balises de texte.

Certains textes peuvent nécessiter de rassembler plusieurs ensembles disparates d’informations. Les diviser en plusieurs champs de formulaire simplifiera l’expérience utilisateur. Par exemple, dans le document type utilisé plus haut, « NAME & LAST 4 DIGITS OF MAJOR CREDIT CARD » a été divisé en « NAME OF MAJOR CREDIT CARD » et « LAST 4 DIGITS OF MAJOR CREDIT CARD ».

Utilisez uniquement les balises HTML répertoriées comme prises en charge ci-dessus. Consultez la section sur les structures HTML.
Utilisez des coordonnées et des emplacements relatifs tels que « {width: 30%} » afin que le code HTML puisse être redistribué selon la largeur de chaque appareil. Aucune largeur de page absolue ne doit être présente dans le fichier CSS.
Si un fichier PDF contient une structure de tableau ou de liste, la représentation HTML correspondante doit être un tableau ou une liste, respectivement. La seule exception concerne les tableaux avec des champs de formulaire. Si un tableau comporte des champs de formulaire, les mêmes informations doivent être présentées sans tableaux.

Pour offrir une expérience de remplissage de formulaire en ligne plus riche, il est vivement recommandé que les champs de formulaire soient créés à l’aide de toutes les validations, expressions de formatage et règles conditionnelles proposées par les balises de texte Sign, ainsi que de sa formule de calcul.

Les noms des champs de formulaire doivent être uniques s’ils se rapportent à différentes entités.
Il est très vivement recommandé que chaque champ de formulaire porte un libellé mentionnant le champ de formulaire ou en utilisant l’attribut « for ».
Si un champ de formulaire est FACULTATIF, cela doit être indiqué dans les balises de texte Sign. Par exemple :
- {{*S.I.N_es_:signer1}} représente un champ de formulaire obligatoire.
- {{S.I.N_es_:signer1}} représente un champ de formulaire facultatif.
Les balises de texte Sign fournissent un large éventail de validations (code postal, numéro de sécurité sociale, date, e-mail, devises avec vérifications de plage et longueurs maximales, etc.). Veuillez les utiliser.
Les balises de texte Sign comprennent également la mise en forme pour les champs de formulaire tels que le format de date, le format de devise, etc. Il est vivement recommandé de les utiliser.
Des libellés doivent être associés à toutes les cases à cocher. Par exemple :

<label> {{[]}} YES, I WOULD ALSO LIKE TO PURCHASE MY CREDIT SCORE</label>

S’il existe des champs de formulaire qui ressemblent à des cases à cocher dans le formulaire papier/PDF, mais qui ont des valeurs qui s’excluent mutuellement telles que les questions « Yes/No » ou « Visa/MasterCard/AMEX » dans ce formulaire, veuillez réunir tous les champs de formulaire dans un groupe pour en faire un champ de formulaire de type case d’option ou liste déroulante au lieu de cases à cocher. Pensez également à inclure un libellé/en-tête

<legend>Payment Options:</legend>

{{#VISA=(Visa)CCard_es_:label("Visa"):signer1:enableif(Pay=checked)}}

({#MCARD=(MasterCard)CCard_es_:label("MasterCard"):signer1:enableif(Pay=checked)}}

{{#AMEX=(AMEX)CCard_es_:label("AMEX"):signer1:enableif(Pay=checked)}}

</fieldset>

Les balises de texte Sign définissent également les dimensions des champs de formulaire sur la page rendue en fonction des dimensions de la balise de texte de signature. Spécifier des balises de texte Sign permet de réduire les dimensions des champs de formulaire. Veuillez rechercher les thèmes « Raccourcissement des balises de texte » et « Balises de texte longues » à la page https://helpx.adobe.com/fr/sign/using/text-tag.html. Une technique assez répandue consiste à définir une section à la fin du document HTML avec les balises de définition pour les balises de texte très longues, puis à utiliser ces balises de référence dans le corps HTML. Voici quelques exemples de balises de définition :

{{#CCARDDROPDOWN=*ccardDropDown_es_:dropdown(options="Visa,MasterCard,AMEX")}}

Accéder à votre compte

Liquid Mode pour l’expérience de signature web mobile

Introduction

Activation de Liquid Mode pour la création et l’envoi d’accords

Balises HTML prises en charge

Spécification des champs de formulaire

Libellés des champs de formulaire

Étiquetage de groupes de champs

Prise en charge des images

Workflows Acrobat Sign non pris en charge

Notification d’erreur de Liquid Mode

Exemple de document HTML : demande d’état de crédit

Problèmes connus et FAQ

Interroger la communauté

En savoir plus