Liquid Mode für mobiles Websigniererlebnis

Einführung

Das Liquid Mode-Signiererlebnis verbessert die Anzeige Ihrer Dokumente je nach Gerätetyp des Empfängers. Verkleinern und Vergrößern ist nicht mehr erforderlich und Sie können sich voll und ganz auf die Felder konzentrieren, die ausgefüllt werden müssen.

Liquid Mode-konforme Vereinbarungen werden mit zwei Ansichten für den Empfänger generiert:

  1. PDF-Ansicht: Diese enthält alle Formatinformationen, die im hochgeladenen HTML-Dokument vorhanden sind. Die Ansicht entspricht der unterzeichneten Fassung der Vereinbarung, die zum Download zur Verfügung steht – genau wie die PDF-Ansicht, die Adobe Acrobat Sign für alle Vereinbarungen generiert.
  2. Liquid Mode-Ansicht : Diese fließfähige Ansicht formatiert das eingegebene HTML-Dokument um und ist damit optimal für kleine Bildschirmgrößen geeignet. Die Liquid Mode-Ansicht bietet ein stark kuratiertes Erlebnis, das das im ursprünglichen HTML-Dokument angegebene Format außer Kraft setzt.

Über die Benutzeroberfläche kann der Empfänger je nach Präferenz einfach zwischen der Liquid Mode- und der herkömmlichen PDF-Ansicht des Dokuments wechseln und jeweils dieselben rechtsverbindlichen Signaturen erfassen, die Sie erwarten.

 

Liquid Mode-konforme Vereinbarungen werden mit einer einzigen HTML-Datei als Quellinhalt erstellt.

Es gibt einige Einschränkungen für die HTML- und Formularfeldkonstrukte im hochgeladenen HTML-Dokument. Das heißt:

  • Die Vereinbarung muss mit einem einzigen HTML-Dokument (nur einer Datei) erstellt werden.
    • Wenn zum Erstellen der Vereinbarung mehrere Dokumente verwendet werden, wird nur eine PDF-Ansicht generiert.
  • Das HTML-Dokument darf kein JavaScript enthalten. Die Verwendung von <script>-Tags, entweder als Inline-JavaScript oder als Referenz auf externe JavaScript-Dateien oder in Attributen von HTML-Tags, ist nicht zulässig.
    • Wenn JavaScript im HTML-Dokument erkannt wird, erstellt Acrobat Sign nur die PDF-Ansicht.
  • Das HTML-Dokument darf nur unterstützte HTML-Tags im <body> des HTML-Dokuments verwenden, die im Abschnitt Unterstützte HTML-Tags beschrieben sind.
    • Wenn nicht unterstützte HTML-Tags im Textkörper des HTML-Dokuments vorhanden sind, erstellt Acrobat Sign nur die PDF-Ansicht.

Da die Liquid Mode-Ansicht ein sehr kuratiertes Erlebnis bietet, werden CSS-Anweisungen in der HTML-Datei ignoriert (NUR in der Liquid Mode-Ansicht); die Liquid Mode-Ansicht wird nur von den Attributen der unterstützten HTML-Tags beeinflusst. Für die PDF-Ansicht gelten diese Einschränkungen nicht. Um die PDF-Ansicht zu generieren, verwendet Acrobat Sign die gesamte Palette an Attributen, die für die unterstützten Tags verfügbar sind, sowie die im HTML-Dokument angegebenen CSS-Anweisungen.

Um die Formularfelder im HTML-Dokument anzugeben, wird die Schreibweise für Adobe Acrobat Sign-Text-Tags verwendet.

Liquid Mode-Workflow

Hinweis:

Wenn die Liquid Mode-Funktion aktiviert ist, aber die Liquid Mode-Ansicht aus einem beliebigen Grund nicht generiert werden kann, wird die Vereinbarung nur mit der PDF-Ansicht erstellt.

In der Bestätigungs-E-Mail an den Absender werden die Gründe aufgeführt, aus denen die Liquid Mode-Ansicht nicht generiert werden konnte.

Der Liquid Mode wird derzeit auf Mobiltelefonen unterstützt, wobei die Unterstützung zusätzlicher Geräte in Entwicklung ist.


