Liquid Mode for Mobile Web Signing Experience

Introduction

The Liquid Mode signing experience improves the display of your documents based on the recipient's device type, reducing the need to pinch and zoom and easily focus on the fields that need to be filled.

Liquid Mode compliant agreements are generated with two views for the recipient:

  1. PDF view that is created using all the styling information present in the uploaded HTML. This corresponds to the signed version of the agreement that is available for download – just like the PDF view Adobe Acrobat Sign generates for all agreements
  2. Liquid Mode view that reflows the input HTML document and is optimized for small screen sizes. The Liquid Mode view presents a highly curated experience that overrides the styling specified in the original HTML document

The interface allows your recipient to easily switch between the Liquid Mode and traditional PDF views of the document, depending on their preference and captures the same legally binding signatures that you expect.

 

Liquid Mode compliant agreements are created with a single HTML file as the source content.

There are a few restrictions on the HTML and form field constructs in the uploaded HTML document. Specifically:

  • the agreement must be created with a single HTML document (one file only)
    • If more than one document is used to create the agreement, only a PDF view is generated
  • the HTML document may not contain JavaScript. Use of <script> tags, either as inline JavaScript or as a reference to external JavaScript files, or in attributes of HTML tags are not allowed
    • If JavaScript is found in the HTML document, Acrobat Sign only creates the PDF view
  • the HTML document can only use the supported HTML tags in the <body> of the HTML document as described in the Supported HTML Tags section
    • If unsupported HTML tags are in the body of the HTML document, Acrobat Sign only creates the PDF view

As the Liquid Mode view has a very curated experience, CSS specified in the HTML file is ignored (ONLY for the Liquid Mode view) and only the attributes of the supported HTML tags will influence the Liquid Mode view. However, there are no such restrictions for the PDF view. Acrobat Sign uses the full gamut of attributes that are available for the supported tags as well as the CSS specified in the HTML document to generate the PDF view.

Adobe Acrobat Sign text tag notation is used to specify the form fields in the HTML document.

Liquid mode workflow

Opomba:

If the Liquid Mode feature is enabled but the Liquid Mode view can not be generated for any reason the agreement is created with the PDF view only.

The confirmation email sent to the sender will list the reasons why the Liquid Mode view could not be generated.

Liquid Mode is currently supported on mobile phone devices, with additional support in development.


Enable/Send Liquid Mode compliant agreements

  1. Ensure that Liquid Mode is enabled in the Acrobat Sign Admin menu:

    • Navigate to  Send Settings > Liquid Mode
      • The setting can be modified at the account or group level
    Navigate to Liquid Mode controls

  2. Submitting a single HTML file using one of the following means:

    Send HTML doc


Supported HTML Tags

To successfully create an agreement with the Liquid Mode view, the HTML document may NOT contain JavaScript constructs. 

Only the following tags can be used in the body of the HTML document:

Category

HTML tags

Attributes that impact Liquid Mode view

Restrictions

Headers

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

NONE

 

Content Division

<div>

align

 

Break

<br>

NONE

 

Horizontal Rule

<hr>

NONE

 

Paragraph

<p>

align

 

Images

<img>

src, alt, height, width

Please see section "Image Support"

Inline text

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

NONE

 

Ordered List

<ol>, <li>

value, type, reversed, start

 

Unordered list

<ul>, <li>

value, reversed, start

 

Hyperlink

<a>

href

URL protocol is restricted to http, https and mailto

Table

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

NONE

1.Nested tables are NOT supported

2.Form fields within tables are NOT supported

Form field label

<label>

for

Please see section “Form Field Labels”.

Form field grouping

<fieldset>, <legend>

NONE

Please see section “Labelling Groups of Fields”.

Images

<img>

src, alt, height, width

The size of the image plus the entire HTML should be less than 400KB. The following formats are supported JPEG, PNG, GIF, BMP, and TIFF. The image source must be a HTTPs URL.


Form Field Specification

Form fields need to be specified in the HTML document using Adobe Acrobat Sign text tag notation.

The table below shows sample form fields using Acrobat Sign text tags:

Field

Sign Text Tags

Signature Fields (Signature, Initials, Signature Block, Stamp)

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

Signer Fields

{{Cmpy_es_:signer1:company}}



{{N_es_:signer2:fullname}}



{{Dte_es_:signer1:date}}



{{Em_es_:signer1:email}}

Sender Fields

{{*Ttl_es_:sender:title}}

Participation Stamp & Transaction ID

{{userstamp_es_:signer1:stamp:repeat}}

{{transstamp1_es_:transactionid:repeat}}

Read Only Field

{{!price}}

{{price_es_:readonly}}

Text Input

{{address_es_:signer1}}

{{*city_es_:signer1}}

Checkboxes

{{CB1_es_:checkbox(checked)}}

Radio Button

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

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

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

Image

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


File Attachment

{{*DriversLicense_es_:signer1:attachment}}

Tooltip

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

Digital Signature

{{digsig1_es_:signer1:digitalsignature}}

Field Validation

{{*Mobile_es_:signer1:phone}}

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

Conditional Rules

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

Calculated Fields

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

Opomba:

All Acrobat Sign form field constructs are supported except for the following:

Category

Unsupported Constructs

Exceptions

Digital signature form field

:digitalsignature will not be supported



Prefill workflows

:prefill directive will not be supported.



Hyperlink form field

:page(N) directive will not be supported.

:link with protocols other than http, https and mailto.

:signer1 and :everyone directives will be supported.

Unnamed form fields

Unnamed form fields will not be supported.

