User Guide Cancel

Liquid Mode for Mobile Web Signing Experience

 

Adobe Acrobat Sign Guide

What's New

  1. Pre-Release Notes
  2. Release Notes
  3. Important Notifications

Get Started

  1. Quick start guide for administrators
  2. Quick start guide for users
  3. For Developers
  4. Video tutorial library
  5. FAQ

Administer

  1. Admin Console Overview
  2. User Management
    1. Adding users
      1. Add a User
      2. Add Users in Bulk
      3. Add Users from your Directory
      4. Add Users from MS Azure Active Directory
    2. Create function-focused users
      1. Technical accounts - API driven
      2. Service accounts - Manually driven
    3. Check for users with provisioning errors
    4. Change Name/Email Address
    5. Edit a user's group membership
    6. Edit a user's group membership through the group interface
    7. Promote a user to an admin role
    8. User Identity Types and SSO
    9. Switch User Identity
    10. Authenticate Users with MS Azure
    11. Authenticate Users with Google Federation
    12. Product Profiles
    13. Login Experience 
  3. Account/Group Settings
    1. Settings Overview
    2. Global Settings
      1. Account tier and ID
      2. New Recipient Experience
      3. Self Signing Workflows
      4. Send in Bulk
      5. Web Forms
      6. Custom Send Workflows
      7. Power Automate Workflows
      8. Library Documents
      9. Collect form data with agreements
      10. Limited Document Visibility
      11. Attach a PDF copy of the signed agreement 
      12. Include a link in the email
      13. Include an image in the email
      14. Files attached to email will be named as
      15. Attach audit reports to documents
      16. Merge multiple documents into one
      17. Download individual documents
      18. Upload a signed document
      19. Delegation for users in my account
      20. Allow external recipients to delegate
      21. Authority to sign
      22. Authority to send
      23. Power to add Electronic Seals
      24. Set a default time zone
      25. Set a default date format
      26. Users in Multiple Groups (UMG)
        1. Upgrade to use UMG
      27. Group Administrator Permissions
      28. Replace recipient
      29. Audit Report
        1. Overview
        2. Allow unauthenticated access on the transaction verification page
        3. Include reminders
        4. Include view events
        5. Include agreement page/attachment count
      30. In Product Messaging and Guidance
      31. Accessible PDFs
      32. New authoring experience
      33. Healthcare customer
    3. Account Setup
      1. Add logo
      2. Customize company Hostname/URL    
      3. Add company name
      4. Post agreement URL redirect
    4. Signature Preferences
      1. Well formatted signatures
      2. Allow recipients to sign by
      3. Signers can change their name
      4. Allow recipients to use their saved signature
      5. Custom Terms of Use and Consumer Disclosure
      6. Navigate recipients through form fields
      7. Decline to sign
      8. Allow Stamps workflows
      9. Require signers to provide their Title or Company
      10. Allow signers to print and place a written signature
      11. Show messages when e-signing
      12. Require signers to use a mobile device to create their signature
      13. Request IP address from signers
      14. Exclude company name and title from participation stamps
    5. Digital Signatures
      1. Overview
      2. Download and sign with Acrobat
      3. Sign with Cloud Signatures
      4. Include metadata for Identity Providers
      5. Restricted Cloud Signatures Providers
    6. Electronic Seals
    7. Digital Identity
      1. Digital Identity Gateway
      2. Identity Check policy
    8. Report Settings
      1. New report experience
      2. Classic report settings
    9. Security Settings
      1. Single Sign-on settings
      2. Remember-me settings
      3. Login password policy
      4. Login password strength
      5. Web session duration
      6. PDF encryption type
      7. API
      8. User and group info access
      9. Allowed IP Ranges
      10. Account Sharing
      11. Account sharing permissions
      12. Agreement sharing controls
      13. Signer identity verification
      14. Agreement signing password
      15. Document password strength
      16. Block signers by Geolocation
      17. Phone Authentication
      18. Knowledge-Based Authentication (KBA)
      19. Allow page extraction
      20. Document link expiration
      21. Upload a client certificate for webhooks/callbacks
      22. Timestamp
    10. Send settings
      1. Show Send page after login
      2. Require recipient name when sending
      3. Lock name values for known users
      4. Allowed recipient roles
      5. Allow e-Witnesses
      6. Recipient groups
      7. Required fields
      8. Attaching documents
      9. Field flattening
      10. Modify Agreements
      11. Agreement name
      12. Languages
      13. Private messages
      14. Allowed signature types
      15. Reminders
      16. Signed document password protection
      17. Send Agreement Notification through
      18. Signer identification options
        1. Overview
        2. Signing password
        3. One-Time Password via Email
        4. Acrobat Sign authentication
        5. Phone authentication
        6. Cloud-based digital signature
        7. Knowledge-based authentication
        8. Government ID
        9. Signer Identity reports
      19. Content Protection
      20. Enable Notarize transactions
      21. Document Expiration
      22. Preview, position signatures, and add fields
      23. Signing order
      24. Liquid mode
      25. Custom workflow controls
      26. Upload options for the e-sign page
      27. Post-sign confirmation URL redirect
    11. Message Templates
    12. Bio-Pharma Settings
      1. Overview
      2. Enforce identity authentication
      3. Signing reasons
    13. Workflow Integration
    14. Notarization Settings
    15. Payments Integration
    16. Signer Messaging
    17. SAML Settings
      1. SAML Configuration
      2. Install Microsoft Active Directory Federation Service
      3. Install Okta
      4. Install OneLogin
      5. Install Oracle Identity Federation
    18. Data Governance
    19. Time Stamp Settings
    20. External Archive
    21. Account Languages
    22. Email Settings
      1. Email header/footer images
      2. Permit individual user email footers
      3. Customize the Signature Requested email
      4. Customize the To and CC fields
      5. Enable Linkless Notifications
      6. Customize email templates
    23. Migrating from echosign.com to adobesign.com
    24. Configure Options for Recipients
  4. Guidance for regulatory requirements
    1. Accessibility
      1. Accessibility Compliance
      2. Create accessible forms with Acrobat desktop
      3. Create accessible AcroForms
    2. HIPAA
    3. GDPR
      1. GDPR Overview
      2. Redact a user
      3. Redact a user's agreements    
    4. 21 CFR part 11 and EudraLex Annex 11
      1. 21 CRF part 11 validation pack
      2. 21 CFR and EudraLex Annex 11 handbook
      3. Analysis of shared responsibilities
    5. Healthcare customers
    6. IVES support
    7. "Vaulting" agreements
    8. EU/UK considerations
      1. EU/UK Cross-border transactions and eIDAS
      2. HMLR requirements for deeds signed electronically
      3. The impact of Brexit on e-signature laws in the UK
  5. Download Agreements in Bulk
  6. Claim your domain 
  7. Report Abuse links

