モバイル Web 署名エクスペリエンスの Liquid Mode

注意:

Liquid Mode は現在、NA1、NA2、および NA4 環境でのみ使用できます。

ここから環境をご確認いただけます >

概要

Liquid Mode」署名エクスペリエンスにより、受信者のデバイスの種類に基づいて文書の表示が調整され、ピンチやズームの必要性が減り、入力が必要なフィールドに簡単に焦点を合わせることができます。

Liquid Mode の遵守契約書は、受信者に対して次の 2 種類の表示形式で作成されます。

  1. アップロードされた HTML に存在するすべてのスタイル情報を使用して作成された PDF ビュー。これは、ダウンロード可能な契約書の署名済みバージョンに対応し、Adobe Sign がすべての契約書に対して生成する PDF ビューと同じ
  2. 入力された HTML ドキュメントをリフローし、小画面サイズに最適化した Liquid Mode のビュー。Liquid Mode 版では、元の HTML 文書で指定されているスタイルが上書きされ、高度にキュレートされたビューになっている

このインターフェイスを使用すると、受信者は、好みに応じて、文書の Liquid Mode と従来の PDF ビューを簡単に切り替えることができ、法的に拘束力のある同様の署名を取得できます。

 

Liquid Mode の遵守契約書は、ソースコンテンツとして単一の HTML ファイルで作成されます。

HTML およびアップロードされた HTML 文書のフォームフィールド構成にはいくつかの制限事項があります。特に次のオプションに注意してください。

  • 契約書は単一の HTML 文書であること(1 ファイルのみ)
    • 契約書の作成に複数のドキュメントが使用されている場合は、PDF ビューのみが生成される
  • HTML 文書には JavaScript を含めることはできない。インラインの JavaScript、外部 JavaScript ファイルへの参照、HTML タグの属性のいずれにおいても、<script> タグを使用することはできない
    • HTML 文書内に JavaScript が見つかった場合、Adobe Sign では PDF ビューのみが作成される
  • HTML 文書では、HTML 文書の <body> でサポートされている HTML タグのみ使用できる。詳細については、「サポートされている HTML タグ」セクションを参照のこと。
    • サポートされていない HTML タグが HTML 文書の本文に含まれている場合、Adobe Sign では PDF ビューのみが作成される

「Liquid Mode」ビューは高度にキュレートされているため、HTML ファイルで指定された CSS は無視され(Liquid Mode ビューの場合のみ)、サポートされている HTML タグの属性のみが Liquid Mode ビューに影響します。ただし、PDF ビューにはこのような制限はありません。Adobe Sign では、サポートされているタグで使用可能な属性のフルガモットと、HTML 文書で指定されている CSS を使用して PDF ビューを生成します。

HTML 文書のフォームフィールドを指定するには、Adobe Sign テキストタグの表記法を使用します。

Liquid Mode のワークフロー

注意:

Liquid Mode 機能が有効であっても、Liquid Mode ビューが何らかの理由で生成できない場合、契約書は PDF ビューのみで作成されます。

送信者に送信される確認メールには、Liquid Mode ビューが生成できなかった理由が記載されます。

Liquid Mode は現在、携帯電話デバイスでサポートされており、さらに対応を拡げるように開発が進められています。


Liquid Mode の遵守契約書の有効化/送信

  1. Adobe Sign 管理メニューで「Liquid Mode」が有効になっていることを確認します。

    • 送信設定/Liquid Mode に移動します
      • この設定は、アカウントまたはグループレベルで変更できます
    Liquid Mode のコントロールに移動

  2. 次のいずれかの方法で、単一の HTML ファイルを送信します。

    HTML 文書を送信


サポートされている HTML タグ

Liquid Mode ビューで契約書を正常に作成するには、HTML 文書に JavaScript 構成を含まないようにします。

HTML 文書の本文で使用できるのは次のタグのみです。

カテゴリー

HTML タグ

Liquid Mode ビューに影響する属性

制限

ヘッダー

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

なし

 

コンテンツ分割

<div>

整列

 

区切り

<br>

なし

 

水平ルール

<hr>

なし

 

段落

<p>

整列

 

画像

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

対象

フォームフィールドラベル」セクションを参照のこと。

フォームフィールドのグループ化

<fieldset>、<legend>

なし

フィールドグループのラベル付け」を参照のこと。


フォームフィールドの仕様

フォームフィールドは、Adobe Sign テキストタグ表記を使用して HTML 文書で指定する必要があります。

次の表に、Adobe 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}}

事前入力フィールド

{{price_es_:prefill}}