Aktivieren/Senden von Liquid Mode-konformen Vereinbarungen

  1. Stellen Sie sicher, dass der Liquid Mode im Menü „Acrobat Sign-Admin“ aktiviert ist:

    • Navigieren Sie zu  Sendeeinstellungen > Liquid Mode.
      • Die Einstellung kann auf Konto- oder Gruppenebene geändert werden.
    Navigieren Sie zu den Liquid Mode-Optionen.

  2. Senden einer einzelnen HTML-Datei mit einer der folgenden Methoden:

    HTML-Dokument senden


Unterstützte HTML-Tags

Um eine Vereinbarung mit der Liquid Mode-Ansicht erfolgreich zu erstellen, darf das HTML-Dokument keine JavaScript-Konstrukte enthalten.

Nur die folgenden Tags dürfen im Textkörper des HTML-Dokuments verwendet werden:

Kategorie

HTML-Tags

Attribute, die sich auf die Liquid Mode-Ansicht auswirken

Einschränkungen

Überschriften

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

KEINE

 

Inhalt

<div>

align

 

Zeilenumbruch

<br>

KEINE

 

Horizontale Linie

<hr>

KEINE

 

Absatz

<p>

align

 

Bilder

<img>

src, alt, Höhe, Breite

Siehe Abschnitt „Bildunterstützung

Inline-Text

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

KEINE

 

Geordnete Liste

<ol>, <li>

value, type, reversed, start

 

Ungeordnete Liste

<ul>, <li>

value, reversed, start

 

Hyperlink

<a>

href

Das URL-Protokoll ist auf http, https und mailto beschränkt

Tabelle

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

KEINE

1. Verschachtelte Tabellen werden NICHT unterstützt.

2. Formularfelder innerhalb von Tabellen werden NICHT unterstützt.

Formularfeldbeschriftung

<label>

nach

Siehe Abschnitt Formularfeldbeschriftungen.

Formularfeldgruppierung

<fieldset>, <legend>

KEINE

Siehe Abschnitt Beschriftung von Feldgruppen.

Bilder

<img>

src, alt, Höhe, Breite

Die Größe des Bildes und der gesamten HTML-Datei sollte weniger als 400 KB betragen. Die folgenden Formate werden unterstützt JPEG, PNG, GIF, BMP und TIFF. Die Bildquelle muss eine HTTPs-URL sein.


Formularfeldspezifikation

Formularfelder müssen im HTML-Dokument mit der Schreibweise für Adobe Acrobat Sign-Text-Tags angegeben werden.

In der folgenden Tabelle sind Beispiele für Formularfelder mit Acrobat Sign-Text-Tags aufgeführt:

Feld

Sign-Text-Tags

Signaturfelder (Signatur, Initialen, Signaturblock, 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)}}

Unterzeichnerfelder

{{Cmpy_es_:signer1:company}}



{{N_es_:signer2:fullname}}



{{Dte_es_:signer1:date}}



{{Em_es_:signer1:email}}

Absenderfelder

{{*Ttl_es_:sender:title}}

Teilnahmestempel und Transaktions-ID

{{userstamp_es_:signer1:stamp:repeat}}

{{transstamp1_es_:transactionid:repeat}}

Schreibgeschütztes Feld

{{!price}}

{{price_es_:readonly}}

Texteingabe

{{address_es_:signer1}}

{{*city_es_:signer1}}

Kontrollkästchen

{{CB1_es_:checkbox(checked)}}

Optionsschalter

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

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

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

Bild

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

Dropdown

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


Hyperlink

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


Dateianhang

{{*DriversLicense_es_:signer1:attachment}}

QuickInfo

{{Car_color_es:signer1:tooltip('Farbe auswählen')}}

Digitale Signatur

{{digsig1_es_:signer1:digitalsignature}}

Feldbestätigung

{{*Mobile_es_:signer1:phone}}

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

Bedingungsregeln

z. B. {{field_es_:showif(price>60)}}

Berechnete Felder

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

Hinweis:

Alle Acrobat Sign-Formularfeldkonstrukte werden unterstützt, mit Ausnahme der folgenden:

Kategorie

Nicht unterstützte Konstrukte

Ausnahmen

Formularfeld für digitale Signatur

:digitalsignature wird nicht unterstützt



Workflows für die Vorausfüllung

Die Direktive :prefill wird nicht unterstützt.



Hyperlink-Formularfeld

Die Direktive :page(N) wird nicht unterstützt.

:link mit anderen Protokollen als http, https and mailto.

Die Direktiven :signer1 und :everyone werden unterstützt.

Unbenannte Formularfelder

Unbenannte Formularfelder werden nicht unterstützt.

Unbenannte Kontrollkästchen werden unterstützt.