Send, Sign, and Manage Agreements

  1. Recipient Options
    1. Cancel an email reminder
    2. Options on the e-signing page
      1. Overview of the e-sign page
      2. Open to read the agreement without fields
      3. Decline to sign an agreement
      4. Delegate signing authority
      5. Restart the agreement
      6. Download a PDF of the agreement
      7. View the agreement history
      8. View the agreement messages
      9. Convert from an electronic to a written signature
      10. Convert from a written to an electronic signature 
      11. Navigate the form fields
      12. Clear the data from the form fields
      13. E-sign page magnification and navigation
      14. Change the language used in the agreement tools and information
      15. Review the Legal Notices
      16. Adjust Acrobat Sign Cookie Preferences
  2. Send Agreements  
    1. Send page overview
    2. Send an agreement only to yourself
    3. Send an agreement to others
    4. Written Signatures
    5. Recipient signing order
    6. Send in Bulk
      1. Overview of the Send in Bulk feature
      2. Send in Bulk - Configure a parent template
      3. Send in Bulk - Configure the CSV file
      4. Cancel a Send in Bulk transaction
      5. Add reminders to Send in Bulk
      6. Reporting for Send in Bulk
  3. Authoring fields into documents
    1. In-app authoring environment
      1. Automatic field detection
      2. Drag and drop fields using the authoring environment
      3. Assign form fields to recipients
      4. The Prefill role
      5. Apply fields with a reusable field template
      6. Transfer fields to a new library template
      7. Updated authoring environment when sending agreements
    2. Create forms with text tags
    3. Create forms using Acrobat (AcroForms)
      1. AcroForm creation
      2. Creating accessible PDFs
    4. Fields
      1. Field types
        1. Common field types
        2. In-line Images
        3. Stamp Images
      2. Field content appearance
      3. Field validations
      4. Masked fields values
      5. Setting show/hide conditions
      6. Calculated fields 
    5. Authoring FAQ
  4. Sign Agreements
    1. Sign agreements sent to you
    2. Fill & Sign
    3. Self-signing
  5. Manage Agreements
    1. Manage page overview
    2. Delegate agreements
    3. Replace Recipients
    4. Limit Document Visibility 
    5. Cancel an Agreement 
    6. Create new reminders
    7. Review reminders
    8. Cancel a reminder
    9. Access Power Automate flows
    10. More Actions...
      1. How search works
      2. View an agreement
      3. Create a template from an agreement
      4. Hide/Unhide agreements from view
      5. Upload a signed agreement
      6. Modify a sent agreement's files and fields
      7. Edit a recipient's authentication method
      8. Add or modify an expiration date
      9. Add a Note to the agreement
      10. Share an individual agreement
      11. Unshare an agreement
      12. Download an individual agreement
      13. Download the individual files of an agreement
      14. Download the Audit Report of an agreement
      15. Download the field content of an agreement
  6. Audit Report
  7. Reporting and Data exports
    1. Overview
    2. Grant users access to reporting
    3. Report charts
      1. Create a new report
      2. Agreement Reports
      3. Transaction Reports
      4. Settings Activity Report
      5. Edit a report
    4. Data Exports 
      1. Create a new data export
      2. Edit a data export
      3. Refresh the data export content
      4. Download the data export
    5. Rename a report/export
    6. Duplicate a report/export
    7. Schedule a report/export
    8. Delete a report/export
    9. Check Transaction Usage

