応用編 第2回：入力ステップを分割してみよう( 前編 )

入力ステップの分割

アンケートフォームや携帯用フォームなどで

アンケートのように入力項目が多くなりがちなフォームや、携帯など1度に表示させられる情報に限りがある場合、入力ステップを分割することがあります。

実習ファイル3

今回のチュートリアルでは、a-blog cmsのフォームで入力ステップを分割するための設定を紹介していきます。サンプルファイルも新しいものを用意しました。ダウンロードして、お使いのテスト環境に設置し、チュートリアルを進めてください。

今回のサンプルでは、色々なバリーデーターやコンバーターの使用例や、テンプレートタグの応用例を盛り込んでいます。ここで詳しく解説はしませんが、参考にしてみてください。

商品選択とお客様情報の入力ステップを分割する

前編と後編に分けてチュートリアルを進めていきます。まずは前編でしっかりと下準備をしましょう。

変更前のStep設計

1. 初期の入力画面
2. 再入力の画面
3. 確認画面
4. 結果画面

変更後のStep設計

1. 商品選択
2. お客様情報の入力
3. 確認画面
4. 送信画面

このように変更してみたいと思います。

予備知識：初期入力と、再入力は同じテンプレートを利用できる

変更後で、再入力の画面がなくなっていますが、今回は入力からエラー表示までを同じstep内で完結させてみたいと思います。今までの考え方だと、再入力画面( step#reapply )がテンプレートのベースになります。

今まで、step#reapplyには{var}や＜!-- BEGIN key:validator --＞のようなテンプレートタグが含まれていました。これらは初期の入力画面( step )に含まれていても影響がない記述です。前の画面で情報が入力されているときのみ有効になるタグなので、前の画面で情報が入力されていなければ、すべての記述は無視されます。

よって、再入力画面( step#reaply )をベースとした、入力フォーム部分のHTMLが書かれたファイルをインクルードして2つのステップで共有することもできます。入力と再入力を別のステップとして分けていれば、入力フォームの補足説明などを、インクルードするファイルの外に記述することで、初期の入力と再入力で変えたいところだけ振り分けられます。

基本はインクルードして、ステップ間で違う部分は別記します

<!-- BEGIN step -->
<h3>お問い合わせを入力してください</h3>
<!--#include file="/form/input.html" -->
<!-- END step -->

<!-- BEGIN step#reapply -->
<h3>お問い合わせを入力してください</h3>
<p>入力内容に不備があります。恐れ入りますが、エラーをご確認いただき入力を修正してください</p>
<!--#include file="/fomr/input.html" -->
<!-- END step#reapply -->

ステップ名を編集する

サンプルファイルでは商品選択とお客様情報の、それぞれの入力フォーム部分を個別のファイルに分けてインクルードしています。

個別でインクルードしています

<form action="?step=reapply" method="post">

<!--#include file="/sample3/itemSelect.html" -->
<!--#include file="/sample3/customerInfo.html" -->

<input type="hidden" name="step" value="confirm" />
<input type="hidden" name="id" value="sample" />
<input type="submit" class="overlook" name="ACMS_POST_Form_Confirm" value="送信内容の確認" />
</form>

stepからお客様情報の入力フォームを削除

はじめのステップで商品選択のみを行うので、最初のステップからはお客様情報の入力フォームを削除します。今回のステップ設計ではエラー時に自分自身のステップに返ってきてエラーを表示するので、form要素のaction属性に入っている?step=reapplyという記述も削除します。

お客様情報の入力フォームをインクルードしている記述

<!--#include file="/sample3/customerInfo.html" -->

step#reapplyをstep#2に改名し、商品選択の入力フォームを削除

次のステップではお客様情報の入力をします。step#reapplyとなっていますが、これをBEGINとENDの記述に気をつけてstep#2と改名してください。そして今度は商品選択の入力フォームを削除します。form要素のaction属性については、今度は?step=2とします。

商品選択の入力フォームをインクルードしている記述

<!--#include file="/sample3/itemSelect.html" -->

次回に続きます

今回の編集が終わった時点でのサンプルコードを用意してありますので、手順を確認しながら必要な編集ができているかどうか確認してください。この段階では、このテンプレートはフォームとして動作しません。

次回で、今回編集したステップが一連の入力フォームとして連続して画面遷移されるように編集します。

終了時点のサンプルコード

<!-- BEGIN step -->
<form action="" method="post">

<!--#include file="/sample3/itemSelect.html" -->

<input type="hidden" name="step" value="confirm" />
<input type="hidden" name="id" value="sample" />
<input type="submit" class="overlook" name="ACMS_POST_Form_Confirm" value="送信内容の確認" />
</form>
<!-- END step -->

<!-- BEGIN step#2 -->
<form action="" method="post">

<!--#include file="/sample3/customerInfo.html" -->

<input type="hidden" name="step" value="confirm" />
<input type="hidden" name="id" value="sample" />
<input type="submit" class="overlook" name="ACMS_POST_Form_Confirm" value="送信内容の確認" />
</form>
<!-- END step#2 -->