Umbenannte Formularfelder

Mehrere Formularfelder mit demselben Namen, aber unterschiedlichen Direktiven werden nicht unterstützt.




Formularfeldbeschriftungen

Jedem Formularfeld sollte eine Beschriftung zugeordnet sein. Obwohl die Beschriftungen nicht für jedes Formularfeld vorgeschrieben sind, wird dringend empfohlen, Formularfelder mit Beschriftungen zu versehen.

Insbesondere im Liquid Mode gilt:

  • Eine Beschriftung dient zur Verbesserung der visuellen Darstellung des Felds.
  • Eine Beschriftung, die einem Feld zugeordnet ist, unterstützt die Barrierefreiheitsfunktion. Wenn der Fokus auf ein Feld gesetzt wird, kann ein Bildschirmleser dem Benutzer anhand der Beschriftung mitteilen, um welches Feld es sich handelt.
  • Sie können auf eine Beschriftung klicken, um den Fokus auf ein Feld zu setzen. Wenn Sie bei einem Optionsfeld oder einem Kontrollkästchen auf die Beschriftung klicken, wird der Wert umgeschaltet.

Formularfelder können mit dem HTML-Tag <label> auf eine der folgenden Weisen an Beschriftungen gebunden werden:

  1. Acrobat Sign-Formularfeld in einem <label>-Tag
    • <label>-Signatur: {{sig_es_:signer1:signature}}</label>
  2. Das Attribut „for“ des <label>-Tags kann sich auf den Namen des Formularfelds beziehen, um ihn an ein Formularfeld zu binden.
    • {{sig_es_:signer1:signature}} … <label for=”sig”>Signatur: </label>

Beschriftungen, die nicht mithilfe der oben genannten Regeln an Formularfelder gebunden werden können, werden als ungebundener Beschriftungstext wiedergegeben.

Darüber hinaus unterstützen Acrobat Sign-Text-Tags die Direktive :label für die folgenden Formularfeldtypen:

  • Dateianlagen
  • Hyperlinks
  • Kontrollkästchen
  • Optionsfelder

Die Acrobat Sign Text-Tag-Direktive :label und <label> können auf folgende Weise kombiniert werden:

Formularfeldtyp

Rolle der :label-Direktive

Rolle des HTML-Tags <label>

Dateianlagen,

Hyperlinks

Gibt die Beschriftung an, die im Feld „Formularfeld“ angezeigt wird.

Das <label>-Tag gibt die Beschriftung oder Überschrift des Formularfelds an.

Kontrollkästchen,

Optionsfeld

Gibt die Beschriftung oder Überschrift des Formularfelds an.

Wenn die Acrobat Sign-Text-Tag-Direktive :label fehlt, tritt <label> für das Formularfeld an ihre Stelle.

Wenn sowohl :label als auch <label> vorhanden sind, kann die Liquid Mode-Ansicht nicht erstellt werden.

