Liquid Mode voor mobiele ondertekeningservaring

Inleiding

De ondertekeningsfunctie Liquid Mode verbetert de weergave van uw documenten op basis van het apparaattype van de ontvanger, zodat u met minder knijp- en inzoombewegingen voortaan nog gemakkelijk kunt focussen op de velden die moeten worden ingevuld.

Overeenkomsten die voldoen aan de Liquid Mode worden op twee manieren weergegeven voor de ontvanger:

  1. De PDF-weergave biedt alle opmaakinformatie die aanwezig is in de geüploade HTML. Dit komt overeen met de ondertekende versie van de overeenkomst die kan worden gedownload, net als de PDF-weergave die Adobe Acrobat Sign voor alle overeenkomsten genereert
  2. De Liquid Mode-weergave waarin het HTML-invoerdocument opnieuw wordt geplaatst en is geoptimaliseerd voor kleine schermformaten. De weergave Liquid Mode is zeer zorgvuldig samengesteld en overschrijft de opmaak van het originele HTML-document

Met deze interface kan uw ontvanger eenvoudig schakelen tussen Liquid Mode en traditionele PDF-weergaven van het document, afhankelijk van hun voorkeur, en legt dezelfde juridisch bindende handtekeningen vast die u verwacht.

 

Overeenkomsten die aan de Liquid Mode voldoen, worden gemaakt met een enkel HTML-bestand als broninhoud.

Er zijn enkele beperkingen voor de HTML- en formulierveldconstructies in het geüploade HTML-document. Specifiek geldt het volgende:

  • De overeenkomst moet tot stand komen met een enkel HTML-document (slechts één bestand)
    • Als er meer dan één document wordt gebruikt om de overeenkomst te maken, wordt alleen een PDF-weergave gegenereerd
  • Het HTML-document mag geen JavaScript bevatten. Gebruik van <script>-labels zoals inline JavaScript, als referentie naar externe JavaScript-bestanden of als kenmerk van HTML-tags is niet toegestaan
    • Als JavaScript in het HTML-document wordt aangetroffen, maakt Acrobat Sign alleen de PDF-weergave
  • Het HTML-document kan alleen de ondersteunde HTML-labels in de <tekst> van het HTML-document gebruiken zoals beschreven in de sectie Ondersteunde HTML-labels
    • Als er niet-ondersteunde HTML-labels staan in de tekst van het HTML-document, maakt Acrobat Sign alleen de PDF-weergave

Aangezien de Liquid Mode een zeer nauwgezette functie is, wordt CSS-code in het HTML-bestand genegeerd (dit geldt ALLEEN voor de weergave Liquid Mode). Dus alleen de kenmerken van ondersteunde HTML-tags zijn van invloed op de weergave Liquid Mode. Deze beperkingen gelden niet voor de PDF-weergave. Voor de PDF-weergave gebruikt Acrobat Sign het volledige scala aan kenmerken dat beschikbaar is voor de ondersteunde labels en voor de CSS die is opgegeven in het HTML-document.

Adobe Acrobat Sign-tekstlabels worden gebruikt om de formuliervelden in het HTML-document te specificeren.

Workflow in Liquid Mode

Opmerking:

Als de functie Liquid Mode is ingeschakeld, maar om welke reden dan ook niet kan worden gegenereerd, dan wordt de overeenkomst alleen met de PDF-weergave gemaakt.

In de bevestigingsmail die naar de afzender is gestuurd, worden de redenen vermeld waarom de Liquid Mode-weergave niet kan worden gegenereerd.

Liquid Mode wordt momenteel ondersteund op mobiele telefoons, met aanvullende ondersteuning in ontwikkeling.


Overeenkomsten die compatibel zijn met Liquid Mode inschakelen/verzenden

  1. Zorg dat de Liquid Mode is ingeschakeld in het beheermenu van Acrobat Sign:

    • Ga naar Verzendinstellingen > Liquid Mode
      • De instelling kan worden gewijzigd op account- en groepsniveau
    Ga naar de bedieningselementen van Liquid Mode

  2. Dien een enkel HTML-bestand in op een van de volgende manieren:

    HTML-document verzenden


