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
- The setting can be modified at the account or group level
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:
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:
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.
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.
Ensure that Liquid Mode is enabled in the Acrobat Sign Admin menu:
Submitting a single HTML file using one of the following means:
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 |
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 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)}} |
{{Cmpy_es_:signer1:company}} |
|
|
{{N_es_:signer2:fullname}} |
|
{{Dte_es_:signer1:date}} |
|
{{Em_es_:signer1:email}} |
{{*Ttl_es_:sender:title}} |
|
{{userstamp_es_:signer1:stamp:repeat}} {{transstamp1_es_:transactionid:repeat}} |
|
{{!price}} {{price_es_:readonly}} |
|
{{address_es_:signer1}} {{*city_es_:signer1}} |
|
{{CB1_es_:checkbox(checked)}} |
|
{{(Red)Color_es_:signer1:label(“Red”)}} {{(Blue)Color_es_:signer1:label(“Blue”)}} {{(Green)Color_es_:signer1:label(“Green”)}} |
|
{{Image1_es_:signer1:inlineimage(4)}} |
|
{{Color_es_:signer1:dropdown(options="Red,Green,B lue”, values=”R,G,B”)}} |
|
{{companywebsite_es_:link(http://www.adobe.com):label(Adobe)}} |
|
{{*DriversLicense_es_:signer1:attachment}} |
|
{{Car_color_es:signer1:tooltip('Choose a color')}} | |
{{digsig1_es_:signer1:digitalsignature}} |
|
{{*Mobile_es_:signer1:phone}} {{d_es_:signer1:num(>0,<60)}} |
|
e.g. {{field_es_:showif(price>60)}} |
|
{{TV_es_:calc([SubTotal]+[Tax])}} |
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 |
|
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:
Form fields can be bound to labels using the HTML <label> tag in one of the following ways:
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:
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:
|
Labels can be specified for checkboxes in the following ways:
Labels can be specified for radio button options in the following ways:
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:
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:
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:
For Example:
<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>
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;
}
Images are supported with the following restrictions:
Liquid Mode does not support the following Acrobat Sign workflows:
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.
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:
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.
Form qualities that are prime targets for Liquid Mode creation are:
Descărcare
<!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 }}</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 }}</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]+" "+[LastName]+" "+[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>
Agreement view:
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.
<label> {{[]}} YES, I WOULD ALSO LIKE TO PURCHASE MY CREDIT SCORE</label>
<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>
<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)}}