Beispiele:

  • {{CB_es_:checkbox: signer1:label("I agree.")}}} <label for=” CB”> Yes</label>
  • {{(Red_v)Color_es_:signer1::label(“Red Color”)} <label for=”(Red_v)Color”>Red</label>
Hinweis:

Beschriftungen für Kontrollkästchen können auf folgende Weise angegeben werden:

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

Beschriftungen für Optionsfelder können auf folgende Weise angegeben werden:

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

In der Regel bezieht sich in HTML das Attribut „for“ auf einen Feld-ID-Wert.  Der Liquid Mode verwendet das Attribut „for“, um auf Feldnamen zu verweisen.  Dies kann zu Mehrdeutigkeiten bei geklonten Formularfeldern führen, wenn mehrere Instanzen von Formularfeldern mit genau derselben Acrobat Sign-Text-Tag-Direktive vorhanden sind.  In diesem Fall ist die Verwendung des Attributs „for“ zu vermeiden. Die Zuordnung von Beschriftungen erfolgt, indem das Text-Tag in ein <label>-Element eingeschlossen wird.

Die folgende Verwendung erstellt beispielsweise geklonte Formularfelder mit unterschiedlichen Beschriftungen für jede der beiden Instanzen in der mobilen Ansicht „Umfließen“:

  • <label> Offizielle Person {{name_of_official_es_:signer1}} </label>
  • <label> Name {{name_of_official_es_:signer1}} </label>

Wenn in einem geklonten Formularfeld eine Beschriftung mit einem „for“-Attribut angegeben wird, sind die Referenzen mehrdeutig und können nicht aufgelöst werden.  In diesem Fall wird keine Liquid Mode-Ansicht erstellt.

 Beispielsweise wird bei der folgenden Verwendung nur eine PDF-Ansicht erstellt:

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


Beschriftung von Feldgruppen

Beschriftungen sind einem einzelnen Formularfeld zugeordnet. Wenn eine Beschriftung/ein Titel einer Gruppe von Feldern (insbesondere einer Gruppe von Optionsfeldern) zugeordnet werden soll, empfehlen wir die Verwendung von fieldset- und legend-Elementen.  Das fieldset-Element wird zur Gruppierung der Elemente verwendet und das legend-Element wird verwendet, um einen Titel/eine Beschriftung für die Gruppe anzugeben.  Ähnlich wie bei der Beschriftung ergeben sich folgende Vorteile im Liquid Mode:

  • Eine bessere visuelle Darstellung eines mit der Feldgruppe verknüpften Titels/Überschrift
  • Ein gutes Barrierefreiheitserlebnis.  Bildschirmleser können die Feldgruppe anhand des legend-Inhalts korrekt wiedergeben.

Beispiel:

<fieldset>

        <legend>Bevorzugte primäre Farbe auswählen</legend>

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

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

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

</fieldset>

Hinweis:

In der Regel wünschen sich Autoren bei den meisten Dokumenten nicht die Standardwiedergabe des fieldset-Tags. 

Der Begrenzungsrahmen kann mit diesem CSS entfernt werden:

    fieldset {

        border: none;

        margin: 0;

        padding: 0;

    }

Bildunterstützung

Bilder werden mit den folgenden Einschränkungen unterstützt:

  • Nur das Element <img> wird unterstützt
  • Die Quelle eines <img> kann als eingebettete Daten („Data:Schema“) oder als Web-URL („https:Schema“) bereitgestellt werden.
  • Die folgenden Formate werden unterstützt:JPEGPNGGIFBMP und TIFF
    • Bei animierten GIFs wird der erste Frame als statisches Bild verwendet
  • Die Größe eines von einer Web-URL abgerufenen Bildes ist auf 5 MB begrenzt


Nicht unterstützte Acrobat Sign-Workflows

Der Liquid Mode unterstützt nicht die folgenden Acrobat Sign-Workflows:

  • Vereinbarungen, die aus mehreren Dokumenten erstellt wurden
  • Vereinbarungen, die aus anderen Dokumenten als HTML-Dokumenten erstellt wurden
  • Vereinbarungen, die aus Bibliotheksvorlagen erstellt wurden
  • Vereinbarungen, die im Status ENTWURF oder AUTHORING erstellt wurden
  • Workflows für digitale Signaturen
  • Workflows für schriftliche Signaturen
  • Workflows für die Änderung von in Bearbeitung befindlichen Dokumenten
  • Workflows aus Gruppen, bei denen das Kontrollkästchen „Vorschau“ standardmäßig aktiviert ist
  • Vereinbarungen, für die „Gründe für die Signatur“ aktiviert ist
  • Vereinbarungen, die so konfiguriert sind, dass der Unterzeichner jedes Mal zur Authentifizierung aufgefordert wird, wenn er auf ein Signaturfeld klickt

Wenn versucht wird, im Rahmen der oben genannten Workflows eine Liquid Mode-Ansicht zu erstellen, wird nur eine Vereinbarung mit der PDF-Ansicht erstellt.  In der Bestätigungs-E-Mail an den Absender sind die Gründe aufgeführt, warum die Liquid Mode-Ansicht nicht generiert werden konnte.


Benachrichtigung bei Liquid Mode-Fehler

Wenn der Absender versucht hat, eine Vereinbarung mit einer Liquid Mode-Ansicht zu erstellen, Acrobat Sign diese jedoch nicht generieren konnte, wird der Absender in der Bestätigungs-E-Mail der Vereinbarung darüber benachrichtigt, welche konkreten Probleme dazu geführt haben, dass die Liquid Mode-Ansicht nicht erstellt werden konnte. Der Absender kann die gemeldeten Probleme beheben und anschließend versuchen, die Vereinbarung mit einer Liquid Mode-Ansicht zu erstellen.

Die gemeldeten Probleme lassen sich in die folgenden Kategorien unterteilen:

  • Nicht unterstützte HTML-Konstrukte
  • Nicht unterstützte Acrobat Sign-Text-Tags
  • Nicht unterstützte Acrobat Sign-Workflows
  • Interner Liquid Mode-Fehler

Interne Liquid Mode-Fehler treten auf, wenn der Server bei dem Versuch, die Liquid Mode-Ansicht zu erstellen, unerwartete Fehlerbedingungen feststellt.

Für die anderen Fehlerkategorien finden Sie Einzelheiten zu den gemeldeten Problemen in den folgenden Unterabschnitten:

Wenn die Erstellung der Liquid Mode-Ansicht aufgrund nicht unterstützter HTML-Konstrukte fehlschlägt, enthält die Bestätigungs-E-Mail an den Absender eine oder mehrere der folgenden Fehlerzeichenfolgen:

Fehlerzeichenfolgen

Nicht unterstütztes Element [+tagName]

Nicht unterstütztes URL-Protokoll [+url]

Formularfelder in Tabellen werden nicht unterstützt [+tagName]

Verschachtelte Tabellen werden nicht unterstützt

Ungültige untergeordnete Beschriftung [+tagName]

Weitere Informationen finden Sie im Abschnitt Unterstützte HTML-Tags.

Wenn die Erstellung der Liquid Mode-Ansicht aufgrund nicht unterstützter Acrobat Sign-Tag-Konstrukte fehlschlägt, enthält die Bestätigungs-E-Mail an den Absender eine oder mehrere der folgenden Fehlerzeichenfolgen:

Fehlerzeichenfolgen

Definitions-Tag für Referenz kann nicht gefunden werden [+shortName]

Vorfüllfelder werden nicht unterstützt [+name]

Interne Hyperlinks werden nicht unterstützt [+name]

Nicht benannte Felder werden nur für Kontrollkästchen unterstützt

Felder mit demselben Namen und unterschiedlichen Direktiven werden nicht unterstützt [+name]

Digitale Signaturen werden nicht unterstützt [+name]

Felder dürfen nicht gleichzeitig ein label-Element und eine label-Direktive enthalten [+name]

Fehlendes Sign-Formularfeld für Text-Tag [+name]

Weitere Informationen finden Sie im Abschnitt Formularfeldspezifikation.

Wenn die Erstellung der Liquid Mode-Ansicht aufgrund nicht unterstützter Acrobat Sign-Workflows fehlgeschlagen ist, enthält die Bestätigungs-E-Mail an den Absender eine oder mehrere der folgenden Fehlerzeichenfolgen:

Fehlerzeichenfolgen

Die Vereinbarung ist eine Bibliotheksvorlage

Die Vereinbarung erfordert eine schriftliche Signatur

In der Vereinbarung ist die CFR-Option „Grund für die Signatur“ aktiviert

In der Vereinbarung ist die CFR-Option „E-Signatur erneut authentifizieren“ aktiviert

Weitere Informationen finden Sie im Abschnitt Formularfeldspezifikation.


HTML-Beispieldokument: Anforderung einer Kreditauskunft

Bei Formularen mit den folgenden Eigenschaften ist die Erstellung des Liquid Mode hauptsächlich angezeigt:

  • Dokumente mit großen Textblöcken, die ein hohes Maß an Verkleinerung und Vergrößerung erfordern
  • Formulare, bei denen sich die Felder nicht überschneiden und der Fluss der Felder im Liquid Mode zulässig ist

Herunterladen

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <title>Beispieltitel</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>BEISPIELUNTERNEHMEN</b></h2>

            <h1 class="h1_header">BEISPIELANFORDERUNG FÜR MEINE KOSTENLOSE KREDITAUSKUNFT</h1>

        </div>

        <div class="body">

            <h3>Wichtige Beispielinformationen und Anweisungen:</h3>

            <p>Zum Schutz Ihrer personenbezogenen Daten werden wir Ihre Identität überprüfen, bevor wir die Kreditauskunft an Ihre <u>bestätigte</u>

                Adresse senden. Sie müssen eine Fotokopie der Vorder- und Rückseite der folgenden Unterlagen vorlegen:</p>

            <ul class="info">

              <li class="info__item">Zwei amtlich ausgestellte Identitätsnachweise</li>

              <li class="info__item">Wenn Ihre Adresse auf keinem der Identitätsnachweisdokumente aktuell ist, <u>müssen Sie zusätzlich</u> ein Dokument beifügen, aus dem Ihre <u>aktuelle Anschrift</u> hervorgeht (z. B. Stromabrechnung).</li>

              <li class="info__item"> Wenn Sie Ihre <b>Sozialversicherungsnummer</b> angeben, werden wir diese mit unseren Aufzeichnungen abgleichen, um sicherzustellen, dass wir Ihnen die richtigen Informationen zukommen lassen. Wenn wir diese Informationen kennen, können wir Verzögerungen und Verwechslungen vermeiden, falls die identifizierenden Informationen (wie Name und Adresse) einer anderen Person den von Ihnen angegeben Informationen ähneln.</li>

              <li class="info__item">Wenn Sie eine <b> Kreditkartenabrechnung</b> oder eine Kopie Ihrer <b>Kreditkarte</b> als Nachweis zur Verfügung stellen, stellen Sie sicher, dass Sie Ihre persönlichen Informationen <b>schwärzen</b>.</li>

            </ul>

            <p>Die Informationen, die Sie auf dem Formular angeben, werden zur Bestätigung Ihrer Identität verwendet und können auch zur Aktualisierung Ihrer Kreditauskunft verwendet werden. Solche aktualisierten Informationen werden im Rahmen der normalen Geschäftstätigkeit in Bezug auf Ihre Kreditakte gespeichert, geschützt, verwendet und/oder offengelegt. Weitere Informationen zu den Datenschutzpraktiken von BEISPIELUNTERNEHMEN finden Sie in unserer Datenschutzrichtlinie unter https://www.adobe.com/privacy/policy.html. Wir bewahren in jedem Fall eine Kopie der von Ihnen bereitgestellten Informationen auf, um nachzuweisen, dass wir unserer Verpflichtung nachgekommen sind, eine angemessene Identifizierung von Ihnen einzuholen.

            </p>

            <p>Bitte senden Sie Ihr ausgefülltes Formular mit Identitätsnachweis an: <b>Lorem inseam dolor sit amen, consenttetur</b> oder per Fax an: <b>XXX-XX-XXXX.</b>Die Lieferdauer beträgt X-Y Tage. Wenn Sie Korrekturen an Ihrer Kreditauskunft vornehmen müssen, füllen Sie bitte das dem Paket beiliegende Aktualisierungsformular für die Kreditauskunft aus oder besuchen Sie <a href="http://sampleurl">SampleURL</a> und klicken Sie unter „Unterstützung und Hilfe“ auf „So stellen Sie einen Antrag auf XY“.

            </p>

        </div>

        <div class="form">

            <div class="columns-3">

                <div class="item">

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

                    <label for="LastName">NACHNAME</label>

                </div>

                <div class="item">

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

                    <label for="FirstName">VORNAME, INITIALE</label>

                </div>

                <div class="item">

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

                    <label for="Suffix">NAMENSZUSATZ (Sr., Jr. usw.)</label>

                </div>

            </div>

            <div class="address">

                <div class="item big">

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

                    <label for="StreetAddress">AKTUELLE STRASSE</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">STADT</label>

                </div>

                <div class="item">

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

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

                </div>

                <div class="item">

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

                    <label for="Zip">POSTLEITZAHL</label>

                </div>

            </div>

            <h2>FRÜHERE ADRESSE(N) IN DEN LETZTEN 3 JAHREN</h2>

            <div class="address">

                <div class="item big">

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

                    <label for="StreetAddressPr">FRÜHERE STRASSE</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">STADT</label>

                </div>

                <div class="item">

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

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

                </div>

                <div class="item">

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

                    <label for="ZipPr">POSTLEITZAHL</label>

                </div>

            </div>

            <div>

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

                    <label for="EmailAddress">E-MAIL-ADRESSE</label>

            </div>

            <div class="columns-2">

                <div class="item">

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

                    <label for="Date">GEBURTSDATUM</label>

                </div>

                <div class="item">

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

                    <label for="SocialSecurityNumber">SOZIALVERSICHERUNGSNUMMER:</label>

                </div>

            </div>

            <div class="columns-2">

                <div class="item">

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

                    <label for="NameMajorCard">NAME DER HAUPTKREDITKARTE:</label>

                </div>

                <div class="item">

                    <p class="textTag">{{$LAST4}}</p> <label for="Last4">DIE LETZTEN 4 ZIFFERN DER HAUPTKREDITKARTE:</label>

                </div>

            </div>

            <div class="columns-2">

                <div class="item">

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

                </div>

                <div class="item">

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

                </div>

            </div>

            <div class="checkbox">

                 <label class="underline">{{$PAY}}  JA, ICH MÖCHTE AUCH MEINE KREDITEINSCHÄTZUNG VON Beispielunternehmen* FÜR $X,XX (einschl. Steuern) ERWERBEN</label>

            </div>
            <fieldset>
            <legend> Ich autorisiere Beispielunternehmen, meine Kreditkarte zu belasten:</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">Name des Karteninhabers:</label>

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

            </div>

            <div class="card-info">

                <label for="CardNumber">Kartennummer:</label>

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

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

            </div>

            <div class="note">

                <p>Hinweis: Scheck- und Barzahlungen werden nicht akzeptiert. Zudem muss der Name des Karteninhabers mit dem Namen des Antragstellers übereinstimmen.</p>

            </div>

        </div>

        <div class="footer">

            <p>*XY von Beispielunternehmen ist ein Produkt, das von einigen Dienstleistern zur Bewertung von Kredit- und Dienstleistungsanträgen verwendet wird. Das Produkt ist kein Bestandteil Ihrer Beispielkreditauskunft, sondern basiert auf den speziellen Informationen, die zum Zeitpunkt der Berechnung in Ihrer Kreditakte enthalten sind. Lorem Ipsem ist nicht identisch mit dem Lorem Ipsem, das auch von einigen Kreditgebern verwendet wird. Beispielunternehmen stellt Ihnen Ihre Beispielauskunft kostenlos zur Verfügung, unabhängig davon, ob Sie Lorem Ipsem kaufen oder nicht. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Beispielunternehmen kann weitere Beispielservices anbieten:</b> Beispieladresse Telefon: 1-XXX-XXX-XXXX Telefon im Beispiel: 1-XXX-XXX-XXXX</p>

        </div>

    </div>

    <!--  SEITENUMBRUCH-->

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

    <!-- SIGN-Text-Tag-Definitionen -->

    {{#REMOVE_PAGE_FROM_OUTPUT}}

   

    <!-- Kontrollkästchen -->

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

 

    <!-- Optionsfeld und Bedingungsregel, die aktiviert werden sollen, wenn das Zahlungsfeld aktiviert wird-->

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

 

    <!-- Dropdown-Feld -->

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

 

    <!-- Berechnetes Feld -->

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

     

    <!-- Formatvalidierung für regulären Ausdruck -->

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

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

 

    <!-- Datumsvalidierungen -->

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

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

 

</body>

 

</html>

 

HTML-Dokument im Browser

Klassische PDF-Ansicht in Adobe Sign

Vereinbarungsansicht:

Liquid Mode        Ansicht


Bekannte Probleme und FAQ

Wir empfehlen, dass Sie beim Erstellen der HTML-Datei die HTML-Datei einige Male testen und sicherstellen, dass keine Fehler vorliegen und sie Ihre Flusskriterien erfüllt, bevor Sie sie an die vorgesehenen Empfänger senden.

Die HTML-Elemente im HTML-Dokument müssen der Lesereihenfolge des Dokuments folgen. 

Seitenumbrüche im Dokument sollten wie unten dargestellt explizit mit der CSS-Eigenschaft „page-break-after“ angegeben werden:

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

Wenn ein Dokument unter Berücksichtigung von fließenden Umbrüchen neu gestaltet wird, kann dies das mobile Erlebnis insgesamt verbessern. Wenn Sie KEINE Neugestaltung des Dokuments in Betracht ziehen, sollten Sie sich mit einigen Ausnahmen an das allgemeine Erscheinungsbild der ursprünglichen PDF-Datei halten:

  • Artefakte auf Seitenebene werden im Liquid Mode nicht besonders behandelt. Wenn Artefakte auf Seitenebene wie Kopf- und Fußzeilen, Wasserzeichen usw. im HTML-Dokument vorhanden sind, werden sie möglicherweise in der Ansicht „Umfließen“ in der Mitte des umgebrochenen Inhalts angezeigt.

  • Wenn das Formular Anweisungen zum Ausfüllen der Formularfelder wie beispielsweise „BITTE AUSDRUCKEN“ oder „OPTIONAL“ oder Formatierungsanweisungen wie „(mm/TT/JJJJ)“ enthält, fügen Sie den Text nicht in das HTML-Dokument ein. Einige der Informationen wie Formatierungsanweisungen „(mm/TT/JJJJ)“ oder die Angabe, ob ein Formularfeld „OPTIONAL“ ist, müssen in der Formularfeldspezifikation mithilfe von Text-Tags angegeben werden.  

  • Für einige Texte sind möglicherweise zusammengesetzte Informationssätze erforderlich. Wenn diese in mehrere Formularfelder aufgeteilt werden, vereinfacht dies den Anwendungsfall. Im obigen Beispieldokument wurden beispielsweise der NAME UND DIE LETZTEN 4 ZIFFERN DER HAUPTKREDITKARTE in NAME DER HAUPTKREDITKARTE und DIE LETZTEN 4 ZIFFERN DER HAUPTKREDITKARTE aufgeteilt.

  • Verwenden Sie nur die oben aufgeführten unterstützten HTML-Tags. Weitere Informationen finden Sie im Abschnitt zu HTML-Konstrukten.

  • Verwenden Sie relative Koordinaten und Platzierungen wie {width: 30%}, damit der HTML-Code auf verschiedene Gerätebreiten umgebrochen werden kann. Absolute Seitenbreiten dürfen in der CSS-Anweisung nicht vorhanden sein. 

  • Wenn eine PDF ein Tabellen- oder Listenkonstrukt enthält, muss die entsprechende HTML-Darstellung eine Tabelle bzw. eine Liste sein. Die einzige Ausnahme sind Tabellen mit Formularfeldern. Wenn eine Tabelle Formularfelder enthält, müssen dieselben Informationen ohne Tabellen dargestellt werden.

Um ein Online-Formular zu entwerfen, das ein überzeugendes Ausfüllerlebnis bietet, wird dringend empfohlen, Formularfelder mit allen Validierungen, Formatierungsausdrücken, Bedingungsregeln und Berechnungsformeln zu erstellen, die Sign-Text-Tags bieten.

  • Die Namen von Formularfeldern müssen eindeutig sein, wenn sie verschiedene Elemente darstellen.
  • Es wird dringend empfohlen, dass jedes Formularfeld mit einer Beschriftung versehen wird, entweder indem Sie das Formularfeld einschließen oder indem Sie das „for“-Attribut verwenden.
  • Wenn ein Formularfeld OPTIONAL ist, muss dieses in den Sign-Text-Tags angegeben werden. Beispiel:
    • {{*S.I.N_es_:signer1}} ist ein erforderliches Formularfeld
    • {{S.I.N_es_:signer1}} ist ein optionales Formularfeld
  • Sign-Text-Tags bieten eine Vielzahl von Validierungen für Postleitzahl, Sozialversicherungsnummer, Datum, E-Mail-Adresse, Währungen mit Bereichsprüfungen und maximalen Längen usw. Bitte nutzen Sie sie.
  • Sign-Text-Tags enthalten auch Formatierungen für Formularfelder wie Datumsformat, Währungsformat usw. Die Verwendung dieser Formate wird ebenfalls dringend empfohlen.
  • Alle Kontrollkästchen sollten mit einer Beschriftung versehen sein. Beispiel:

<label> {{[]}} JA, ICH MMÖCHTE AUCH MEINE KREDITEINSCHÄTZUNG ERWERBEN</label>

  • Wenn es Formularfelder gibt, die im Papier-/PDF-Formular wie Kontrollkästchen aussehen, für die aber sich gegenseitig ausschließende Optionen wie „Ja/Nein“ oder „Visa/MasterCard/AMEX“ ausgewählt werden müssen, kombinieren Sie diese Formularfelder zu einer Gruppe und machen Sie sie zu einem Formularfeld des Typs „Optionsfeld“ oder „Dropdown“ anstatt einzelne Kontrollkästchen zu erstellen. Fügen Sie außerdem eine Beschriftung/eine Überschrift hinzu.

<fieldset>

<legend>Zahlungsoptionen:</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-Text-Tags definieren auch die Abmessungen der Formularfelder auf der wiedergegebenen Seite basierend auf den Abmessungen des wiedergegebenen Sign-Text-Tags auf der Seite. Die Sign-Text-Tag-Spezifikation bietet Möglichkeiten, die Formularfeldabmessungen zu kürzen. Suchen Sie in https://helpx.adobe.com/de/sign/using/text-tag.html nach den Abschnitten „Kürzen von Text-Tags“ und „Lange Text-Tags“. Eine gängige Methode besteht darin, am Ende des HTML-Dokuments einen Abschnitt zu definieren, der die Definitions-Tags für die wirklich langen Text-Tags enthält, und im HTML-Textkörper Text Bezugstags zu verwenden. Hier sind einige Beispiel-Definitions-Tags:

<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

Bei Ihrem Konto anmelden