Ondersteunde HTML-tags

Voor het maken van een overeenkomst in de Liquid Mode, mogen er GEEN JavaScript-constructs in het HTML-document staan. 

Alleen de volgende tags kunnen worden gebruikt in de <body>-tekst van het HTML-document:

Categorie

HTML-tags

Kenmerken die van invloed zijn op de weergave Liquid Mode

Beperkingen

Kopteksten

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

NONE

 

Indelen van inhoud

<div>

align

 

Eindemarkering

<br>

NONE

 

Horizontale regel

<hr>

NONE

 

Alinea

<p>

align

 

Afbeeldingen

<img>

src, alt, height, width

Zie de sectie "Afbeeldingsondersteuning"

Inline-tekst

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

NONE

 

Geordende lijsten

<ol>, <li>

value, type, reversed, start

 

Ongeordende lijst

<ul>, <li>

value, reversed, start

 

Hyperlink

<a>

href

Het URL-protocol is beperkt tot http, https en mailto

Tabel

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

NONE

1. Geneste tabellen worden NIET ondersteund

2. Formuliervelden in tabellen worden NIET ondersteund

Formulierveldlabel

<label>

for

Zie de sectie "Formulierveldlabels".

Formulierveldgroepering

<fieldset>, <legend>

NONE

Zie de sectie "Groepen velden labelen".

Afbeeldingen

<img>

src, alt, height, width

De grootte van de afbeelding plus de volledige HTML moet minder dan 400 KB zijn. De volgende indelingen worden ondersteund: JPEG, PNG, GIF, BMP en TIFF. De afbeeldingsbron moet een HTTPS-URL zijn.


Formulierveldspecificatie

Formuliervelden moeten in het HTML-document worden opgegeven met de notatie voor Adobe Acrobat Sign-tekstlabels.

De onderstaande tabel toont voorbeeldformuliervelden met Acrobat Sign-tekstlabels:

Veld

Sign-teksttags

Handtekeningvelden (handtekening, initialen, handtekeningblok, stempel)

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

Ondertekenaarsvelden

{{Cmpy_es_:signer1:company}}



{{N_es_:signer2:fullname}}



{{Dte_es_:signer1:date}}



{{Em_es_:signer1:email}}

Afzendervelden

{{*Ttl_es_:sender:title}}

Deelnamestempel en transactie-ID

{{userstamp_es_:signer1:stamp:repeat}}

{{transstamp1_es_:transactionid:repeat}}

Alleen-lezen veld

{{!price}}

{{price_es_:readonly}}

Tekstinvoer

{{address_es_:signer1}}

{{*city_es_:signer1}}

Selectievakjes

{{CB1_es_:checkbox(checked)}}

Keuzerondje

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

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

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

Afbeelding

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

Vervolgkeuzelijst

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


Hyperlink

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


Bestandsbijlage

{{*DriversLicense_es_:signer1:attachment}}

Tooltip

{{Car_color_es:signer1:tooltip('Choose a color')}}

Digitale handtekening

{{digsig1_es_:signer1:digitalsignature}}

Veldvalidatie

{{*Mobile_es_:signer1:phone}}

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

Voorwaardelijke regels

e.g. {{field_es_:showif(price>60)}}

Berekende velden

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

Opmerking:

Alle constructen van Acrobat Sign-formuliervelden worden ondersteund behalve de volgende:

Categorie

Niet-ondersteunde constructs

Uitzonderingen

Formulierveld voor digitale handtekening

:digitalsignature wordt niet ondersteund



Workflows voor vooraf invullen

De instructie :prefill wordt niet ondersteund.



Formuliervelden met hyperlink

De instructie :page(N) wordt niet ondersteund.

:link met andere protocollen dan http, https en mailto.

:signer1 en :everyone worden wel ondersteund.

Formuliervelden zonder naam

Formuliervelden zonder naam worden niet ondersteund.

Selectievakjes zonder naam worden ondersteund

Hernoemde formuliervelden

Meerdere formuliervelden met dezelfde naam maar verschillende richtlijnen worden niet ondersteund




Formulierveldlabels