Advanced Agreement Capabilities and Workflows

  1. Webforms 
    1. Create a web form
    2. Edit a web form
    3. Disable/Enable a web form
    4. Hide/Unhide a web form
    5. Find the URL or script code 
    6. Prefill web form fields with URL parameters
    7. Save a web form to complete later
    8. Resize a web form
  2. Reusable Templates (Library templates) 
    1. US Government forms in the Acrobat Sign library
    2. Create a library template
    3. Change a library template's name
    4. Change a library template's type
    5. Change a library template's permission level
    6. Copy, edit, and save a shared template
    7. Download the aggregate field data for a library template
  3. Transfer ownership of web forms and library templates
  4. Power Automate Workflows 
    1. Overview of the Power Automate integration and included entitlements
    2. Enable the Power Automate integration
    3. In-Context Actions on the Manage page
    4. Track Power Automate usage
    5. Create a new flow (Examples)
    6. Triggers used for flows
    7. Importing flows from outside Acrobat Sign
    8. Manage flows
    9. Edit flows
    10. Share flows
    11. Disable or Enable flows
    12. Delete flows
    13. Useful Templates
      1. Administrator only
        1. Save all completed documents to SharePoint
        2. Save all completed documents to OneDrive for Business
        3. Save all completed documents to Google Drive
        4. Save all completed documents to DropBox
        5. Save all completed documents to Box
      2. Agreement archival
        1. Save your completed documents to SharePoint
        2. Save your completed documents to One Drive for Business
        3. Save your completed documents to Google Drive
        4. Save your completed documents to DropBox
        5. Save your completed documents to Box
      3. Webform agreement archival
        1. Save completed web form documents to SharePoint Library
        2. Save completed web form documents to OneDrive for Business
        3. Save completed   documents to Google Drive
        4. Save completed web form documents to Box
      4. Agreement data extraction
        1. Extract form field data from your signed document and update Excel sheet
      5. Agreement notifications
        1. Send custom email notifications with your agreement contents and signed agreement
        2. Get your Adobe Acrobat Sign notifications in a Teams Channel
        3. Get your Adobe Acrobat Sign notifications in Slack
        4. Get your Adobe Acrobat Sign notifications in Webex
      6. Agreement generation
        1. Generate document from Power App form and Word template, send for signature
        2. Generate agreement from Word template in OneDrive, and get signature
        3. Generate agreement for selected Excel row, send for review and signature
  5. Custom Send workflows
    1. Custom Send Workflow Overview
    2. Creating a new Send Workflow
    3. Edit a Send Workflow
    4. Activate or Deactivate a Send Workflow
    5. Send an agreement with a Send Workflow
  6. Share users and agreements
    1. Share a user
    2. Share agreements