参加スタンプとトランザクション 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)}}

条件ルール

e.g. {{field_es_:showif(price>60)}}

計算フィールド

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

注意:

Adobe Sign フォームフィールドの構成は、次のものを除きすべてサポートされています。

カテゴリー

サポートされていない構成

除外(以下に該当する場合は処理が完了されない可能性があります)

電子署名フォームフィールド

:digitalsignature は非サポート



事前入力ワークフロー

:prefill ディレクティブは非サポート



複数署名者のワークフロー

:signer2:signer3 などは非サポート

:sender ディレクティブは非サポート

:signer1 ディレクティブはサポート

ハイパーリンクフォームフィールド

:page(N) ディレクティブは非サポート

http、https、mailto 以外のプロトコル付き :link

:signer1 および :everyone ディレクティブはサポート

無名フォームフィールド

無名フォームフィールドは非サポート

無名チェックボックスはサポート

名前変更フォームフィールド

ディレクティブが異なる同じ名前の複数フォームフィールドは非サポート




フォームフィールドラベル

各フォームフィールドには、関連付けられているラベルが必要です。すべてのフォームフィールドにラベルが必須というわけではありませんが、フォームフィールドにラベルを付けることを強くお勧めします。

具体的には、Liquid Mode の場合:

  • ラベルは、フィールドの表示を視覚表現を強調するのに使用
  • フィールドに関連付けられたラベルは、アクセシビリティのヒントを提供。フィールドにフォーカスがある場合、スクリーンリーダーはラベルを使用してフィールドをユーザーにアナウンス
  • ラベルをクリックしてフィールドにフォーカスを設定するか、ラジオボタンまたはチェックボックスの場合は、ラベルをクリックすると値が切り替わる

フォームフィールドは、次のいずれかの方法で HTML <label> タグを使用してラベルにバインドできます。

  1. <label> タグ内に Adobe Sign フォームフィールドを囲む
    • <label>Signature: {{sig_es_:signer1:signature}}</label>
  2. <label> タグの “for” 属性は、フォームフィールドの名前を参照してフォームフィールドにバインド可能
    • {{sig_es_:signer1:signature}} … <label for=”sig”>Signature: </label>

上記のルールでフォームフィールドにバインドできないラベルは、バインドされていないラベルテキストとしてレンダリングされます。

また、Adobe Sign テキストタグで、:label ディレクティブは、次のフォームフィールドタイプでサポートされています。

  • 添付ファイル
  • ハイパーリンク
  • チェックボックス
  • ラジオボタン

Adobe Sign テキストタグの :label ディレクティブと <label> タグは、次の方法で組み合わせることができます。

フォームフィールドタイプ

:label ディレクティブの役割

HTML <label> タグの役割

添付ファイル,

ハイパーリンク

フォームフィールドボックス内に表示されるラベルを指定

<label> タグは、フォームフィールドのラベルまたはヘッダーを指定

チェックボックス,

ラジオボタンのオプション

フォームフィールドのラベルまたはヘッダーを指定

Adobe 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” 属性が使用されます。  これにより、複製されたフォームフィールドがあいまいになる場合があります。この場合、Adobe Sign テキストタグディレクティブがまったく同じフォームフィールドのインスタンスが複数存在します。  このような場合、“for” 属性を使用しないで、<label> 要素内にテキストタグを囲むことでラベルを関連付ける必要があります。

例えば次のように使用すると、モバイル reflow ビューの 2 つのインスタンスごとに異なるラベルを持つ複製フォームフィールドが作成されます。

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


フィールドグループへのラベル付け

ラベルは単一のフォームフィールドに関連付けられます。ラベル/キャプションをフィールドのグループ(特にラジオボタンのグループ)に関連付ける場合は、フィールドセットおよび凡例要素の使用を推奨します。  フィールドセットは要素をグループ化するために使用され、凡例はグループのキャプション/ラベルを提供するために使用されます。  ラベルと同様に、Liquid Mode の利点は以下のとおりです。

  • フィールドのグループに関連付けられたキャプション/見出しの視覚表現の強化
  • 優れたアクセシビリティ。  凡例コンテンツを使用すると、スクリーンリーダーはフィールドのグループを正しくアナウンスします。

次に例を示します。

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

注意:

ほとんどの文書では、作成者はフィールドセットのデフォルトのレンダリングを必要としません。 

バウンディングボックスは、次の CSS で削除できます。

    fieldset {

        border: none;

        margin: 0;

        padding: 0;

    }

画像のサポート