Elk formulierveld moet een bijbehorend label hebben. Hoewel labels niet verplicht zijn voor elk formulierveld, wordt het sterk aanbevolen dat formuliervelden wel zijn gelabeld.

Specifiek voor Liquid Mode geldt het volgende:

  • Labels worden gebruikt om de visuele weergave van het veld te versterken
  • Een label dat aan een veld is gekoppeld, biedt toegankelijkheidstips. Wanneer een veld focus heeft, zal een schermlezer het label gebruiken om het veld aan de gebruiker aan te kondigen
  • Er kan op een label worden geklikt om de focus op een veld in te stellen. In het geval van een keuzerondje of selectievakje kan de waarde worden gewijzigd door op het label te klikken

Formuliervelden kunnen op de volgende manieren worden gekoppeld aan labels met behulp van de HTML-tag <label>:

  1. Acrobat Sign-formulierveld ingesloten in een <label>-tag
    • <label>Handtekening: {{sig_es_:signer1:signature}}</label>
  2. Het kenmerk “for” van de <label>-tag kan verwijzen naar de naam van het formulierveld om te worden gekoppeld aan een formulierveld.
    • {{sig_es_:signer1:signature}} … <label for=”sig”>Handtekening: </label>

Labels die niet door de bovenstaande regels aan formuliervelden kunnen worden gekoppeld, worden weergegeven als niet-gebonden labeltekst.

Bovendien ondersteunen Acrobat Sign-tekstlabels de instructie :label voor de volgende typen formuliervelden:

  • Bestandsbijlagen
  • Hyperlinks
  • Selectievakjes
  • Keuzerondjes

Het Acrobat Sign-tekstlabel voor de instructie :label en het label <label> kunnen op de volgende manieren worden gecombineerd:

Type formulierveld

Rol van de instructie :label

Rol van de HTML-tag <label>

Bestandsbijlagen,

Hyperlinks

Specificeert het label dat wordt weergegeven in het formulierveldvak.

De <label>-tag specificeert het label of de koptekst voor het formulierveld.

Selectievakje,

Keuzerondje-optie

Specificeert het label of de koptekst voor het formulierveld.

Als de Acrobat Sign-tekstlabel voor de instructie :label afwezig is, wordt deze overgenomen door het label <label> voor het formulierveld.

Als zowel :label en <label> aanwezig zijn, kan de weergave Liquid Mode niet worden gemaakt.

