Liquid Mode per l’esperienza di firma mobile sul web

Cerca

Introduzione

L’esperienza di firma Liquid Mode migliora la visualizzazione dei documenti in base al dispositivo del destinatario, riducendo la necessità di ingrandire e attivando facilmente i campi da riempire.

Gli accordi conformi con la modalità Liquid Mode vengono generati con due viste per il destinatario:

  1. La vista PDF, creata utilizzando tutte le informazioni di stile presenti nel file HTML caricato. Questa corrisponde alla versione firmata dell’accordo disponibile per il download, proprio come la vista PDF generata da Adobe Acrobat Sign per tutti gli accordi.
  2. La vista Liquid Mode, in cui il documento HTML di input viene ottimizzato per schermi di piccole dimensioni. La vista Liquid Mode presenta un’esperienza altamente curata che sostituisce lo stile specificato nel documento HTML originale.

L’interfaccia consente al destinatario di passare facilmente dalla modalità Liquid Mode alla vista PDF tradizionale del documento, a seconda delle sue preferenze, e acquisisce le stesse firme legalmente vincolanti.

 

Gli accordi conformi alla modalità Liquid Mode vengono creati con un singolo file HTML come contenuto di origine.

Il documento HTML caricato è soggetto ad alcune limitazioni relative all’HTML e ai costrutti dei campi modulo. In particolare:

  • L’accordo deve essere creato con un singolo documento HTML (un solo file).
    • Se per creare l’accordo vengono utilizzati più documenti, viene generata solo la vista PDF.
  • Il documento HTML non può contenere JavaScript. Non è consentito l’uso di tag <script>, sia come codice JavaScript in linea che come riferimento a file JavaScript esterni, o in attributi dei tag HTML.
    • Se nel documento HTML vengono rilevati codici JavaScript, Acrobat Sign crea solo la vista PDF.
  • Il documento HTML può utilizzare solo i tag HTML supportati nella sezione <corpo> del documento HTML, come descritto in Tag HTML supportati.
    • Se nel corpo del documento HTML sono presenti dei tag HTML non supportati, Acrobat Sign crea solo la vista PDF.

Poiché la vista Liquid Mode è un’esperienza molto curata, i CSS specificati nel file HTML vengono ignorati (SOLO per la vista Liquid Mode) e solo gli attributi dei tag HTML supportati verranno applicati alla vista Liquid Mode. Tuttavia, restrizioni di questo tipo non sono applicabili alla vista PDF. Per generare la vista PDF, Acrobat Sign utilizza l’intera gamma di attributi disponibili per i tag supportati e il CSS specificato nel documento HTML.

Per specificare i campi modulo nel documento HTML, viene utilizzata la notazione dei tag di testo di Adobe Acrobat Sign.

Flusso di lavoro in modalità Liquid Mode

Nota:

Se la funzione Liquid Mode è attivata ma per qualche motivo la vista Liquid Mode non può essere generata, l’accordo viene creato solo per la vista PDF.

Nell’e-mail di conferma inviata al mittente vengono elencati i motivi per cui non è stato possibile generare la vista Liquid Mode.

La modalità Liquid Mode è attualmente supportata sui dispositivi mobili, con supporto aggiuntivo in fase di sviluppo.


Attivare/Inviare accordi conformi alla modalità Liquid Mode

  1. Verifica che la modalità Liquid Mode sia abilitata nel menu Amministrazione di Acrobat Sign:

    • Passa a Impostazioni di invio > Liquid Mode.
      • L’impostazione può essere modificata a livello di account o di gruppo.
    Passare ai controlli Liquid Mode

  2. Invia un singolo file HTML utilizzando uno dei seguenti metodi:

    Inviare un documento HTML


Tag HTML supportati

Per poter creare correttamente un accordo con la vista Liquid Mode, il documento HTML NON deve contenere costrutti JavaScript. 

Nel corpo del documento HTML è possibile utilizzare solo i seguenti tag:

Categoria

Tag HTML

Attributi che influiscono sulla vista Liquid Mode

Limitazioni

Intestazioni

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

NESSUNO

 

Divisione contenuti

<div>

align

 

Interruzione

<br>

NESSUNO

 

Linea orizzontale

<hr>

NESSUNO

 

Paragrafo

<p>

align

 

Immagini

<img>

src, alt, height, width

Vedi la sezione “Supporto delle immagini”

Testo in linea