Integrate with other products

  1.  Acrobat Sign integrations overview 
  2. Acrobat Sign for Salesforce
  3. Acrobat Sign for Microsoft
    1. Acrobat Sign for Microsoft 365
    2. Acrobat Sign for Outlook
    3. Acrobat Sign for Word/PowerPoint
    4. Acrobat Sign for Teams
    5. Acrobat Sign for Microsoft PowerApps and Power Automate
    6. Acrobat Sign Connector for Microsoft Search
    7. Acrobat Sign for Microsoft Dynamics 
    8. Acrobat Sign for Microsoft SharePoint 
  4. Other Integrations
    1. Acrobat Sign for ServiceNow
    2. Acrobat Sign for HR ServiceNow
    3. Acrobat Sign for SAP SuccessFactors
    4. Acrobat Sign for Workday
    5. Acrobat Sign for NetSuite
    6. Acrobat Sign for VeevaVault
    7. Acrobat Sign for Coupa BSM Suite
  5. Partner managed integrations
  6. How to obtain an integration key

Acrobat Sign Developer

  1. REST APIs 
    1. Methods documentation
    2. SDK/Developer Guide
    3. API FAQ    
  2. Webhooks 
    1. Webhook overview
    2. Configure a new webhook
    3. View or edit a webhook
    4. Deactivate or reactivate a webhook
    5. Delete a webhook
    6. Two-way SSL certificates
    7. Webhooks in the API

Support and Troubleshooting

  1. Customer Support Resources 
  2. Enterprise Customer Success Resources 

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

Note:

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

Note:

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

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

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>

Note:

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:

If the Liquid Mode view can not be generated due to unsupported HTML constructs, the confirmation email sent to the sender will include one or more of the following error strings:

Error strings

Unsupported element [+tagName]

Unsupported URL protocol [+url]

Form fields in tables are not supported [+tagName]

Nested tables are not supported

Invalid label child [+tagName]

See the section on Supported HTML tags for more information.

If the Liquid Mode view can not be generated due to unsupported Acrobat Sign text tag constructs, the confirmation email sent to the sender will include one or more of the following error strings:

Error strings

Unable to find definiton tag for reference [+shortName]

Prefill fields are not supported [+name]

Internal hyperlinks are not supported [+name]

Unnamed fields are only supported for checkboxes

Fields with the same name and different directives are not supported [+name]

Digital signatures are not supported [+name]

Fields may not have both a label element and label directive [+name]

Missing Sign form field for text tag: [+name]

See the section on Form Fields Specification for more information.