サポートされる画像には、次のような制限があります。

  • <img> 要素のみがサポートされます
  • <img>src は、埋め込みデータ(data: スキーム)または Web URL(https: スキームのみ)として指定できます
  • JPEGPNGGIFBMP および TIFF の各形式がサポートされます
    • アニメーション GIF の場合、最初のフレームが静止画像として使用されます
  • Web URL から取得される画像のサイズは、5 MB に制限されます


サポートされていない Adobe Sign ワークフロー

Liquid Modeでは、次の Adobe Sign ワークフローはサポートされていません

  • 複数のドキュメントで構成されている契約書
  • 非 HTML 文書で作成された契約書
  • ライブラリテンプレートで作成された契約書
  • DRAFT または AUTHORING ステータスで作成された契約書
  • 電子署名ワークフロー
  • 複数署名者のワークフロー
  • 手書き署名ワークフロー
  • フライトワークフローでの変更
  • Web フォーム
  • デフォルトでプレビューチェックボックスが有効になっているグループからのワークフロー
  • 署名理由が有効になっている契約書
  • 署名者が署名フィールドをクリックするたびに、署名者に毎回認証を要求するように設定された契約書

上記のワークフローで Liquid Mode のビューを作成しようとすると、PDF ビューのみで契約書が作成されます。  送信者に送信される確認メールには、Liquid Mode が生成できなかった理由が列挙されます。


Liquid Mode のエラー通知

送信者が Liquid Mode ビューで契約書を作成しようとしたが、Adobe Sign でそれを生成できなかった場合、Liquid Mode ビューで作成できなかった特定の問題が記載された契約書確認メールが送信者に送信されます。送信者は、報告された問題に対処し、その後の試行で Liquid Mode ビューで契約書作成を試みることができます。

報告された問題は、次のカテゴリにグループ化できます。

  • サポートされていない HTML 構成
  • サポートされていない Adobe Sign テキストタグ
  • サポートされていない Adobe Sign ワークフロー
  • Liquid Mode の内部エラー

Liquid Mode ビューを作成しようとしているときにサーバーが予期しないエラー状態になった場合に、Liquid Mode の内部エラーが発生します。

その他のエラーカテゴリについては、次のサブセクションで報告された問題の詳細を確認してください。

サポートされていない HTML 構成のために Liquid Mode ビューを生成できない場合、送信者に送信される確認メールには、次のエラー文字列が 1 つ以上含まれます。

エラー文字列

サポートされていない要素 [+tagName]

サポートされていない URL プロトコル [+url]

テーブルのフォームフィールドはサポートされていません [+tagName]

テーブルの挿入はサポートされていません

無効なラベルの子 [+tagName]

詳細については、「サポートされている HTML タグ」のセクションを参照してください。

サポートされていない Adobe Sign テキストタグ構成のために Liquid Mode ビューを生成できない場合、送信者に送信される確認メールには、次のエラー文字列が 1 つ以上含まれます。

エラー文字列

参照 [+shortName] の定義タグが見つかりません

事前入力フィールドはサポートされていません [+name]

内部ハイパーリンクはサポートされていません [+name]

名前のないフィールドは、チェックボックスでのみサポートされています

名前が同じでディレクティブが異なるフィールドはサポートされていません [+name]

電子署名はサポートされていません [+name]

フィールドには、ラベル要素とラベルディレクティブの両方が含まれていない可能性があります [+name]

テキストタグ: [+name] の Sign フォームフィールドがありません

詳細については、「フォームフィールドの仕様」セクションを参照してください。

サポートされていない Adobe Sign ワークフローのために Liquid Mode ビューを生成できなかった場合、送信者に送信される確認メールには、次のエラー文字列が 1 つ以上含まれます。

エラー文字列

契約書はライブラリテンプレートです

契約書では手書き署名が必須です

契約書では、署名理由の CFR オプションが有効になっています

契約書で、電子サイン再認証の CFR オプションが有効になっています

署名者が複数いる契約書はサポートされていません

詳細については、「フォームフィールドの仕様」セクションを参照してください。


HTML 文書のサンプル:クレジットレポートのリクエスト

Liquid Mode 作成の主要なターゲットとなるフォーム品質は次のとおりです。

  • 多くのピンチやズームを必要とするような、テキストブロックが大きいドキュメント
  • フィールドのオーバーラップがないフォームで、フィールドの Liquid Mode フローが可能なもの