<b>, <i>, <u>, <s>, <strong>, <em>, <span>, <sub>, <sup>

NESSUNO

 

Elenco ordinato

<ol>, <li>

value, type, reversed, start

 

Elenco non ordinato

<ul>, <li>

value, reversed, start

 

Collegamento ipertestuale

<a>

href

Il protocollo URL è limitato a http, https e mailto

Tabella

<table>, <thead>, <tbody>, <tfoot>, <th>, <tr>, <td>, <caption>, <col>, <colgroup>

NESSUNO

1. Le tabelle nidificate NON sono supportate.

2. I campi modulo nelle tabelle NON sono supportati.

Etichetta dei campi modulo

<label>

for

Vedi la sezione “Etichette dei campi modulo”.

Raggruppamento di campi modulo

<fieldset>, <legend>

NESSUNO

Vedi la sezione “Etichettatura dei gruppi di campi”.

Immagini

<img>

src, alt, height, width

La dimensione dell’immagine e l’intero codice HTML devono essere inferiori a 400 KB. Sono supportati i seguenti formati: JPEG, PNG, GIF, BMP e TIFF. L’origine dell’immagine deve essere un URL HTTPS.


Specifica dei campi modulo

I campi modulo devono essere specificati nel documento HTML mediante la notazione dei tag di testo di Adobe Acrobat Sign.

La tabella seguente mostra alcuni campi modulo di esempio con i tag di testo di Acrobat Sign:

Campo

Tag di testo di Sign

Campi firma (firma, iniziali, blocco firma, timbro)

{{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)}}

Campi firmatario

{{Cmpy_es_:signer1:company}}



{{N_es_:signer2:fullname}}



{{Dte_es_:signer1:date}}



{{Em_es_:signer1:email}}

Campi mittente

{{*Ttl_es_:sender:title}}

Timbro di partecipazione e ID transazione

{{userstamp_es_:signer1:stamp:repeat}}

{{transstamp1_es_:transactionid:repeat}}

Campi di sola lettura

{{!price}}

{{price_es_:readonly}}

Input testo

{{address_es_:signer1}}

{{*city_es_:signer1}}

Caselle di controllo

{{CB1_es_:checkbox(checked)}}

Pulsante di scelta

{{(Red)Color_es_:signer1:label(“Red”)}}

{{(Blue)Color_es_:signer1:label(“Blue”)}}

{{(Green)Color_es_:signer1:label(“Green”)}}

Immagine

{{Image1_es_:signer1:inlineimage(4)}}

Menu a discesa

