通过 Liquid Mode 改善移动 Web 签名体验

上次更新日期: 2025年6月11日

介绍

Liquid Mode 签名体验可根据收件人的设备类型改善文档的显示效果,从而减少了捏合和缩放的需要,并可轻松聚焦于需要填写的字段上。

为收件人生成的符合 Liquid Mode 规范的协议具有以下两个视图:

  1. PDF 视图:该视图是使用上传的 HTML 中的所有样式信息生成的。 该视图对应于可供下载的协议的已签名版本 - 与 Adobe Acrobat Sign 为所有协议生成的 PDF 视图别无二致。
  2. Liquid Mode 视图:该视图可对输入 HTML 文档进行重排,并针对小屏幕尺寸进行优化。 Liquid Mode 视图提供的是精心设置的体验,覆盖了原始 HTML 文档中指定的样式

界面允许您的收件人根据自己的喜好在 Liquid Mode 视图和传统的 PDF 视图之间轻松切换,并捕获您所期望的具有相同法律约束力的签名。

 

符合 Liquid Mode 规范的协议是使用单个 HTML 文件作为源内容创建的。

在这种情况下,上载的 HTML 文档中的 HTML 和表单字段构造将存在一些限制。 具体包括:

  • 必须使用单个 HTML 文档(即只能使用一个文件)创建协议
    • 如果使用多个文档创建协议,则只会生成 PDF 视图
  • HTML 文档中不得包含 JavaScript。 不允许将 <script> 标记用作内联 JavaScript 或对外部 JavaScript 文件的引用,也不允许将其用于 HTML 标签的属性
    • 如果在 HTML 文档中找到了 JavaScript,则 Acrobat Sign 只会创建 PDF 视图
  • HTML 文档的 <body> 中只能使用支持的 HTML 标记,如支持的 HTML 标签部分所述
    • 如果 HTML 文档的 body 中使用了不支持的 HTML 标签,则 Acrobat Sign 只能创建 PDF 视图

由于 Liquid Mode 视图提供的是精心设置的体验,因此将忽略 HTML 文件中指定的 CSS(仅限 Liquid Mode 视图),并且只有支持的 HTML 标记的属性才能影响 Liquid Mode 视图。 但是,PDF 视图不存在这些限制。 Acrobat Sign 可使用可用于支持标记的所有属性以及 HTML 文档中指定的 CSS 生成 PDF 视图。

Adobe Acrobat Sign 文本标记表示法用于指定 HTML 文档中的表单字段。

Liquid Mode 工作流

注释

如果启用了 Liquid Mode 功能,但出于某种原因无法生成 Liquid Mode 视图,则只能使用 PDF 视图生成协议。

发送给协议发件人的确认电子邮件将列出无法生成 Liquid Mode 视图的原因。

手机设备上当前支持 Liquid Mode,更多支持尚在开发中。


启用/发送符合 Liquid Mode 规范的协议

确保在 Acrobat Sign 管理员菜单中启用 Liquid Mode:

  • 导航至发送设置 > Liquid Mode
    • 可以在帐户或组级别修改设置
导航到 Liquid Mode 控件

使用以下任一方法提交一个 HTML 文件:

发送 HTML 文档


支持的 HTML 标记

要成功使用 Liquid Mode 视图创建协议,HTML 文档不得包含 JavaScript 构造。 

HTML 文档的正文中只能使用以下标记:

类别

HTML 标记

可影响 Liquid Mode 视图的属性

限制

表头

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

NONE

 

内容划分

<div>

align

 

断开

<br>

NONE

 

水平分隔线

<hr>

NONE

 

段落

<p>

align

 

图像

<img>

src、alt、height、width

请参阅“图像支持”部分

内联文本

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

NONE

 

已排序列表

<ol>、<li>

value、type、reversed、start

 

无序列表

<ul>、<li>

value、reversed、start

 

超链接

<a>

href

URL 协议仅限于 http、https 和 mailto

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

NONE

1. 支持嵌套表格

2. 支持表格中的表单字段

表单字段标签

<label>

请参阅“表单字段标签”部分。

表单字段分组

<fieldset>、<legend>