ダウンロード

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <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>サンプル企業</b></h2>

            <h1 class="h1_header">自分の無料クレジットレポートを取得するためのサンプルリクエスト</h1>

        </div>

        <div class="body">

            <h3>サンプルの重要情報と手順:</h3>

            <p>お客様の個人情報を保護するために、弊社はあなたの身分証明書を検証してからあなたのクレジットレポートを<u>確認済み/u>の

                自宅住所に送付します。次の表面と裏面のコピーを提供する必要があります:</p>

            <ul class="info">

              <li class="info__item">政府発行の 2 種類の身分証明書</li>

              <li class="info__item">いずれかの身分証明書で住所が最新ではない場合は、<u>現在の住所</u>を示す追加の文書(公共料金請求書など)も提供する<u>必要があります</u>。</li>

              <li class="info__item">お客様が<b>社会保険番号</b>を提供された場合、弊社は記録と相互参照し、お客様に正しい情報を開示いたします。これがわかっていると、他者の身元確認情報(名前や住所など)が提供した情報と似ている場合に備えて、遅延や混乱を避けることができます。</li>

              <li class="info__item">証拠として<b>クレジットカード</b>の明細書または<b>クレジットカード</b>のコピーを提供される場合は、必ず個人情報を<b>黒塗り</b>してください。</li>

            </ul>

            <p>お客様がフォームに入力された情報は、お客様の身元を確認するために使用するとともに、お客様のクレジットレポートの更新にも使用する場合があります。このような更新情報は、お客様のクレジットファイルの一部として通常のコースで保存、保護、使用、および/または開示されます。SAMPLE COMPANY のプライバシー慣行の詳細については、弊社のプライバシーポリシー(https://www.adobe.com/privacy/policy.html)を参照してください。明確にするために、どのような場合でも、弊社はお客様から合理的な身分証明を得る義務を順守していることを示すために、お客様から提供された情報のコピーを保持します。

            </p>

            <p>記入済みフォームに身分証明書を添えて <b>Lorem inseam dolor sit amen, consenttetur</b>宛に送信するか、ファックスで<b>XXX-XX-XXXX までご送付ください。</b>X-Y 日以内に送信いただければ幸いです。クレジットレポートの修正が必要な場合は、パッケージに含まれているクレジットレポートの更新フォームに記入するか、<a href="http://sampleurl">SampleURL</a> にアクセスして、サンプルアシスタンスの「ファイリング方法」をクリックしてください。

            </p>

        </div>

        <div class="form">

            <div class="columns-3">

                <div class="item">

                    <p class="textTag">{{*LastName_es_:signer1}}</p>

                    <label for="LastName">姓</label>

                </div>

                <div class="item">

                    <p class="textTag">{{*FirstName_es_:signer1}}</p>

                    <label for="FirstName">名、イニシャル</label>

                </div>

                <div class="item">

                    <p class="textTag">{{Suffix_es_:signer1}}</p>

                    <label for="Suffix">接尾辞(Sr.、Jr.など)</label>

                </div>

            </div>

            <div class="address">

                <div class="item big">

                    <p class="textTag">{{*StreetAddress_es_:signer1&nbsp;}}</p>

                    <label for="StreetAddress">現在の住所</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">市町村</label>

                </div>

                <div class="item">

                    <p class="textTag">{{*Prov_es_:signer1}}</p>

                    <label for="Prov">都道府県</label>

                </div>

                <div class="item">

                    <p class="textTag">{{*Zip_es_:signer1:zip}}</p>

                    <label for="Zip">郵便番号</label>

                </div>

            </div>

            <h2>過去 3 年以内の以前のアドレス(ES)</h2>

            <div class="address">

                <div class="item big">

                    <p class="textTag">{{*StreetAddressPr_es_:signer1&nbsp;}}</p>

                    <label for="StreetAddressPr">前の住所</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">市町村</label>

                </div>

                <div class="item">

                    <p class="textTag">{{*PrvPr_es_:signer1}}</p>

                    <label for="PrvPr">都道府県</label>

                </div>

                <div class="item">

                    <p class="textTag">{{*ZipPr_es_:signer1:zip}}</p>

                    <label for="ZipPr">郵便番号</label>

                </div>

            </div>

            <div>

                <p class="textTag">{{*EmailAddress_es_:signer1:isemail}}</p>

                    <label for="EmailAddress">電子メール</label>

            </div>

            <div class="columns-2">

                <div class="item">

                    <p class="textTag">{{$DATEOFBIRTH}}</p>

                    <label for="Date">生年月日</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">主要なクレジットカードの名前:</label>

                </div>

                <div class="item">

                    <p class="textTag">{{$LAST4}}</p> <label for="Last4">主要なクレジットカードの最後の 4 桁:</label>

                </div>

            </div>

            <div class="columns-2">

                <div class="item">

                    <p class="textTag">{{*Signature_es_:signer1:signature}}</p><label for="Signature">署名</label>

                </div>

                <div class="item">

                    <p class="textTag">{{*DateOfSignature_es_:signer1:date}}</p><label for="DateOfSignature">日付</label>

                </div>

            </div>

            <div class="checkbox">

                 <label class="underline">{{$PAY}}  はい、サンプル会社のスコア* も $X.XX(税込み)で購入します</label>

            </div>
            <fieldset>
            <legend> 私は、サンプル会社が私のクレジットカードに支払いを請求することを許可します:</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">カード所有者名:</label>

                <p>{{$CALCULATEDCARDHOLDERNAME}}</p>

            </div>

            <div class="card-info">

                <label for="CardNumber">カード番号:</label>

                <p class="card-number">{{*CardNumber_es_:signer1}}</p> <label for="ExpiryDate">有効期限:</label>

                        <p class="expiry-date">{{$EXPIRYDATE}}</p>

            </div>

            <div class="note">

                <p>注:小切手および現金の支払いはできません。カード所有者の名前は、依頼者の名前と同じである必要があります。</p>

            </div>

        </div>

        <div class="footer">

            <p>*サンプル会社の XY は、サービスプロバイダがクレジットおよびサービスのアプリケーションを評価する際に使用する製品です。これはお客様のサンプルクレジットレポートには含まれませんが、計算時にクレジットファイル内の特定の情報に基づいています。Lorem Ipsem は、一部の金融会社でも使用されている Lorem Ipsem とは異なります。サンプル会社は、Lorem Ipsem の購入如何にかかわらず、サンプルレポートを無料で提供します。<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.サンプル会社では、さらにサンプルサービスを提供できます:</b> サンプルアドレス電話: 1-XXX-XXX-XXXX サンプルの電話: 1-XXX-XXX-XXXX</p>

        </div>

    </div>

    <! --  改ページ -->

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

    <! -- 署名テキストタグ定義 -->

    {{#REMOVE_PAGE_FROM_OUTPUT}}

   

    <! -- チェックボックス -->

    <p>{{#PAY=*Pay_es_:signer1:checkbox}}</p>

 

    <! --支払いがオンになっている場合に有効にするオプションボタンと条件付きルール -->

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

 

    <! -- ドロップダウン -->

    {{#NAMEMAJORCARD=*NameMajorCard_es_:dropdown(options="Visa,MasterCard,AMEX,Discover")}}

 

    <! -- 計算済みフィールド -->

    <p>{{#CALCULATEDCARDHOLDERNAME=*CardholderName_es_:signer1:calc([FirstName]+"&nbsp;"+[LastName]+"&nbsp;"+[Suffix])}}

     

    <! -- 正規表現のフォーマット検証 -->

    <p>{{#LAST4=*Last4_es_:signer1:custom(regexp="^[0-9]{4}$")}}

    <p>{{#CREDITCARDNUMBER=*CardNumber_es_:signer1:custom(regexp="^[0-9]{16}$")}}</p>

 

    <! -- 日付検証 -->

    <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ビュー


既知の問題と FAQ

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 構成」のセクションを参照してください。

  • HTML が異なるデバイス幅にリフローできるように、{width: 30%} のような相対座標や配置を使用してください。CSS に絶対ページ幅を指定しないでください。 

  • PDF にテーブルまたはリスト構造が含まれている場合、対応する HTML 表現はそれぞれテーブルまたはリストにする必要があります。唯一の例外は、フォームフィールドを持つテーブルです。テーブルにフォームフィールドがある場合は、同じ情報をテーブルなしで表示する必要があります。

オンラインフォームの入力を快適にするには、Sign テキストタグが提供するすべての検証、書式、条件付きルール、および計算式を使用してフォームフィールドを作成することを強くお勧めします。

  • フォームフィールドの名前は、異なるエンティティを表す場合、一意にする必要があります
  • 各フォームフィールドには、フォームフィールドを囲むか “for” 属性を使用してラベルを作成することを強くお勧めします
  • フォームフィールドがオプションの場合は、Sign テキストタグで指定する必要があります。次に例を示します。
    • {{*S.I.N_es_:signer1}} は必須フォームフィールドを表す
    • {{S.I.N_es_:signer1}} はオプションのフォームフィールドを表す
  • Sign テキストタグは、郵便番号、SSN、日付、電子メール、通貨値に関する範囲チェックや最大長などによるさまざまな検証を提供します。どうぞお試しください
  • また、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/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)}}

アドビのロゴ

アカウントにログイン