If the Liquid Mode view could not be generated due to unsupported Acrobat Sign workflows, the confirmation email sent to the sender will include one or more of the following error strings:

Error strings

Agreement is a library template

Agreement requires written signature

Agreement has CFR option of Signing reason enabled

Agreement has CFR option of ESign reauth enabled

See the section on Form Fields Specification for more information.


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

Download

<!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> I authorize Sample Company to charge the payment to my credit card:</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

Classic PDF View in Adobe Sign

Agreement view:

Liquid Mode view


Known Issues and FAQ

We recommend that as you author the HTML you test the html a few times and check that there are no errors and it meets the overall flow criteria for you before you send it to the intended recipients.

The HTML elements in the HTML document need to follow the document reading order. 

Page breaks in the document should be specified explicitly using the CSS property “page-break-after" like shown below:

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

Redesigning the document with reflow in mind might enhance the overall mobile experience. If you are NOT considering redesigning the document, you may want to adhere to the overall look and feel of the original PDF with a few exceptions:

  • There will be no special handling of page level artifacts in Liquid Mode. If page level artifacts like headers, footers, watermarks, etc. are present in the HTML document, they may show up in the reflow view in the middle of the reflowed content.

  • If the form includes instructions for filling the form fields like “PLEASE PRINT” or “OPTIONAL” or formatting instructions like “(mm/dd/yyyy)”, please do not include the text in the HTML – some of the info like formatting instructions “(mm/dd/yyyy)” or if a form field is “OPTIONAL” should be specified in the form field specification using text tags.  

  • Some text might require gathering composite sets of information. Splitting them into multiple form fields will simplify the use case. For example, in the above sample document, “NAME & LAST 4 DIGITS OF MAJOR CREDIT CARD’ has been split into “NAME OF MAJOR CREDIT CARD” and “LAST 4 DIGITS OF MAJOR CREDIT CARD”

  • Use only supported HTML tags listed above. Please see section on HTML constructs.

  • Use relative coordinates and placements like {width: 30%} so that the HTML can reflow to different device widths. Absolute page width should not be present in the CSS. 

  • If a PDF contains a table or list construct, the corresponding HTML representation should be a table or list respectively. The only exception is tables with form fields. If a table has form fields, the same information needs to be presented without tables.

To create a richer online form filling experience, it is highly recommended that form fields are authored using all the validations, formatting expressions and conditional rules and calculation formula that Sign text tags offer.

  • Names of form fields need to be unique if they are representing different entities
  • It is very highly recommended that each form field have a label by either enclosing the form field or using the “for” attribute
  • If a form field is OPTIONAL, it should be specified in the Sign text tags. For example:
    • {{*S.I.N_es_:signer1}} represents a required form field
    • {{S.I.N_es_:signer1}} represents an optional form field
  • Sign text tags provide a variety of validations for zip, ssn, date, email, currency numbers with range checks & max lengths and so on. Please use them
  • Sign text tags also Include formatting for form field like date format, currency format and so on. It is highly recommended that you use them
  • All checkboxes should have labels associated with them: For example:

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

  • If there are form fields that look like checkboxes in the paper/PDF form but have mutually exclusive values like Yes/No questions or Visa/MasterCard/AMEX question in this form, please combine all the form fields into a group make it into a form field of type radio button or dropdown instead of individual checkboxes and include a label/header     

<fieldset>

<legend>Payment Options:</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 also define the dimensions of the form fields on the rendered page based on the dimensions of the rendered sign text tag on the page. Sign Text tag specification provides ways of shortening the form field dimensions. Please search for “Shortening Text Tags” and “Long Text Tags” in https://helpx.adobe.com/sign/using/text-tag.html. A common technique is to define a section at the end of the HTML document that contains the Definition Tags for the really long text tags and using the Reference Tags in the HTML body. Here is some sample Definition 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

Get help faster and easier

New user?