Webフォームレイアウト指定サンプル

この章では、Webフォームの入力画面、確認画面のレイアウトをユーザが手動で変更する場合の指定サンプルについてまとめます。
レイアウトは、[サイト管理] - [サイト詳細] - [Webフォーム詳細] - [Webフォーム詳細設定] サブウィンドウで変更します。

画面仕様詳細: [Webフォーム詳細設定] 画面のイメージおよび項目については、以下を参照してください。; 「サイト管理 - サイト - サブウィンドウ - Webフォーム設定詳細」

運用ガイド: Web フォームのレイアウト変更手順、機能の詳細については、以下を参照してください。; 「サイト関連設定 - [Webフォーム] を設定する - Webフォームを設定する - 入力、確認画面のレイアウトを変更する」

入力画面用サンプル

入力画面のレイアウト指定サンプルを次に載せます。fa-option-label タグにはラベルが、fa-option-input タグには入力フィールドが表示されます。

						
<table class="tbl-frm" role="presentation">
    <colgroup>
        <col class="width-30">
        <col class="width-70">
    </colgroup>
    <tbody>
        <tr>
            <th>
                <fa-option-label %オプションタイプ識別子の値%></fa-option-label>
            </th>
            <td>
                <fa-option-input %オプションタイプ識別子の値%></fa-optpion-input>
            </td>
        </tr>
    </tbody>
</table>

ポイント

"オプションタイプ識別子の値" 部分には、[Webフォームオプション詳細] サブウィンドウの [オプションタイプ識別子] に指定した値を記述してください。
たとえば、オプションタイプ識別子に "INQUIRY_PURPOSE" と指定した場合は、そのまま "INQUIRY_PURPOSE" と指定します。予約記号とは違い、"WEB_FORM_OPTION_NAME" や "WEB_FORM_OPTION_VALUE" は記述しない点に注意してください。
```
								
<fa-option-label %INQUIRY_PURPOSE%></fa-option-label>
								
								
```
運用ガイド

オプションタイプ識別子については、以下の章に含まれる図を参照してください。

「サイト関連設定 - [Webフォーム] を設定する - 項目を追加する」

画面仕様詳細

[Webフォームオプション詳細] サブウィンドウのイメージおよび項目については、以下を参照してください。

「サイト管理 - サイト - サブウィンドウ - Webフォームオプション詳細」

確認画面用サンプル

確認画面のレイアウト指定サンプルを次に載せます。

						
<table class="tbl-frm" role="presentation">
    <colgroup>
        <col class="width-30">
        <col class="width-70">
    </colgroup>
    <tbody>
        <tr>
            <th>
                <fa-option-label %オプションタイプ識別子の値% :refer-mode="true"></fa-option-label>
            </th>
            <td>
                <fa-option-input %オプションタイプ識別子の値% :refer-mode="true"></fa-optpion-input>
            </td>
        </tr>
    </tbody>
</table>

ポイント

確認画面サンプルでは、"fa-option-label" と "fa-option-input" の属性として :refer-mode="true" を追記しています。それ以外は二つのサンプルは同じです。