Liquid Mode for nettsignering på mobil

Sist oppdatert 11. jun. 2025

Innledning

Liquid Mode-signering forbedrer visningen av dokumentene basert på mottakerens enhetstype, reduserer behovet for å knipe og zoome og fokuserer enkelt på feltene som må fylles ut.

Avtaler som er kompatible med Liquid Mode, genereres med to visninger for mottakeren:

  1. PDF-visning som er opprettet med all stilinformasjonen som finnes i den opplastede HTML-en. Dette tilsvarer den signerte versjonen av avtalen som er tilgjengelig for nedlastning, akkurat som PDF-visningen Adobe Acrobat Sign genererer for alle avtaler
  2. Liquid Mode-visning som viser HTML-dokumentet og er optimalisert for små skjermstørrelser. Liquid Mode-visningen presenterer en svært kuratert opplevelse som overstyrer stilen som er angitt i det opprinnelige HTML-dokumentet

Grensesnittet lar mottakeren enkelt veksle mellom Liquid Mode og tradisjonelle PDF-visninger av dokumentet, avhengig av deres preferanser, og registrerer de samme juridisk bindende signaturene som du forventer.

 

Liquid Mode-kompatible avtaler opprettes med én HTML-fil som kildeinnhold.

Det er noen få begrensninger for HTML- og skjemafeltkonstruksjonene i det opplastede HTML-dokumentet. Spesielt på følgende:

  • avtalen må opprettes med ett HTML-dokument (bare én fil)
    • Hvis flere enn ett dokument brukes til å opprette avtalen, genereres bare en PDF-visning
  • HTML-dokumentet kan ikke inneholde JavaScript. Bruken av <script>-koder, enten som innebygd JavaScript eller som referanse til eksterne JavaScript-filer eller i attributter for HTML-koder, er ikke tillatt
    • Hvis JavaScript finnes i HTML-dokumentet, oppretter Acrobat Sign bare PDF-visningen
  • HTML-dokumentet kan bare bruke de støttede HTML-kodene i <body> i HTML-dokumentet, som beskrevet i avsnittet Støttede HTML-koder
    • Hvis HTML-koder som ikke støttes, er i body i HTML-dokumentet, oppretter Acrobat Sign bare PDF-visningen

Fordi Liquid Mode-visningen har en veldig kuratert opplevelse, ignoreres CSS angitt i HTML-filen (BARE for Liquid Mode-visningen), og bare attributtene til de støttede HTML-kodene vil påvirke Liquid Mode-visningen. Det er imidlertid ingen slike begrensninger for PDF-visningen. Acrobat Sign bruker hele spekteret av attributter som er tilgjengelige for de støttede kodene, samt CSS-et som er spesifisert i HTML-dokumentet, til å generere PDF-visningen.

Adobe Acrobat Sign-tekstkodenotasjon brukes til å spesifisere skjemafeltene i HTML-dokumentet.

Liquid Mode-arbeidsflyt

Notat

Hvis Liquid Mode-funksjonen er aktivert, men Liquid Mode-visningen av en eller annen grunn ikke kan genereres, opprettes avtalen bare med PDF-visningen.

E-postbekreftelsen som sendes til avsenderen, viser årsakene til at Liquid Mode-visningen ikke kunne genereres.

Liquid Mode støttes for øyeblikket på mobiltelefonenheter, med ytterligere støtte under utvikling.


Aktivere/sende avtaler som er kompatible med Liquid Mode

Påse at Liquid Mode er aktivert i Acrobat Sign-administratormenyen:

  • Gå til Send-innstillinger > Liquid Mode
    • Innstillingen kan endres på konto- eller gruppenivå
Gå til Liquid Mode-kontroller

Sende inn én HTML-fil på en av følgende måter:

Sende HTML-dok


Støttede HTML-koder

For å opprette en avtale med Liquid Mode-visningen kan ikke HTML-dokumentet inneholde JavaScript-konstruksjoner. 

Bare følgende koder kan brukes i teksten i HTML-dokumentet:

Kategori

HTML-koder

Attributter som påvirker Liquid Mode-visningen

