使用手冊 取消

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

 

Adobe Acrobat Sign 指南

新功能

開始使用

管理

傳送、簽署與管理合約

進階合約功能與工作流程

與其他產品整合

Acrobat Sign 開發人員

支援與疑難排解

簡介

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 的主要目標表單具有以下特質:

  • 含有大面積文字區塊,可能需要進行大量捏合和縮放操作的的文件
  • 沒有重疊的欄位,且可接受 Liquid Mode 欄位排版的表單


已知問題與常見問題集

更快、更輕鬆地獲得協助

新的使用者?