Unnamed checkboxes will be supported

Renamed form fields

Multiple form fields with same name but different directives will not be supported




Form Field Labels

Each form field should have an associated label. Although labels are not mandated for every form field, it is highly recommended that form fields have labels.

Specifically, in Liquid Mode:

  • Labels are used to enhance the visual representation of the field
  • A label associated with a field provides accessibility hints. When a field has focus, a screen reader will use the label to announce the field to the user
  • A label can be clicked to set focus on a field, or in the case of a radio button or checkbox, clicking the label will toggle the value

Form fields can be bound to labels using the HTML <label> tag in one of the following ways:

  1. Acrobat Sign form field enclosed inside a <label> tag
    • <label>Signature: {{sig_es_:signer1:signature}}</label>
  2. The “for” attribute of the <label> tag can refer to the name of the form field to bind it to a form field.
    • {{sig_es_:signer1:signature}} … <label for=”sig”>Signature: </label>

Labels that cannot be bound with form fields by the above rules will be rendered as an unbound label text.

Additionally, Acrobat Sign text tags support the :label directive for the form fields types:

  • File Attachments
  • Hyperlinks
  • Checkboxes
  • Radio Buttons

The Acrobat Sign text tag :label directive and <label> tag can be combined in the following ways:

Form field type

Role of :label directive

Role of HTML <label> tag

File Attachments,

Hyperlinks

Specifies the label displayed inside the form field box.

<label> tag specifies the label or header for the form field.

Checkbox,

Radio button option

Specifies the label or header for the form field.

If the Acrobat Sign text tag :label directive  is absent, <label> will take its place for the form field.

If both :label and <label> are present, Liquid Mode view will fail to create.

Examples:

  • {{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>
Opomba:

Labels can be specified for checkboxes in the following ways:

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

Labels can be specified for radio button options in the following ways:

  • {{(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>
Pozor:

Normally in HTML, the “for” attribute refers to a field id value.  Liquid Mode uses the “for” attribute to refer to field names.  This can cause ambiguity for cloned form fields -- where there are multiple instances of form fields with the exact same Acrobat Sign text tag directive.  In this case, we need to avoid using the “for” attribute and must associate labels by enclosing the text tag inside a <label> element.

For example, the following usage will create cloned form fields with different labels for each of the two instances in mobile reflow view:

  • <label> Official {{name_of_official_es_:signer1}} </label>
  • <label> Name {{name_of_official_es_:signer1}} </label>

If a cloned form field specifies a label using a "for" attribute, the references are ambiguous and cannot be resolved.  in this case, a Liquid Mode view will not be created.

 For example, the following usage will only create a PDF view:

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


Labelling Groups of Fields

Labels are associated with a single form field. When we want to associate a label/caption with a group of fields (notably, groups of radio buttons) we encourage the use of fieldset and legend elements.  The fieldset is used to group the elements, and the legend is used to provide a caption/label for the group.  Similar to label, the benefits in Liquid Mode are:

  • A better visual representation of a caption/heading associated with the group of fields
  • A good accessibility experience.  Screen readers will correctly announce the group of fields using the legend contents

For Example:

<fieldset>

        <legend>Choose your favorite primary color</legend>             

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

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

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

</fieldset>

Opomba:

For most documents, the author won’t want the default rendering of a fieldset. 

The bounding box can be removed with this CSS:

    fieldset {

        border: none;

        margin: 0;

        padding: 0;

    }

Image Support

Images are supported with the following restrictions:

  • Only the <img> element is supported
  • The src of an <img> can be provided as embedded data (data: scheme) or as a web URL (https: scheme only)
  • The following formats are supported: JPEGPNGGIFBMP, and TIFF
    • For animated GIFs, the first frame will be used as a static image
  • The size of an image retrieved from a web URL is limited to 5 MB


Unsupported Acrobat Sign workflows

Liquid Mode does not support the following Acrobat Sign workflows:

  • Agreements created from multiple documents
  • Agreements created from non-HTML documents
  • Agreements created from library templates
  • Agreements created in DRAFT or AUTHORING state
  • Digital signature workflows
  • Written signature workflows
  • Modify in-flight workflows
  • Workflows from groups where the Preview checkbox is enabled by default
  • Agreements with signing reasons enabled
  • Agreements configured to challenge the signer to authenticate each time the signer clicks a signature field

An attempt to create a Liquid Mode view in the above workflows results in the creation of an agreement with the PDF view only.  The confirmation email sent to the sender lists the reasons why Liquid Mode could not be generated.


Liquid Mode error notification

If the sender tried to generate an agreement with a Liquid Mode view, but Acrobat Sign could not generate it, the sender is notified in the agreement confirmation email with the specific issues that prevented the creation of the Liquid Mode view. The sender can address the reported issues and attempt to create the agreement with a Liquid Mode view in subsequent attempts.

The reported issues can be grouped into the following categories:

  • Unsupported HTML constructs
  • Unsupported Acrobat Sign text tags
  • Unsupported Acrobat Sign workflows
  • Liquid Mode internal error

Liquid Mode internal errors occur when the server encounters unexpected error conditions while trying to create the Liquid Mode view.

For the other error categories, you can find details of the reported issues in the following sub-sections:


Sample HTML Document: Credit Report Request

Form qualities that are prime targets for Liquid Mode creation are:

  • documents that have large blocks of text that may require a lot of pinching and zooming
  • forms where there is no overlapping of fields, and the Liquid Mode flow of fields is acceptable


Known Issues and FAQ

Pridobite pomoč hitreje in preprosteje

Ali ste nov uporabnik?