Voorbeelden:

  • {{CB_es_:checkbox: signer1:label("Ik ga akkoord.")}}} <label for=” CB”> Ja</label>
  • {{(Red_v)Color_es_:signer1::label(“Red Color”)} <label for=”(Red_v)Color”>Rood</label>
Opmerking:

U kunt als volgt labels specificeren voor selectievakjes:

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

Labels kunnen als volgt worden gespecificeerd voor opties in keuzerondjes:

  • {{(Red_v)Color_es_:signer1:label(“Rood”)}}
  • <label> {{(Red_v)Color_es_:signer1}} Rood </label>
  • {{(Red_v)Color_es_:signer1}} <label for=”(Red_v)Color”>Rood</label>
Let op:

Normaal gesproken het kenmerk "for" in HTML naar een waarde voor een veld-id.  Liquid Mode gebruikt het kenmerk "for" om te verwijzen naar veldnamen.  Dit kan onduidelijkheid veroorzaken voor gekloonde formuliervelden, namelijk als er meerdere exemplaren zijn van formuliervelden met exact dezelfde Acrobat Sign-tekstlabelinstructie.  In dat geval moeten we het kenmerk "for" vermijden en labels associëren door de teksttag in een <label>-element te plaatsen.

Bij het volgende voorbeeld worden er gekloonde formuliervelden gemaakt met verschillende labels voor elk van de twee instanties in de mobiele 'reflow'-weergave:

  • <label> Officieel {{name_of_official_es_:signer1}} </label>
  • <label> Naam {{name_of_official_es_:signer1}} </label>

Als een gekloond formulierveld een label specificeert met het kenmerk "for", zijn de verwijzingen dubbelzinnig en kunnen ze niet worden opgelost.  in dit geval wordt de Liquid Mode-weergave niet gegenereerd.

 Bij het volgende voorbeeld zal bijvoorbeeld alleen een PDF-weergave worden gemaakt:

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


Groepen velden labelen

Labels zijn gekoppeld aan één formulierveld. Als we een label of bijschrift willen associëren met een groep velden (met name groepen keuzerondjes), raden we het gebruik van de fieldset- en legend-elementen aan.  Met fieldset worden de elementen gegroepeerd, en met legend wordt een bijschrift/label voor de groep verstrekt.  Net als bij label zijn er duidelijke voordelen voor Liquid Mode:

  • Een betere visuele weergave van een bijschrift/koptekst die aan de groep velden is gekoppeld
  • Betere toegankelijkheidsfuncties.  Schermlezers zullen de groep met velden correct aankondigen dankzij de inhoud van het legend-element

Bijvoorbeeld:

<fieldset>

        <legend>Kies uw favoriete primaire kleur</legend>             

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

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

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

</fieldset>

Opmerking:

Bij de meeste documenten wil zal de auteur de standaardweergave van een veldset niet willen toepassen. 

Het kader kan worden verwijderd met deze CSS-code:

    fieldset {

        border: none;

        margin: 0;

        padding: 0;

    }

Afbeeldingsondersteuning

Afbeeldingen worden ondersteund, met de volgende beperkingen:

  • Alleen het element <img> wordt ondersteund
  • De src van een <img> kan als ingesloten gegevens worden verstrekt (data: schema) of als een web-URL (https: alleen schema)
  • De volgende indelingen worden ondersteund: JPEGPNGGIFBMP en TIFF
    • Voor geanimeerde GIF's wordt het eerste frame gebruikt als een statische afbeelding
  • De maximale grootte voor een afbeelding die van een web-URL wordt opgehaald, is 5 MB


Niet-ondersteunde Acrobat Sign-workflows

Liquid Mode biedt geen ondersteuning voor de volgende Acrobat Sign-workflows:

  • Overeenkomsten gemaakt op basis van meerdere documenten
  • Overeenkomst gemaakt op basis van niet-HTML-documenten
  • Overeenkomsten gemaakt op basis van bibliotheeksjablonen
  • Overeenkomsten gemaakt in de staat DRAFT of AUTHORING
  • Workflows voor digitale handtekeningen
  • Workflows met schriftelijke handtekening
  • Workflows onderweg aanpassen
  • Workflows van groepen waarvoor het selectievakje Voorbeeld standaard is ingeschakeld
  • Overeenkomsten met ondertekeningsredenen ingeschakeld
  • Overeenkomsten die zijn geconfigureerd zodat de ondertekenaar zich telkens moet verifiëren wanneer hij of zij op een handtekeningveld klikt

Elke poging om een Liquid Mode-weergave te maken bij de bovenstaande workflows resulteert in het maken van een overeenkomst in alleen de PDF-weergave.  In de bevestigingsmail die naar de afzender wordt gestuurd, staan de redenen waarom Liquid Mode niet kan worden gegenereerd.


Foutmeldingen voor Liquid Mode

Als de afzender tevergeefs probeert een overeenkomst in Liquid Mode te maken en Acrobat Sign deze niet heeft kunnen genereren, wordt de afzender in de bevestigingsmail van de overeenkomst op de hoogte gebracht van de specifieke problemen waardoor de Liquid Mode-weergave niet kan worden gegenereerd. De afzender kan de gemelde problemen oplossen en bij volgende pogingen proberen de overeenkomst in de Liquid Mode-weergave te creëren.

De gemelde problemen kunnen worden gegroepeerd in de volgende categorieën:

  • Niet-ondersteunde HTML-constructen
  • Niet-ondersteunde Acrobat Sign-tekstlabels
  • Niet-ondersteunde Acrobat Sign-workflows
  • Interne fout in Liquid Mode

Interne fouten in Liquid Mode treden op wanneer de server onverwachte foutcondities tegenkomt bij het maken van deze weergave.

Voor wat de andere foutcategorieën betreft, vindt u details van de gemelde problemen in de volgende subsecties:

Als de Liquid Mode-weergave niet kan worden gegenereerd vanwege niet-ondersteunde HTML-constructs, bevat de bevestigingsmail die naar de afzender wordt gestuurd een of meer van de volgende foutberichten:

Foutberichten

Niet-ondersteund element [+tagName]

Niet-ondersteund URL-protocol [+URL]

Formuliervelden in tabellen worden niet ondersteund: [+tagName]

Geneste tabellen worden niet ondersteund

Ongeldig onderliggend label [+tagName]

Zie het gedeelte over Ondersteunde HTML-tags voor meer informatie.

Als de Liquid Mode-weergave niet kan worden gegenereerd vanwege niet-ondersteunde Acrobat Sign-constructen met tekstlabels, bevat de bevestigingsmail die naar de afzender wordt gestuurd, een of meer van de volgende foutberichten:

Foutberichten

Kan de definitietag niet vinden voor verwijzing [+shortName]

Vooraf ingevulde velden worden niet ondersteund [+naam]

Interne hyperlinks worden niet ondersteund [+naam]

Velden zonder naam worden alleen ondersteund als selectievakjes

Velden met dezelfde naam en andere instructies worden niet ondersteund [+naam]

Digitale handtekeningen worden niet ondersteund [+naam]

Velden kunnen niet zowel een label-element als een label-instructie bevatten [+naam]

Ontbrekend Sign-formulierveld voor teksttag [+naam]

Zie het gedeelte over Specificatie van formuliervelden voor meer informatie.

Als de Liquid Mode-weergave niet kan worden gegenereerd vanwege niet-ondersteunde Acrobat Sign-workflows, bevat de bevestigingsmail die naar de afzender wordt gestuurd, een of meer van de volgende foutberichten:

Foutberichten

Overeenkomst is een bibliotheeksjabloon

Overeenkomst vereist een geschreven handtekening

CFR-optie van overeenkomst is ingeschakeld als reden voor ondertekening

CFR-optie van overeenkomst is ingeschakeld voor opnieuw autoriseren van elektronische ondertekening

Zie het gedeelte over Specificatie van formuliervelden voor meer informatie.


HTML-voorbeelddocument: verzoek om kredietrapport

De volgende formulieren zijn, wat zowel vorm als inhoud betreft, het beste geschikt voor weergave in de Liquid Mode:

  • Documenten met grote tekstblokken waarbij de gebruiker veel moet in- en uitzoomen met behulp van knijpbewegingen
  • Formulieren waarin velden elkaar niet overlappen en de stroom van velden in Liquid Mode acceptabel is

Downloaden

<!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> Ik machtig Sample Company om de betaling van mijn creditcard af te schrijven:</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>

 

HTML-document in browser

Klassieke PDF-weergave in Adobe Sign

Overeenkomstweergave:

Liquid Mode-weergave


Bekende problemen en veelgestelde vragen

We raden u aan om uw HTML-code tijdens het schrijven enkele keren te testen en te controleren op fouten. Bekijk ook of het document voldoet aan de algemene stroomcriteria voordat u het naar de beoogde ontvangers verzendt.

De HTML-elementen in het HTML-document moeten de leesvolgorde van het document volgen. 

Pagina-einden in het document moeten expliciet worden gespecificeerd met behulp van de CSS-eigenschap "page-break-after", zoals hieronder weergegeven:

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

Als u een document opnieuw ontwerpt met het oog op 'reflow' kan dat de algehele mobiele ervaring sterk verbeteren. Als u het document NIET opnieuw wilt ontwerpen, dient u vast te houden aan de algehele look en feel van de originele PDF, met een paar uitzonderingen:

  • Er is geen speciale afhandeling van artefacten op paginaniveau in de Liquid Mode. Als artefacten op paginaniveau zoals kopteksten, voetteksten, watermerken, enz. aanwezig zijn in het HTML-document, kunnen ze in de reflow-weergave worden getoond, midden in de inhoud die opnieuw is geplaatst.

  • Als het formulier instructies bevat voor het invullen van de formuliervelden zoals ‘AFDRUKKEN’ of ‘OPTIONEEL’ of opmaakinstructies zoals ‘(dd-mm-jjjj)’, neem deze tekst dan niet op in de HTML. Sommige van deze informatie, zoals de opmaakinstructies ‘(dd-mm-jjjj)’ of informatie dat een formulierveld ‘OPTIONEEL’ is, moet worden gespecificeerd in de formulierveldspecificatie met behulp van teksttags.  

  • Voor sommige tekst kan het nodig zijn om samengestelde sets met informatie te verzamelen. Door deze op te splitsen in meerdere formuliervelden, wordt het gebruikscenario vereenvoudigd. In het bovenstaande voorbeelddocument is 'NAAM EN LAATSTE 4 CIJFERS VAN CREDITCARD' bijvoorbeeld opgesplitst in 'NAAM VAN CREDITCARD' en 'LAATSTE 4 CIJFERS VAN CREDITCARD'

  • Gebruik alleen ondersteunde HTML-tags die hierboven worden vermeld. Zie het gedeelte over HTML-constructs.

  • Gebruik relatieve coördinaten en plaatsingen zoals {width: 30%}, zodat de HTML opnieuw kan worden geplaatst op verschillende apparaatbreedten. De absolute paginabreedte mag niet aanwezig zijn in de CSS. 

  • Als een PDF een tabel- of lijstconstruct bevat, moet de bijbehorende HTML-weergave respectievelijk een tabel of lijst zijn. De enige uitzondering zijn tabellen met formuliervelden. Als een tabel formuliervelden heeft, moet dezelfde informatie zonder tabellen worden gepresenteerd.

Voor een rijkere ervaring bij het online invullen van formulieren, wordt het sterk aanbevolen dat formuliervelden worden geschreven met behulp van alle validaties, opmaakuitdrukkingen en voorwaardelijke regels en berekeningsformules die Sign-teksttags bieden.

  • Namen van formuliervelden moeten uniek zijn als ze verschillende entiteiten vertegenwoordigen
  • Het wordt ten zeerste aanbevolen dat elk formulierveld een label heeft door het formulierveld in te sluiten of door het kenmerk 'for' te gebruiken
  • Als een formulierveld OPTIONEEL is, moet dit worden gespecificeerd in de Sign-teksttags. Bijvoorbeeld:
    • {{*S.I.N_es_:signer1}} (met sterretje) staat voor een verplicht formulierveld
    • {{S.I.N_es_:signer1}} staat voor optioneel formulierveld
  • De teksttags in Sign bieden een verscheidenheid aan validaties voor postcode, bsn-nummer, datum, e-mail, valutagetallen met bereikcontroles, maximale lengte enzovoort. Het gebruik hiervan wordt sterk aangeraden
  • Sign-teksttags bevatten ook opmaak voor formuliervelden, zoals datumnotatie, valutanotatie enzovoort. Ook het gebruik van deze tags wordt sterk aanbevolen
  • Zorg dat er labels zijn gekoppeld aan alle selectievakjes: bijvoorbeeld:

<label> {{[]}} JA, IK WIL OOK GRAAG MIJN CREDITSCORE KOPEN</label>

  • Als er formuliervelden zijn die eruitzien als selectievakjes in het papieren/PDF-formulier, maar met elkaar uitsluitende waarden (zoals Ja/Nee-vragen of de vraag Visa/MasterCard/AMEX in dit formulier), combineer dan alle formuliervelden in een groep en maak er een formulierveld van het type keuzerondje of keuzelijst van, in plaats van individuele selectievakjes. Neem ook een label/koptekst op     

<fieldset>

<legend>Betaalopties:</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>

  • Sign-teksttags definiëren ook de afmetingen van de formuliervelden op de gerenderde pagina. Dit gebeurt op basis van de afmetingen van de gerenderde Sign-teksttag op de pagina. De Sign-teksttagspecificatie biedt manieren om de afmetingen van het formulierveld in te korten. Zoek naar "Teksttags verkorten" en "Lange teksttags" in https://helpx.adobe.com/nl/sign/using/text-tag.html. Een veelgebruikte techniek is om aan het einde van het HTML-document een sectie op te nemen met daarin de definitietags voor de echt lange teksttags en om vervolgens de referentietags in de HTML-bodytekst te gebruiken. Hier zijn enkele voorbeelden van definitietags:

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

Adobe-logo

Aanmelden bij je account