適用於行動網頁簽署體驗的 Liquid Mode

簡介

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 文件只能在 HTML 文件的 <body> 中使用支援的 HTML 標記,如支援的 HTML 標記區段所述
    • 如果不支援的 HTML 標記存在於 HTML 文件的 body 中,則 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 相容合約

  1. 確認已在「Acrobat Sign 管理」選單中啟用 Liquid Mode:

    • 導覽至「傳送設定 > Liquid Mode」
      • 可在帳戶或群組層級修改此設定
    導覽至 Liquid Mode 控制項

  2. 使用下列任一方式提交單一 HTML 檔案:

    傳送 HTML 文件


支援的 HTML 標記

若要成功建立含有 Liquid Mode 檢視畫面的合約,HTML 文件不能包含 JavaScript 建構。

HTML 文件的 body 中只能使用以下標記:

類別

HTML 標記

影響 Liquid Mode 檢視畫面的屬性

限制

標頭

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

 

內容分區

<div>

align

 

分行

<br>

 

水平分隔線

<hr>

 

段落

<p>

align

 

影像

<img>

src、alt、height、width

請參閱「影像支援」區段

行內文字

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

 

有序清單

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

1. 支援巢狀表格

2. 支援表格中的表單欄位

表單欄位標籤

<label>

for

請參閱「表單欄位標籤」區段。

表單欄位分組

<fieldset>、<legend>

請參閱為欄位群組加標籤

影像

<img>

src、alt、height、width

影像大小加上整個 HTML 不得超過 400 KB。支援格式包括: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. Acrobat Sign 表單欄位包括在 <label> 標記中
    • <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>選擇您喜愛的主要顏色</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: 結構描述) 或網頁 URL (僅限 https: 結構描述) 形式提供
  • 支援格式包括:JPEGPNGGIFBMPTIFF
    • 若是動畫 GIF,系統會將第一個影格當作靜態影像使用
  • 從網頁 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]

以下文字標籤缺少 Sign 表單欄位:[+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 文件

Adobe Sign 中的傳統 PDF 檢視畫面

合約檢視畫面:

Liquid Mode檢視


已知問題與常見問題集

建議您在傳送給目標收件者之前,在編寫 HTML 時測試幾次 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)」或表單欄位是否為「選填」這類資訊,應該使用文字標籤在表單欄位規格中指定。  

  • 某些文字可能需要收集多組資訊。將其分割至多個表單欄位可簡化使用案例。例如,在上文的範例文件中,「主要信用卡名稱與卡號末 4 碼」就分割為「主要信用卡名稱」和「主要信用卡號末 4 碼」

  • 只能使用上文所列支援的 HTML 標記。請參閱說明 HTML 建構的區段

  • 使用相對座標和 {width: 30%} 這類位置,以便讓 HTML 重排為不同裝置寬度。CSS 中不應出現絕對頁面寬度。 

  • 如果 PDF 中包含表格或清單建構,則對應的 HTML 表示法應分別為表格或清單。唯一的例外是含有表單欄位的表格。如果表格具有表單欄位,相同的資訊需要以無表格形式呈現。

若要建立更豐富的表單填寫體驗,強烈建議編寫表單欄位時 ,使用所有驗證方法、格式運算式和條件式規則,以及 Sign 文字標籤提供的計算公式。

  • 如果表單欄位代表不同實體,則表單欄位名稱不得重複
  • 強烈建議將表單欄位括起來或使用「for」 屬性,讓每個表單欄位都有一個標籤
  • 如果表單欄位為選填,應在 Sign 文字標籤中指定。例如:
    • {{*S.I.N_es_:signer1}} 代表必填表單欄位
    • {{S.I.N_es_:signer1}} 代表選填表單欄位
  • Sign 文字標籤提供郵遞區號、身分證字號、日期、電子郵件、貨幣號碼等各種驗證方法,並提供範圍檢查和長度上限等功能。請善加利用
  • Sign 文字標籤也包含表單欄位的格式,例如日期格式、貨幣格式等。強烈建議您使用這些格式
  • 所有核取方塊都應有相關聯的標籤,例如:

<label> {{[]}} 是,我也希望購買我的信用評分</label>

  • 如果有表單欄位在紙本/PDF 表單中看起來像是核取方塊,但實際上具有互斥值 (例如是非題,或是此表單上的 Visa/MasterCard/AMEX 問題),請將所有表單欄位集結到一個群組中,並將其設為類型選項按鈕或下拉式功能表的表單欄位,而非個別的核取方塊,並加上標籤/標題

<fieldset>

<legend>付款選項:</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 文字標籤的尺寸,定義轉譯頁面上表單欄位的尺寸。Sign 文字標籤規格可用於縮短表單欄位尺寸。請前往 https://helpx.adobe.com/tw/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)}}

Adobe 標誌

登入您的帳戶