Begrensninger

Overskrifter

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

INGEN

 

Innholdsdivisjon

<div>

juster

 

Brudd

<br>

INGEN

 

Vannrett linjal

<hr>

INGEN

 

Avsnitt

<p>

juster

 

Bilder

<img>

src, alt, høyde, bredde

Se avsnittet «Bildestøtte»

Inline-tekst

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

INGEN

 

Sortert liste

<ol>, <li>

verdi, type, omvendt, start

 

Usortert liste

<ul>, <li>

verdi, omvendt, start

 

Hyperkobling

<a>

href

URL-protokollen er begrenset til http, https og mailto

Tabell

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

INGEN

1. Nestede tabeller støttes IKKE

2. Skjemafelt i tabeller støttes IKKE

Skjemafeltetikett

<label>

for

Se avsnittet “Skjemafeltetiketter”.

Skjemafeltgruppering

<fieldset>, <legend>

INGEN

Se avsnittet “Merking av feltgrupper”.

Bilder

<img>

src, alt, høyde, bredde

Størrelsen på bildet pluss hele HTML-koden skal være mindre enn 400 KB. Følgende formater støttes: JPEG, PNG, GIF, BMP og TIFF. Bildekilden må være en HTTP-URL.


Skjemafeltspesifikasjon

Skjemafelt må spesifiseres i HTML-dokumentet ved hjelp av Adobe Acrobat Sign-tekstkode notasjon.

Tabellen nedenfor viser eksempler på skjemafelt med Acrobat Sign-tekstkoder:

Felt

Sign-tekstkoder

Signaturfelt (Signatur, initialer, signaturblokk, 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)}}

Underskriverfelt

{{Cmpy_es_:signer1:company}}



{{N_es_:signer2:fullname}}



{{Dte_es_:signer1:date}}



{{Em_es_:signer1:email}}

Avsenderfelt

{{*Ttl_es_:sender:title}}

Deltakelsesstempel og transaksjons-ID

{{userstamp_es_:signer1:stamp:repeat}}

{{transstamp1_es_:transactionid:repeat}}

Skrivebeskyttet felt

{{!price}}

{{price_es_:readonly}}

Tekstfelt

{{address_es_:signer1}}

{{*city_es_:signer1}}

Avmerkingsbokser

{{CB1_es_:checkbox(checked)}}

Valgknapp

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

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

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

Bilde

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

Rullegardinliste

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


Hyperkobling

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


Filvedlegg

{{*DriversLicense_es_:signer1:attachment}}

Verktøytips

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

Digital signatur

{{digsig1_es_:signer1:digitalsignature}}

Feltvalidering

{{*Mobile_es_:signer1:phone}}

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

Betingelsesregler

f.eks. {{field_es_:showif(price>60)}}

Beregnede felt

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

Notat

Alle Acrobat Sign-skjemafeltkonstruksjoner støttes, unntatt følgende:

Kategori

Ikke-støttede konstruksjoner

Unntak

Skjemafelt for digital signatur

:digitalsignature støttes ikke



Arbeidsflyter for forhåndsutfylling

:prefill-direktivet støttes ikke.



Skjemafelt for hyperkobling

:page(N)-direktivet støttes ikke.

:link med andre protokoller enn http, https og mailto.

:signer1- og :everyone-direktivene støttes.

Skjemafelt uten navn

Skjemafelt uten navn støttes ikke.

Avmerkingsbokser uten navn støttes

Skjemafelt med endrede navn

Flere skjemafelt med samme navn, men forskjellige direktiver, støttes ikke




Skjemafeltetiketter

Hvert skjemafelt skal ha en tilknyttet etikett. Selv om etiketter ikke er obligatorisk for alle skjemafelt, anbefales det at skjemafelt har etiketter.

Spesielt i Liquid Mode:

  • Etiketter brukes til å forbedre den visuelle representasjonen av feltet
  • En etikett tilknyttet et felt, gir tips om tilgjengelighet. Når et felt har fokus, vil en skjermleser bruke etiketten til å kunngjøre feltet til brukeren
  • Du kan klikke på en etikett for å sette fokus på et felt, eller for å skifte verdi når det gjelder valgknapper eller avmerkingsbokser