{{Color_es_:signer1:dropdown(options="Red,Green,Blue”, values=”R,G,B”)}}

Collegamento ipertestuale

{{companywebsite_es_:link(http://www.adobe.com):label(Adobe)}}

Allegato

{{*DriversLicense_es_:signer1:attachment}}

Descrizione campo

 {{Car_color_es:signer1:tooltip('Scegli un colore')}}

Firma digitale

{{digsig1_es_:signer1:digitalsignature}}

Convalida dei campi

{{*Mobile_es_:signer1:phone}}

{{d_es_:signer1:num(>0,<60)}}

Regole condizionali

es. {{field_es_:showif(price>60)}}

Campi calcolati

{{TV_es_:calc([SubTotal]+[Tax])}}
Nota:

Sono supportati tutti i costrutti dei campi modulo Acrobat Sign eccetto i seguenti:

Categoria

Costrutti non supportati

Eccezioni

Campo di firma digitale

:digitalsignature non sarà supportato.



Flussi di lavoro di precompilazione

La direttiva :prefill non sarà supportata.



Campo per collegamento ipertestuale

La direttiva :page(N) non sarà supportata.

:link con protocolli diversi da http, https e mailto.

Le direttive :signer1 e :everyone saranno supportate.

Campi modulo senza nome

I campi modulo senza nome non saranno supportati.

Le caselle di controllo senza nome saranno supportate.

Campi modulo rinominati

Più campi modulo con lo stesso nome ma direttive diverse non saranno supportati.




Etichette dei campi modulo

A ogni campo modulo deve essere associata un’etichetta. Sebbene le etichette non siano obbligatorie per ogni campo modulo, è consigliabile utilizzarle.

In particolare, in Liquid Mode:

  • Le etichette vengono utilizzate per migliorare la rappresentazione visiva del campo.
  • Un’etichetta associata a un campo fornisce suggerimenti a scopo di accessibilità. Quando un campo è attivo, un’utilità per la lettura dello schermo utilizza l’etichetta per annunciare il campo all’utente.
  • È possibile fare clic sull’etichetta per attivare un campo oppure, per i pulsanti di scelta e le caselle di controllo, per selezionarne il valore.

I campi modulo possono essere associati alle etichette utilizzando il tag HTML <label> in uno dei modi seguenti:

  1. Campo modulo Acrobat Sign racchiuso in un tag <label>
    • <label>Firma: {{sig_es_:signer1:signature}}</label>
  2. L’attributo “for” del tag <label> può fare riferimento al nome del campo modulo per associarlo a un campo modulo.
    • {{sig_es_:signer1:signature}} … <label for=”sig”>Firma: </label>

Le etichette che non possono essere associate ai campi modulo dalle regole precedenti vengono riprodotte come testo di etichetta non associato.

Inoltre, i tag di testo di Acrobat Sign supportano la direttiva :label per i seguenti tipi di campi modulo:

  • File allegati
  • Collegamenti ipertestuali
  • Caselle di controllo
  • Pulsanti di scelta

La direttiva :label dei tag di testo di Acrobat Sign e il tag <label> possono essere combinati nei modi seguenti:

Tipo di campo modulo

Ruolo della direttiva :label

Ruolo del tag HTML <label>

File allegati

Collegamenti ipertestuali

Specifica l’etichetta visualizzata nella casella del campo modulo.

Il tag <label> specifica l’etichetta o l’intestazione del campo modulo.

Casella di controllo

Opzione pulsante di scelta

Specifica l’etichetta o l’intestazione del campo modulo.

Se la direttiva :label del tag di testo di Acrobat Sign non è presente, verrà sostituita da <label> per il campo modulo.

Se sono presenti sia :label che <label>, la vista Liquid Mode non potrà essere creata.

Esempi:

  • {{CB_es_:checkbox: signer1:label("Accetto.")}}} <label for=” CB”> Sì</label>
  • {{(Red_v)Color_es_:signer1::label(“Colore rosso”)} <label for=”(Red_v)Color”>Rosso</label>
Nota:

È possibile specificare le etichette per le caselle di controllo nei modi seguenti:

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

È possibile specificare le etichette per i pulsanti di scelta nei modi seguenti:

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

Normalmente in HTML l’attributo “for” fa riferimento a un valore field id. Liquid Mode utilizza l’attributo “for” per fare riferimento ai nomi dei campi. Ciò può causare ambiguità per i campi modulo clonati, in cui esistono più istanze di campi modulo con la stessa direttiva per i tag di testo Acrobat Sign. In questo caso, occorre evitare di utilizzare l’attributo “for” e associare le etichette racchiudendo il tag di testo all’interno di un elemento <label>.

Nell’esempio di seguito verranno creati campi modulo clonati con etichette diverse per ciascuna delle due istanze nella vista con ridisposizione del testo per dispositivi mobili:

  • <label> Funzionario {{name_of_official_es_:signer1}} </label>
  • <label> Nome {{name_of_official_es_:signer1}} </label>

Se per un campo modulo clonato l’etichetta è specificata utilizzando un attributo “for”, i riferimenti sono ambigui e non possono essere risolti. In questo caso, la vista Liquid Mode non verrà creata.

Nell’esempio di seguito verrà creata solo una vista PDF:

  • <label for="name_of_official> Funzionario </label> {{name_of_official_es_:signer1}}
  • <label for="name_of_official> Nome</label> {{name_of_official_es_:signer1}}


Etichettatura dei gruppi di campi

Le etichette sono associate a singoli campi modulo. Se si desidera associare un’etichetta o didascalia a un gruppo di campi (in particolare, a un gruppo di pulsanti di scelta), si consiglia vivamente di utilizzare elementi fieldset e legend. L’attributo fieldset viene utilizzato per raggruppare gli elementi, legend viene utilizzato per fornire una didascalia o etichetta per il gruppo. Analogamente all’etichetta, questi elementi offrono i seguenti vantaggi in Liquid Mode:

  • Una migliore rappresentazione visiva della didascalia o intestazione associata al gruppo di campi
  • Una buona esperienza di accessibilità. Le utilità per la lettura dello schermo annunceranno correttamente il gruppo di campi utilizzando il contenuto dell’elemento legend.

Esempio:

<fieldset>

        <legend>Scegli un colore primario</legend>             

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

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

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

</fieldset>

Nota:

Per la maggior parte dei documenti, l’autore non desidera il rendering predefinito di un elemento fieldset. 

Il riquadro di delimitazione può essere rimosso con questo CSS:

    fieldset {

        border: none;

        margin: 0;

        padding: 0;

    }

Supporto delle immagini

Le immagini sono supportate con le seguenti restrizioni:

  • È supportato solo l’elemento <img>.
  • È possibile fornire src di un elemento <img> come dati incorporati (data: schema) o come URL Web (https: solo schema)
  • Sono supportati i seguenti formati: JPEG, PNG, GIF, BMP e TIFF
    • Per le GIF animate, il primo fotogramma verrà utilizzato come immagine statica.
  • Un’immagine recuperata da un URL Web non superare i 5 MB.


Flussi di lavoro Acrobat Sign non supportati

Liquid Mode non supporta i seguenti flussi di lavoro di Acrobat Sign:

  • Accordo creato da più documenti
  • Accordo creato da documenti non HTML
  • Accordi creati da modelli libreria
  • Accordi creati nello stato DRAFT o AUTHORING
  • Flussi di lavoro per firma digitale
  • Flussi di lavoro per firma manuale
  • Flussi di lavoro per la modifica diretta
  • Flussi di lavoro da gruppi con la casella di controllo Anteprima attivata per impostazione predefinita
  • Accordi con la funzione Motivi di firma attivata
  • Accordi configurati per chiedere al firmatario di autenticarsi ogni volta che fa clic su un campo firma

Se si tenta di creare una vista Liquid Mode in questi flussi di lavoro, viene creato un accordo solo con la vista PDF. Nell’e-mail di conferma inviata al mittente vengono elencati i motivi per cui non è stato possibile generare la vista Liquid Mode.


Notifica di errore Liquid Mode

Se il mittente ha tentato di generare un accordo con una vista Liquid Mode ma Acrobat Sign non è in grado di generarlo, il mittente riceve una notifica e-mail di conferma dell’accordo in cui sono elencati i problemi specifici che hanno impedito la creazione della vista Liquid Mode. Il mittente può quindi risolvere i problemi segnalati e tentare di nuovo.

I problemi segnalati possono essere raggruppati nelle seguenti categorie:

  • Costrutti HTML non supportati
  • Tag di testo Acrobat Sign non supportati
  • Flussi di lavoro Acrobat Sign non supportati
  • Errore interno di Liquid Mode

Gli errori interni di Liquid Mode si verificano quando il server riscontra condizioni di errore impreviste durante il tentativo di creare la vista Liquid Mode.

Per informazioni sulle altre categorie di errori, consulta le seguenti sottosezioni:

Se la vista Liquid Mode non può essere generata a causa di costrutti HTML non supportati, l’e-mail di conferma inviata al mittente include una o più delle seguenti stringhe di errore:

Stringhe di errore

Elemento non supportato [+tagName]

Protocollo URL non supportato [+url]

I campi modulo nelle tabelle non sono supportati [+tagName]

Le tabelle nidificate non sono supportate

Elemento etichetta secondario non valido [+tagName]

Per ulteriori informazioni, vedi la sezione Tag HTML supportati.

Se la vista Liquid Mode non può essere generata a causa di costrutti di tag di testo Acrobat Sign non supportati, l’e-mail di conferma inviata al mittente include una o più delle seguenti stringhe di errore:

Stringhe di errore

Impossibile trovare il tag di definizione per riferimento [+shortName]

I campi precompilati non sono supportati [+nome]

I collegamenti ipertestuali interni non sono supportati [+nome]

I campi privi di nome sono supportati solo per le caselle di controllo

I campi con lo stesso nome e direttive diverse non sono supportati [+nome]

Le firme digitali non sono supportate [+nome]

I campi non possono avere sia un elemento etichetta sia una direttiva per etichette [+nome]

Campo modulo Sign mancante per tag di testo [+nome]

Per ulteriori informazioni, vedi la sezione Specifica dei campi modulo.

Se la vista Liquid Mode non può essere generata a causa di flussi di lavoro Acrobat Sign non supportati, l’e-mail di conferma inviata al mittente include una o più delle seguenti stringhe di errore:

Stringhe di errore

L’accordo è un modello libreria

L’accordo richiede la firma manuale

Nell’accordo è attivata l’opzione CFR per i motivi di firma

Nell’accordo è attivata l’opzione CFR per la riautenticazione della firma elettronica

Per ulteriori informazioni, vedi la sezione Specifica dei campi modulo.


Esempio di documento HTML: Richiesta relazione di credito

I moduli che si prestano particolarmente a Liquid Mode presentano le seguenti caratteristiche:

  • Documenti con grandi blocchi di testo che possono richiedere numerose operazioni di zoom
  • Moduli privi di campi sovrapposti per i quali la sequenza dei campi in Liquid Mode è accettabile

Scarica

Ottieni file
Esempio di documento HTML

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <title>Sample Title</title>

    <link rel="stylesheet" href="css/all.css">

    <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>

    <div class="page">

        <div class="header">

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

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

        </div>

        <div class="body">

            <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>

            <ul class="info">

              <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>

        <div class="form">

            <div class="columns-3">

                <div class="item">

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

                    <label for="LastName">LAST NAME </label>

                </div>

                <div class="item">

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

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

                </div>

                <div class="item">

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

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

                </div>

            </div>

            <div class="address">

                <div class="item big">

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

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

                </div>

                <div class="item">

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

                    <label for="Apt">APT.</label>

                </div>

                <div class="item">

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

                    <label for="City">CITY</label>

                </div>

                <div class="item">

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

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

                </div>

                <div class="item">

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

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

                </div>

            </div>

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

            <div class="address">

                <div class="item big">

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

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

                </div>

                <div class="item">

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

                    <label for="AptPr">APT.</label>

                </div>

                <div class="item">

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

                    <label for="CityPr">CITY</label>

                </div>

                <div class="item">

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

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

                </div>

                <div class="item">

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

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

                </div>

            </div>

            <div>

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

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

            </div>

            <div class="columns-2">

                <div class="item">

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

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

                </div>

                <div class="item">

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

                    <label for="SocialSecurityNumber">S.I.N.:</label>

                </div>

            </div>

            <div class="columns-2">

                <div class="item">

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

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

                </div>

                <div class="item">

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

                </div>

            </div>

            <div class="columns-2">

                <div class="item">

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

                </div>

                <div class="item">

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

                </div>

            </div>

            <div class="checkbox">

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

            </div>
            <fieldset>
            <legend> Autorizzo Nome Società ad addebitare il pagamento sulla mia carta di credito:</legend>

              <div class="radio-button">

                <div class="item"><label>{{$V}}Visa</label></div>

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

                <div class="item"><label>{{$A}}AMEX</label></div>

              </div>
            </legend>

            <div class="card-info">

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

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

            </div>

            <div class="card-info">

                <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>

            <div class="note">

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

            </div>

        </div>

        <div class="footer">

            <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>

    </div>

    <!--  PAGE BREAK -->

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

    <!-- SIGN Text Tag Definitions -->

    {{#REMOVE_PAGE_FROM_OUTPUT}}

   

    <!-- check box -->

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

 

    <!-- radio button and conditional rule to enable if Pay is checked -->

    <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>

 

    <!-- drop down -->

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

 

    <!-- calculated field -->

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

     

    <!-- regular expression fromatting validation -->

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

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

 

    <!-- date validations -->

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

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

 

</body>

 

</html>

 

Documento HTML nel browser

Vista PDF classica in Adobe Sign

Vista dell’accordo:

Vista Liquid Mode


Problemi noti e domande frequenti

Durante l’authoring dell’HTML, verifica più volte il codice HTML: controlla che non vi siano errori e che soddisfi i tuoi criteri di flusso generali prima di inviarlo ai destinatari.

Gli elementi HTML usati nel documento HTML devono seguire l’ordine di lettura del documento. 

Le interruzioni di pagina nel documento devono essere specificate esplicitamente utilizzando la proprietà CSS “page-break-after” come illustrato di seguito:

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

Quando si modifica il design un documento, è utile considerare la ridisposizione del contenuto al fine di migliorare l’esperienza complessiva su dispositivi mobili. Se NON intendi modificare il design del documento, puoi rispettare l’aspetto generale del PDF originale, con alcune eccezioni:

  • Liquid Mode non prevede una gestione particolare per gli artefatti a livello di pagina. Se il documento HTML contiene artefatti a livello di pagina (come intestazioni, piè di pagina, filigrane ecc.) questi potrebbero comparire al centro del contenuto ridisposto.

  • Se il modulo include istruzioni per la compilazione dei campi modulo come “STAMPARE” o “FACOLTATIVO” oppure istruzioni di formattazione come “(gg/mm/aaaa)”, non includere il testo nell’HTML: alcune informazioni come le istruzioni di formattazione “(gg/mm/aaaa)” o l’indicazione che un campo del modulo è “FACOLTATIVO” devono essere specificate tramite appositi tag di testo nella specifica del campo del modulo.  

  • Per alcuni testi potrebbe essere necessario raccogliere più set di dati. In questo caso risulterà più semplice dividerli in più campi modulo. Ad esempio, nel documento di esempio precedente, “NAME & LAST 4 DIGITS OF MAJOR CREDIT CARD” è stato suddiviso in “NAME OF MAJOR CREDIT CARD” e “LAST 4 DIGITS OF MAJOR CREDIT CARD”

  • Utilizza solo i tag HTML supportati elencati sopra. Consulta la sezione sui costrutti HTML.

  • Utilizza coordinate e posizionamenti relativi, come {width: 30%}, in modo che il contenuto HTML possa essere ridisposto in base alla larghezza del dispositivo in uso. Il CSS non dovrebbe contenere valori di larghezza assoluta della pagina. 

  • Se un PDF contiene un costrutto di tabella o di elenco, la rappresentazione HTML corrispondente deve essere rispettivamente una tabella o un elenco. L’unica eccezione sono le tabelle contenenti campi modulo.Se una tabella contiene dei campi modulo, è necessario presentare le stesse informazioni senza tabelle.

Per offrire un’esperienza di compilazione online ottimale, si consiglia vivamente di creare i campi modulo utilizzando tutte le convalide, le espressioni di formattazione, le regole condizionali e le formule di calcolo offerte dai tag di testo di Sign.

  • I nomi dei campi modulo devono essere univoci se rappresentano entità diverse.
  • Si consiglia vivamente di assegnare un’etichetta a ciascun campo, racchiudendolo tra gli appositi tag o utilizzando l’attributo “for”.
  • Se un campo modulo è FACOLTATIVO, deve essere specificato come tale nei tag di testo di Sign. Esempio:
    • {{*S.I.N_es_:signer1}} rappresenta un campo modulo obbligatorio.
    • {{S.I.N_es_:signer1}} rappresenta un campo modulo facoltativo.
  • I tag di testo di Sign offrono una serie di convalide per codice postale ZIP, codice di sicurezza sociale SSN, data, e-mail, numeri di valuta, con controlli a livello di intervalli, lunghezze massime e così via. Ti invitiamo a farne uso.
  • I tag di testo di Sign includono anche la formattazione dei campi modulo, come il formato per le date, le valute e così via. Si consiglia vivamente di utilizzarli.
  • A tutte le caselle di controllo devono essere associate delle etichette. Esempio:

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

  • Se nel modulo cartaceo o PDF sono presenti dei campi simili ma che si escludono a vicenda, come risposte Sì/No o Visa/MasterCard/AMEX nel modulo di esempio, combina tutti i campi modulo in un gruppo di campi di tipo pulsante di scelta o menu a discesa, invece di usare singole caselle di controllo, e includi un’etichetta o intestazione     

<fieldset>

<legend>Opzioni di pagamenti:</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>

  • I tag di testo di Sign definiscono anche le dimensioni dei campi modulo nella pagina riprodotta in base alle dimensioni del tag di testo di Sign riprodotto sulla pagina. La specifica dei tag di testo di Sign consente di ridurre le dimensioni dei campi modulo. Cerca “Riduzione dei tag di testo” e ”Tag di testo lungo” in https://helpx.adobe.com/it/sign/using/text-tag.html. Una tecnica comune consiste nel definire una sezione alla fine del documento HTML che contenga i tag di definizione per i tag di testo molto lunghi, e utilizzare dei tag di riferimento nel corpo HTML. Alcuni esempi di tag di definizione:

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

{{#REMOVE_PAGE_FROM_OUTPUT}}

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

{{#VI=*(Visa)CCard_es_:signer1}}

{{#MC=*(MasterCard)CCard_es_:signer1}}

{{#AM=*(AMEX)CCard_es_:signer1}}

{{#DATEOFBIRTH=*Date_es_:signer1:isdate(format(dd/mm/yy)}}

Logo Adobe

Accedi al tuo account

Collegamenti rapidi

Visualizza tutti i tuoi piani Gestione dei piani

Note legali    |    Informativa sulla privacy online