NONE

请参阅“标记字段组”部分。

图像

<img>

src、alt、height、width

图像加上整个 HTML 的大小应小于 400KB。 支持以下格式:JPEG、PNG、GIF、BMP 和 TIFF。 图像源必须是 HTTPs URL。


表单字段规范

表单字段需要使用 Adobe Acrobat Sign 文本标记表示法在 HTML 文档中指定。

下表显示了使用 Acrobat Sign 文本标记指定的示例表单字段:

Sign 文本标记

签名字段(签名、缩写签名、签名块、图章)

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

参与者图章和事务 ID

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

条件规则

例如,{{field_es_:showif(price>60)}}

计算型字段

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

注释

以下构造之外,所有其他 Acrobat Sign 表单字段结构体都受支持:

类别

不支持的构造

例外情况

数字签名表单字段

将不支持 :digitalsignature



预填工作流

将不支持 :prefill 指令。



超链接表单字段

将不支持 :page(N) 指令。

使用 http、https 和 mailto 以外其他协议的 :link

将支持 :signer1:everyone 指令。

未命名的表单字段

将不支持未命名的表单字段。

将支持未命名的复选框

重命名的表单字段

将不支持具有相同名称但不同指令的多个表单字段




表单字段标签

每个表单字段都应有一个关联的标签。 虽然并非每个表单字段都必须有关联的标签,但强烈建议为表单字段设置标签。

具体而言,在 Liquid Mode 下,标签具有以下用途:

  • 可使用标签增强字段的视觉呈现效果
  • 与字段关联的标签可提供辅助功能提示。 当某个字段具有焦点时,屏幕阅读器将可以使用标签向用户播报该字段
  • 可以通过单击标签在某个字段上设置焦点,或者当字段为单选按钮或复选框时,单击标签可切换值

可以通过以下某种方式使用 HTML <label> 标记将表单字段与标签绑定:

  1. 包含在 <label> 标记内的 Acrobat Sign 表单字段
    • <label>Signature: {{sig_es_:signer1:signature}}</label>
  2. <label> 标记的“for”属性可引用单字段的名称以将标记绑定到表单字段。
    • {{sig_es_:signer1:signature}} … <label for=”sig”>Signature: </label>

无法通过上述规则与表单字段绑定的标签将显示为未绑定标签文本。

此外,对于以下表单字段类型,Acrobat Sign 文本标记支持 :label 指令:

  • 文件附件
  • 超链接
  • 复选框
  • 单选按钮

Acrobat Sign 文本标记 :label 指令和 <label> 标记可通过以下方式进行组合:

表单字段类型

:label 指令的用途

HTML <label> 标记的用途

文件附件、

超链接

指定在表单字段框内显示的标签。

<label> 标记用于指定表单字段的标签或标题。

复选框、

单选按钮选项

指定表单字段的标签或标题。

如果表单字段中不存在 Acrobat Sign 文本标记 :label 指令,则 <label> 将代替该指令

如果同时存在 :label 和 <label>,则将无法创建 Liquid Mode。