Skjemafelt kan bindes til etiketter ved hjelp av HTML-koden <label> på en av følgende måter:

  1. Acrobat Sign-skjemafelt innelukket i en <label>-kode
    • <label>Signatur: {{sig_es_:signer1:signature}}</label>
  2. Attributtet “for” til <label>-koden kan referere til navnet på skjemafeltet for å binde det til et skjemafelt.
    • {{sig_es_:signer1:signature}} … <label for=”sig”>Signatur: </label>

Etiketter som ikke kan bindes til skjemafelt av reglene ovenfor, blir gjengitt som en ubundet etikettekst.

Acrobat Sign-tekstkoder støtter dessuten direktivet :label for skjemafelttypene:

  • Filvedlegg
  • Hyperkoblinger
  • Avmerkingsbokser
  • Valgknapp

Acrobat Sign-tekskodedirektivet :label og koden <label> kan kombineres på følgende måter:

Skjemafelttype

Rollen til direktivet :label

Rollen til HTML-koden <label>

Filvedlegg,

Hyperkoblinger

Angir etiketten som vises i skjemafeltboksen.

Koden <label> angir etiketten eller overskriften for skjemafeltet.

Avmerkingsboks,

Alternativ for valgknapp

Angir etiketten eller overskriften for skjemafeltet.

Hvis Acrobat Sign-tekstkodedirektivet :label mangler, overtar <label> plassen for skjemafeltet.

Hvis både :label og <label> finnes, kan ikke Liquid Mode-visningen opprettes.

