Guide d'utilisation Annuler

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

 

Guide Adobe Acrobat Sign

Nouveautés

Commencer

Administration

Envoi, signature et gestion des accords

Fonctionnalités et workflows d’accord avancés

Intégration à d’autres produits

Développeur Acrobat Sign

Assistance et dépannage

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 :

  1. 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.
  2. 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.

Workflow Liquid Mode

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

  1. 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
    Accès aux commandes Liquid Mode

  2. 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
    Envoyer un document HTML


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 :

  1. Champ de formulaire Acrobat Sign inclus dans une balise <label>.
    • <label>Signature : {{sig_es_:signer1:signature}}</label>
  2. 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 : JPEGPNGGIFBMP 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 :


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.


Problèmes connus et FAQ

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?