示例:

  • {{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>
注释

可按照以下方式为复选框字段指定标签:

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

可按照以下方式为单选按钮选项指定标签:

  • {{(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>
注意

在 HTML 中,“for”属性通常引用字段 ID 值。  但 Liquid Mode 会使用“for”属性引用字段名称。  这可能会导致克隆的表单字段含混不清,因为同时存在多个表单字段实例具有完全相同的 Acrobat Sign 文本标记指令。  在这种情况下,我们需要避免使用“for”属性,因此必须通过将文本标记包含在 <label> 元素内来关联标签。

例如,在以下用例中,将为移动重排视图中的两个实例分别创建具有不同标签的克隆表单字段:

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

如果克隆的表单字段使用“for”属性指定标签,则引用将模糊不清,无法解析。  在这种情况下,将无法生成 Liquid Mode 视图。

 例如,以下用例将仅生成 PDF 视图:

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


标记字段组

多个标签可与一个表单字段关联。 如果要将一个标签/题注与字段组(特别是单选按钮字段组)关联,我们鼓励使用 fieldset 和 legend 元素。  fieldset 用于对元素进行分组,而 legend 用于为组提供题注/标签。  与标签类似,在 Liquid Mode 下,标签字段组具有以下好处:

  • 增强与字段组关联的题注/标题的视觉呈现效果
  • 提供良好的辅助功能体验。  屏幕阅读器将使用 legend 中的内容播报正确的字段组

例如:

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

注释

对于大多数文档,作者都不希望使用 fieldset 元素的默认呈现方式。 

可使用以下 CSS 删除边框:

    fieldset {

        border: none;

        margin: 0;

        padding: 0;

    }

图像支持

支持图像,但有以下限制:

  • 仅支持 <img> 元素
  • <img>src 可以作为嵌入式数据 (data: scheme) 或 Web URL(仅限 https: scheme)提供
  • 支持以下格式:JPEGPNGGIFBMPTIFF
    • 对于动画 GIF,将使用第一帧作为静态图像
  • 从 Web URL 检索到的图像大小限制为 5 MB


不支持的 Acrobat Sign 工作流

Liquid Mode 支持以下 Acrobat Sign 工作流:

  • 从多个文档创建的协议
  • 从非 HTML 文档创建的协议
  • 从库模板创建的协议
  • 以“草稿”或“正在编辑”状态创建的协议
  • 数字签名工作流
  • 书面签名工作流
  • 修改正在进行的工作流
  • 组中默认启用“预览”复选框的工作流
  • 已启用签名原因的协议
  • 已配置为在签名者每次单击签名字段时都要求其进行身份验证的协议

当尝试在上述工作流中生成 Liquid Mode 视图时,将仅使用 PDF 视图创建协议。  发送给协议发件人的确认电子邮件将列出无法生成 Liquid Mode 视图的原因。


Liquid Mode 错误通知

如果协议发件人尝试使用 Liquid Mode 视图生成协议,但 Acrobat Sign 却无法生成,则会在协议确认电子邮件中向发件人指出导致无法生成 Liquid Mode 视图的具体问题。 发件人可以解决报告的问题,并重新尝试以 Liquid Mode 视图生成协议。

报告的问题可分为以下几类:

  • 不支持的 HTML 构造
  • 不支持的 Acrobat Sign 文本标记
  • 不支持的 Acrobat Sign 工作流
  • Liquid Mode 内部错误

当服务器在尝试创建 Liquid Mode 视图时出现意外错误,则会发生 Liquid Mode 内部错误。

对于其他类型的错误,您可以在以下子部分中找到关于所报告问题的详细信息:

如果由于不支持的 HTML 构造而导致无法生成 Liquid Mode 视图,则发送给协议发件人的确认电子邮件中将包含以下一个或多个错误字符串:

错误字符串

不支持的元素 [+tagName]

不支持的 URL 协议 [+url]

不支持表格中的表单字段: [+tagName]

不支持嵌套表格

标签子项 [+tagName] 无效

有关详细信息,请参阅支持的 HTML 标签部分。

如果由于不支持的 Acrobat Sign 文本标记构造而导致无法生成 Liquid Mode 视图,则发送给协议发件人的确认电子邮件中将包含以下一个或多个错误字符串:

错误字符串

找不到引用的定义标记 [+shortName]

不支持预填字段 [+name]

不支持内部超链接 [+name]

仅复选框支持未命名字段

不支持具有相同名称和不同指令的字段 [+name]

不支持数字签名 [+name]

字段中不能同时包含标签元素和标签指令 [+name]

缺少与文本标记对应的签名表单字段: [+name]

有关详细信息,请参阅表单字段规范部分。

如果由于不支持的 Acrobat Sign 工作流而导致无法生成 Liquid Mode 视图,则发送给协议发件人的确认电子邮件中将包含以下一个或多个错误字符串:

错误字符串

协议为库模板

协议要求使用手写签名

协议已启用签名原因的 CFR 选项

协议已启用电子签名重新身份验证的 CFR 选项

有关详细信息,请参阅表单字段规范部分。


示例 HTML 文档:信用报告请求

生成 Liquid Mode 的主要目标是处理具有以下特点的表单:

  • 文档中包含许多大文本块,因而可能需要大量捏合和缩放操作
  • 表单中没有重叠的字段,且可接受使用 Liquid Mode 对字段进行重排

<!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 文档

Acrobat Sign 中的经典 PDF 视图

协议视图:

Liquid Mode 视图


已知问题和常见问题解答

我们建议您在编写 HTML 文档时进行几次测试,检查该文档中没有任何错误且符合总体流程标准,然后再将其发送给预期的收件人。

HTML 文档中的 HTML 元素需要遵循文档阅读顺序。 

应使用 CSS 属性“page-break-after”明确指定文档中的分页符,如下所示:

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

如果考虑使用重排重新设计文档,可能会增强整体的移动签名体验。 如果您不考虑重新设计文档,您可能需要保留原始 PDF 的整体外观,但以下几项除外:

  • 在 Liquid Mode 中,不会对页面级别的对象进行特殊处理。 如果 HTML 文档中有页眉、页脚、水印等页面级别对象, 则这些对象可能会显示在重排视图的内容中间位置。

  • 如果表单中包含表单字段填写说明(如“请打印”或“可选”)或格式说明(如“(mm/dd/yyyy)”),请不要在 HTML 中包含文本 - 某些信息(如格式说明“(mm/dd/yyyy)”,或者指示表单字段是否是“可选”的说明)应使用文本标记在表单字段规范中进行指定。  

  • 某些文本可能需要收集复合信息集。 将这些文本拆分为多个表单字段将可以简化用例。 例如,在上面的示例文档中,“NAME & LAST 4 DIGITS OF MAJOR CREDIT CARD”已拆分为“NAME OF MAJOR CREDIT CARD”和“LAST 4 DIGITS OF MAJOR CREDIT CARD”

  • 请仅使用上面列出的支持 HTML 标记。 请参阅有关 HTML 构造的部分。

  • 请使用相对坐标和位置,如 {width: 30%},以便 HTML 可以重排以适应不同的设备宽度。 CSS 中不应存在绝对页面宽度。 

  • 如果 PDF 中包含表格或列表构造,则对应的 HTML 表示形式应分别为表格或列表。 唯一的例外是具有表单字段的表格。 如果表格中有表单字段,则需要在没有表格的情况下呈现相同的信息。

要创建更加丰富的在线表单填写体验,强烈建议使用 Sign 文本标记提供的所有验证、格式表达式和条件规则以及计算公式创建表单字段。

  • 如果用于表示不同的实体,则表单字段的名称需要是唯一的
  • 强烈建议为每个表单字段都设置一个标签,方法是将表单字段包含在标签内或使用“for”属性
  • 如果表单字段为可选字段,则应在 Sign 文本标记中指定。 例如:
    • {{*S.I.N_es_:signer1}} 表示必填的表单字段
    • {{S.I.N_es_:signer1}} 表示可选的表单字段
  • Sign 文本标记提供了对 zip、ssn、日期、电子邮件、货币数值以及范围检查和最大长度等项目的验证。 请使用这些验证
  • Sign 文本标记还包含表单字段的格式,如日期格式、货币格式等。 强烈建议您使用这些格式。
  • 所有复选框都应具有与其关联的标签,例如:

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

  • 如果纸质表单/PDF 表单中存在看起来像复选框但具有互斥值(如“是/否”问题或“Visa/MasterCard/AMEX”问题)的表单字段,请将所有这些表单字段合并为一个组,使其成为单选按钮或下拉菜单类型的表单字段(而不是将其保留为单个复选框),然后添加标签/标题     

<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 文本标记还可以根据页面上呈现的签名文本标记的尺寸定义表单字段在已呈现页面上的尺寸。 Sign 文本标记规范中提供了缩短表单字段尺寸的各种方法。 请在 https://helpx.adobe.com/cn/sign/using/text-tag.html 中搜索“缩短文本标记”和“长文本标记”。 一种常用的技术方法是在 HTML 文档的末尾定义一个部分,其中包含适用于很长的文本标记的定义标记,并在 HTML 正文中使用引用标记。 以下是一些定义标记的示例:

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