Eksempler:

  • {{CB_es_:checkbox: signer1:label("Jeg godtar.")}} <label for=” CB”> Ja</label>
  • {{(Red_v)Color_es_:signer1::label(“Red Color”)} <label for=”(Red_v)Color”>Rød</label>
Notat

Etiketter kan angis for avmerkingsbokser på følgende måter:

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

Etiketter kan angis for valgknapp alternativene på følgende måter:

  • {{(Red_v)Color_es_:signer1:label("Rød")}}
  • <label> {{(Red_v)Color_es_:signer1}} Rød </label>
  • {{(Red_v)Color_es_:signer1}} <label for=”(Red_v)Color”>Rød</label>
Advarsel

I HTML refererer vanligvis attributtet “for” til en felt-id-verdi.  Liquid Mode bruker attributtet “for” til å referere til feltnavn.  Dette kan føre til tvetydighet for klonede skjemafelt, der det er flere forekomster av skjemafelt med nøyaktig samme Acrobat Sign-tekstkodedirektiv.  I dette tilfellet må vi unngå å bruke attributtet“for”, og vi må tilknytte etiketter ved å sette tekstkoden inni et <label>-element.

For eksempel vil følgende bruk opprette klonede skjemafelt med forskjellige etiketter for hver av de to forekomstene i mobilflytvisning:

  • <label> Offisielt {{name_of_official_es_:signer1}} </label>
  • <label> Navn {{name_of_official_es_:signer1}} </label>

Hvis et klonet skjemafelt angir en etikett med attributtet "for", er referansene tvetydige og kan ikke løses.  i dette tilfellet opprettes ikke en Liquid Mode-visning.

 For eksempel vil følgende bruk bare opprette en PDF-visning:

  • <label for="name_of_official> Offisielt </label> {{name_of_official_es_:signer1}}
  • <label for="name_of_official> Navn</label> {{name_of_official_es_:signer1}}


Merking av feltgrupper

Etiketter er knyttet til ett skjemafelt. Når vi ønsker å knytte en etikett / en bildetekst til en feltgruppe (spesielt grupper med valgknapper), oppfordrer vi til bruk av feltsett- og forklaringselementer.  Feltsettet brukes til å gruppere elementene, og forklaringen brukes til å gi en bildetekst / etikett for gruppen.  På samme måte som med etiketter, er fordelene med Liquid Mode som følger:

  • En bedre visuell fremstilling av en bildetekst / overskrift knyttet til feltgruppen
  • En god tilgjengelighetsopplevelse.  Skjermlesere vil kunngjøre feltgruppen riktig ved hjelp av forklaringsinnholdet

Eksempel:

<fieldset>

        <legend>Velg din primærfarge</legend>             

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

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

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

</fieldset>

Notat

For de fleste dokumenter ønsker ikke forfatteren standardgjengivelsen av et feltsett. 

Markeringsrammen kan fjernes med dette CSS-et:

    fieldset {

        border: none;

        margin: 0;

        padding: 0;

    }

Bildestøtte

Bilder støttes med følgende begrensninger:

  • Bare elementet <img> støttes
  • Src for <img> kan oppgis som innebygde data (data: skjema) eller som web-URL (https: bare skjema)
  • Følgende formater støttes: JPEGPNGGIFBMP og TIFF
    • For animerte GIF-filer brukes det første bildet som et statisk bilde
  • Størrelsen på et bilde hentet fra en web-URL, er begrenset til 5 MB


Acrobat Sign-arbeidsflyter som ikke støttes

Liquid Mode støtter ikke følgende Acrobat Sign-arbeidsflyter:

  • Avtaler opprettet fra flere dokumenter
  • Avtaler opprettet fra dokumenter som ikke er HTML
  • Avtaler opprettet fra bibliotekmaler
  • Avtaler opprettet i UTKAST- eller REDIGERING-tilstand
  • Arbeidsflyter for digitale signaturer
  • Arbeidsflyter for håndskrevet signatur
  • Endre arbeidsflyter underveis
  • Arbeidsflyter fra grupper der avmerkingsboksen for forhåndsvisning er aktivert som standard
  • Avtaler med signeringsårsaker aktivert
  • Avtaler konfigurert for å be underskriveren om å logge på hver gang undertegneren klikker på et signaturfelt

Et forsøk på å opprette en Liquid Mode-visning i arbeidsflytene ovenfor, resulterer i at det kun opprettes en avtale med PDF-visningen.  E-postbekreftelsen som sendes til avsenderen, viser årsakene til at Liquid Mode-visningen ikke kunne genereres.


Varsel om Liquid Mode-feil

Hvis avsenderen prøvde å generere en avtale med en Liquid Mode-visning, men Acrobat Sign kunne ikke generere den, blir avsenderen varslet i e-postbekreftelsen for avtalen om de spesifikke problemene som forhindret opprettelsen av Liquid Mode-visningen. Avsenderen kan adressere de rapporterte problemene og forsøke å opprette avtalen med en Liquid Mode-visning i påfølgende forsøk.

De rapporterte problemene kan grupperes i følgende kategorier:

  • HTML-konstruksjoner som ikke støttes
  • Acrobat Sign-tekstkoder som ikke støttes
  • Acrobat Sign-arbeidsflyter som ikke støttes
  • Liquid Mode-intern feil

Interne Liquid Mode-feil oppstår når serveren støter på uventede feilforhold under forsøk på å opprette Liquid Mode-visningen.

For de andre feilkategoriene kan du finne detaljer om de rapporterte problemene i følgende underavsnitt:

Hvis Liquid Mode-visningen ikke kan genereres på grunn av HTML-konstruksjoner som ikke støttes, vil e-postbekreftelsen som sendes til avsenderen, inneholde en eller flere av følgende feilstrenger:

Feilstrenger

Ikke-støttet element [+tagName]

Ikke-støttet URL-protokoll [+url]

Skjemafelt i tabeller støttes ikke [+tagName]

Nestede tabeller støttes ikke

Ugyldig underordnet etikett [+tagName]

Se avsnittet om Støttede HTML-koder for å få mer informasjon.

Hvis Liquid Mode-visningen ikke kan genereres på grunn av Acrobat Sign-tekstkodekonstruksjoner som ikke støttes, vil e-postbekreftelsen som sendes til avsenderen, inneholde en eller flere av følgende feilstrenger:

Feilstrenger

Fant ikke definisjonskode for referanse [+shortName]

Felt for forhåndsutfylling støttes ikke [+name]

Interne hyperkoblinger støttes ikke [+name]

Felt uten navn støttes bare for avmerkingsbokser

Felt med samme navn og forskjellige direktiver støttes ikke [+name]

Digitale signaturer støttes ikke [+name]

Felt kan ikke ha både et etikettelement og et etikettdirektiv [+name]

Manglende signeringsskjemafelt for tekstkode: [+name]

Se avsnittet Skjemafeltspesifikasjon for å få mer informasjon.

Hvis Liquid Mode-visningen ikke kunne genereres på grunn av Acrobat Sign-arbeidsflyter som ikke støttes, vil e-postbekreftelsen som sendes til avsenderen, inneholde en eller flere av følgende feilstrenger:

Feilstrenger

Avtale er en bibliotekmal

Avtale krever skriftlig signatur

Avtale har CFR-alternativ for signeringsårsak aktivert

Avtale har CFR-alternativ for regodkjenning av e-signatur aktivert

Se avsnittet Skjemafeltspesifikasjon for å få mer informasjon.


Eksempel på HTML-dokument: Kredittrapportforespørsel

Skjemakvaliteter som er hovedmål for oppretting av Liquid Mode er:

  • dokumenter som har store tekstblokker som kan kreve mye kniping og zooming
  • skjemaer der det ikke er noen overlappende felt, og Liquid Mode-flyt for felt er akseptabelt

<!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">Hvis adressen din ikke er oppdatert på noen av identifikasjonene, <u>må</u> du også legge ved et tilleggsdokument som viser din <u>nåværende hjemmeadresse</u> (f.eks. en strømregning).</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. Å vite dette hjelper oss med å unngå forsinkelser og forvirring i tilfelle en annen persons identifiserende informasjon (som navn og adresse) ligner på den du oppga.</li>

              <li class="info__item">Hvis du fremlegger en <b>kredittkortutskrift</b> eller en kopi av <b>kredittkortet</b> ditt som bevis, må du sørge for å <b>skjule</b> din private informasjon.</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>Send det utfylte skjemaet med bevis på identitet til: <b>Lorem inseam dolor sit amen, consenttetur</b>eller via faks til: <b>XXX-XX-XXXX.</b>Leveringen kan ta X–Y dager. 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">SUFFIKS (sr., jr., osv.)</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> Jeg godkjenner at Sample Company belaster kortet mitt med betalingen:</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. Kortinnehaverens navn må være det samme som forespørerens navn.</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>

    <!--  LINJESKIFT -->

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

    <!-- Definisjoner av UNDERSKRIV-teksttagger -->

    {{#REMOVE_PAGE_FROM_OUTPUT}}

   

    <!-- Avmerkingsboks -->

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

 

    <!-- alternativknapp og betinget regel som skal aktiveres hvis betal er avmerket -->

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

 

    <!-- nedtrekk -->

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

 

    <!-- beregnet felt -->

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

     

    <!-- regulært uttrykk fra validering -->

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

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

 

    <!-- datovalideringer -->

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

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

 

</body>

 

</html>

 

HTML-dokument i nettleser

Klassisk PDF-visning i Acrobat Sign

Avtalevisning:

Liquid Mode-visning


Kjente problemer og vanlige spørsmål

Vi anbefaler at når du forfatter HTML-en, tester du den noen ganger og kontrollerer at det ikke er noen feil, og at den oppfyller de generelle flytkriteriene for deg før du sender den til de tiltenkte mottakerne.

HTML-elementene i HTML-dokumentet må følge leserekkefølgen i dokumentet. 

Sideskift i dokumentet bør spesifiseres eksplisitt ved hjelp av CSS-egenskapen “page-break-after” som vist nedenfor:

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

Å redesigne dokumentet med tanke på ny gjengivelse kan forbedre den generelle mobilopplevelsen. Hvis du IKKE vurderer å redesigne dokumentet, kan det være lurt å følge det generelle utseendet til den originale PDF-filen med noen få unntak:

  • Det blir ingen spesiell håndtering av artefakter på sidenivå i Liquid Mode. Hvis artefakter på sidenivå som topptekster, bunntekster, vannmerker osv. finnes i HTML-dokumentet, kan de vises i den nye visningen midt i innholdet.

  • Hvis skjemaet inneholder instruksjoner for å fylle ut skjemafeltene, som “BRUK TRYKKBOKSTAVER” eller “VALGFRITT” eller formateringsinstruksjoner som “(mm/dd/åååå)”, må du ikke ta med teksten i HTML. noe av informasjonen, som formateringsinstruksjoner “(mm/dd/åååå)” eller hvis et skjemafelt er “VALGFRITT” bør angis i skjemafeltspesifikasjonen med tekstkoder.  

  • Noe av teksten kan kreve innsamling av sammensatte informasjonssett. Å dele dem i flere skjemafelt vil forenkle bruken. Eksempel: I eksempeldokumentet ovenfor er “NAVN OG FIRE SISTE SIFRE PÅ HOVEDKREDITTKORT” delt inn i “NAVN PÅ HOVEDKREDITTKORT” og “FIRE SISTE SIFRE PÅ HOVEDKREDITTKORT”

  • Bruk bare støttede HTML-koder som er oppført ovenfor. Se delen om HTML-konstruksjoner.

  • Bruk relative koordinater og plasseringer som {width: 30%}, slik at HTML-en kan flyte til forskjellige enhetsbredder. Absolutt sidebredde skal ikke brukes i CSS. 

  • Hvis en PDF inneholder en tabell- eller listekonstruksjon, bør den tilsvarende HTML-representasjonen være henholdsvis en tabell eller liste. Det eneste unntaket er tabeller med skjemafelt. Hvis en tabell har skjemafelt, må den samme informasjonen presenteres uten tabeller.

For å skape en bedre utfyllingsopplevelse på nettet, anbefales det at skjemafelt opprettes med alle valideringene, formateringsuttrykkene og betingelsesreglene og beregningsformelen som Sign-tekstkoder tilbyr.

  • Navn på skjemafelt må være unike hvis de representerer forskjellige enheter
  • Det anbefales at hvert skjemafelt har en etikett, ved å enten lukke inn skjemafeltet eller bruke attributtet “for”
  • Hvis et skjemafelt er VALGFRITT, bør det angis i Sign-tekstkodene. Eksempel:
    • {{*S.I.N_es_:signer1}} representerer et obligatorisk skjemafelt
    • {{S.I.N_es_:signer1}} representerer et valgfritt skjemafelt
  • Sign-tekstkoder gir en rekke valideringer for zip, ssn, dato, e-post, valutatall med områdekontroller og makslengder og så videre. Bruk dem
  • Sign-tekstkoder inkluderer også formatering for skjemafelt som datoformat, valutaformat og så videre. Det anbefales at du bruker dem
  • Alle avmerkingsboksene skal ha tilknyttede etiketter: For eksempel:

<label> {{[]}} JA, JEG ØNSKER OGSÅ Å KJØPE MIN KREDITTVURDERING</label>

  • Hvis det er skjemafelt som ser ut som avmerkingsboksene i papir-/PDF-skjemaet, men som har gjensidig utelukkende verdier som Ja/Nei-spørsmål eller Visa/MasterCard/AMEX-spørsmål i dette skjemaet, kombinerer du alle skjemafeltene i en gruppe, gjør den til et skjemafelt av typen valgknapp eller rullegardinmeny i stedet for individuelle avmerkingsbokser og inkluderer en etikett/overskrift     

<fieldset>

<legend>Betalingsalternativer:</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-tekstkoder definerer også dimensjonene til skjemafeltene på den gjengitte siden basert på dimensjonene til den gjengitte Sign-tekstkoden på siden. Spesifikasjon av Sign-tekstkoder gir måter å forkorte skjemafeltdimensjonene på. Søk etter “Forkorte tekstkoder” og “Lange tekstkoder” i https://helpx.adobe.com/no/sign/using/text-tag.html. En vanlig teknikk er å definere en seksjon på slutten av HTML-dokumentet som inneholder definisjonskoder for de veldig lange tekstkodene, og bruke referansekodene i HTML-teksten. Her er noen eksempler på definisjonskoder:

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