入力ステップの分割表示
フォームでは、入力画面を複数のステップに分割できます。例えば、次のようなフォームを作成できます。
step 商品選択
↓
step#2 お客様情報
↓
step#confirm 確認画面
↓
step#result 送信結果画面入力内容を段階的に取得したい場合や、長いフォームを分割したい場合に利用します。
複数ステップフォームの仕組み
フォームは現在のステップに応じて対応するブロックを表示します。
標準では以下のステップが用意されています。
ステップ（twig） | 説明 |
|---|---|
step（step） | 入力画面 |
step#reapply（step） | エラー時の再入力画面 |
step#confirm（confirm） | 確認画面 |
step#result（result） | 完了画面 |
複数ステップフォームでは、step#2 や step#hoge などの独自ステップを追加できます。
ステップの追加
任意のステップを追加するには、テンプレートに対応するブロックを追加します。
<!-- BEGIN step#2 --> <h2>お客様情報</h2> <form action="" method="post"> ... </form> <!-- END step#2 -->
{% if form.step == '2' %}
<h2>お客様情報</h2>
<form action="" method="post">
...
</form>
{% endif %}
ステップの移動
次のステップへ移動するには、step フィールドで遷移先を指定します。例では数値になっていますが任意の文字列を指定できます。
<input type="hidden" name="step" value="2">
<input type="hidden" name="step" value="2">
上記の場合、送信後に step#2 が表示されます。
入力内容の引き継ぎ
複数ステップフォームでは、前のステップで入力した内容を次のステップへ引き継ぐ必要があります。
そのために takeover を利用します。
<input type="hidden" name="takeover" value="{takeover}">
<input type="hidden" name="takeover" value="{{ form.fields.takeover }}" />
takeover がない場合、前のステップで入力した内容は保持されません。
複数ステップフォームでは、各ステップのフォームに takeover を含めてください。
前のステップへ戻る
前のステップへ戻る場合は ACMS_POST_Form_Chain を利用します。
<form action="" method="post">
<input type="hidden" name="takeover" value="{takeover}">
<input type="hidden" name="step" value="reapply">
<button type="submit" name="ACMS_POST_Form_Chain">戻る</button>
</form>
<form action="" method="post">
<input type="hidden" name="takeover" value="{{ form.fields.takeover }}">
<!-- Twigの場合、修正画面専用のステップ（reapply）がないため入力画面に戻るには「step」を指定します -->
<input type="hidden" name="step" value="step">
<button type="submit" name="ACMS_POST_Form_Chain">戻る</button>
</form>
実装例
以下は 2 ステップのフォーム構成例です。
step 入力画面１
↓
step#2 入力画面２
↓
step#confirm 確認画面
↓
step#result 送信結果画面<!-- BEGIN_MODULE Form -->
<!-- BEGIN step -->
<form action="" method="post">
@include("/contact/form/input.html")
<input type="hidden" name="step" value="2">
<input type="hidden" name="error" value="" />
<input type="hidden" name="id" value="sample">
<input type="hidden" name="takeover" value="{takeover}">
<button type="submit"name="ACMS_POST_Form_Confirm">次へ</button>
</form>
<!-- END step -->
<!-- BEGIN step#2 -->
<form action="" method="post">
@include("/contact/form/input2.html")
<input type="hidden" name="step" value="confirm">
<input type="hidden" name="error" value="2" />
<input type="hidden" name="id" value="sample">
<input type="hidden" name="takeover" value="{takeover}">
<button type="submit"name="ACMS_POST_Form_Confirm">確認画面へ</button>
</form>
<form action="" method="post">
<input type="hidden" name="step" value="">
<input type="hidden" name="id" value="sample">
<input type="hidden" name="takeover" value="{takeover}">
<button type="submit"name="ACMS_POST_Form_Chain">戻って修正</button>
</form>
<!-- END step#2 -->
<!-- BEGIN step#confirm -->
<form action="" method="post">
@include("/contact/form/confirm.html")
<input type="hidden" name="step" value="result">
<input type="hidden" name="id" value="sample">
<input type="hidden" name="takeover" value="{takeover}">
<input type="hidden" name="To[]" value="{email}" />
<input type="hidden" name="AdminReply-To[]" value="{email}" />
<button type="submit"name="ACMS_POST_Form_Submit">送信</button>
</form>
<form action="" method="post">
<input type="hidden" name="step" value="2">
<input type="hidden" name="id" value="sample">
<input type="hidden" name="takeover" value="{takeover}">
<button type="submit"name="ACMS_POST_Form_Chain">戻って修正</button>
</form>
<!-- END step#confirm -->
<!-- BEGIN step#result -->
<h2>送信完了</h2>
...
@include("/contact/form/confirm.html")
<!-- END step#result -->
<!-- END_MODULE Form -->
{% set form = module('V2_Form') %}
{% if form.step == 'step' %}
<form action="" method="post">
{{ include('/contact/form/input.twig', form.fields) }}
<input type="hidden" name="step" value="2">
<input type="hidden" name="error" value="step" />
<input type="hidden" name="id" value="sample">
<input type="hidden" name="takeover" value="{{ form.fields.takeover }}" />
<button type="submit"name="ACMS_POST_Form_Confirm">次へ</button>
</form>
{% endif %}
{% if form.step == '2' %}
<form action="" method="post">
{{ include('/contact/form/input2.twig', form.fields) }}
<input type="hidden" name="step" value="confirm">
<input type="hidden" name="error" value="2" />
<input type="hidden" name="id" value="sample">
<input type="hidden" name="takeover" value="{{ form.fields.takeover }}" />
<button type="submit"name="ACMS_POST_Form_Confirm">確認画面へ</button>
</form>
<form action="" method="post">
<input type="hidden" name="step" value="step">
<input type="hidden" name="id" value="sample">
<input type="hidden" name="takeover" value="{{ form.fields.takeover }}" />
<button type="submit"name="ACMS_POST_Form_Chain">戻って修正</button>
</form>
{% endif %}
{% if form.step == 'confirm' %}
<form action="" method="post">
{{ include('/contact/form/confirm.twig', form.fields) }}
<input type="hidden" name="step" value="result">
<input type="hidden" name="id" value="sample">
<input type="hidden" name="takeover" value="{{ form.fields.takeover }}" />
<input type="hidden" name="To[]" value="{{ form.fields.email.value }}" />
<input type="hidden" name="AdminReply-To[]" value="{{ form.fields.email.value }}" />
<button type="submit"name="ACMS_POST_Form_Submit">送信</button>
</form>
<form action="" method="post">
<input type="hidden" name="step" value="2">
<input type="hidden" name="id" value="sample">
<input type="hidden" name="takeover" value="{{ form.fields.takeover }}" />
<button type="submit"name="ACMS_POST_Form_Chain">戻って修正</button>
</form>
{% endif %}
{% if form.step == 'result' %}
<h2>送信完了</h2>
...
{{ include('/contact/form/confirm.twig', form.fields) }}
{% endif %}