第6回 フォームを作成してみよう

第5回では、ナビゲーションが表示できるようになりましたが、今回はフォームを利用できるようにする方法について解説します。

※このチュートリアルは a-blog cms v1.0.0b5 を元に書かれています。
現在の最新のシステムと内容が異なる場合がございます。
あらかじめご了承下さい。

---

PCのお問い合わせフォームは項目数が多いですが、今回のケータイサイト用のものはサンプルという事で簡単なフォーム（お名前・メール・コメント）とする事とします。

a-blog cmsを利用するサイトでフォームを設置する際には、他の部分と同様にモジュールを利用します。 contact.html には、以下のような記述になっています。全てのHTMLを掲載すると長くなりすぎてしまいますので、以下のファイルをダウンロードしてご覧ください。

• サンプルファイル 3KB

フォームモジュールでは、基本的に4つのステップのHTMLと、実際に送信するメールのテンプレート等を用意します。初期表示から(確認)ボタンを押して、エラーがあれば update.html が表示され、エラーが無い場合には confirm.html が表示されます。 確認表示用のconfirm.htmlから(修正)ボタンが押されれば update.html が、(送信)ボタンが押されれば result.html が表示されメールが送信される事になります。

<!-- BEGIN_MODULE Form -->
<form action="" method="post">

<!-- BEGIN step#apply -->
<!-- 初期表示用 -->
<!--#include file="/include/form/insert.html"-->
<!-- END step#apply -->

<!-- BEGIN step#reapply -->
<!-- 修正・エラー表示用 -->
<!--#include file="/include/form/update.html"-->
<!-- END step#reapply -->

<!-- BEGIN step#confirm -->
<!-- 確認表示用 -->
<!--#include file="/include/form/confirm.html"-->
<!-- END step#confirm -->

<!-- BEGIN step#result -->
<!-- 完了表示用 -->
<!--#include file="/include/form/result.html"-->
<!-- END step#result -->

</form>
<!-- END_MODULE Form -->

それでは、update.html を見てみる事にします。ここでは、名前の必須チェックとメールアドレスのフォーマットチェックを行っています。

<dl>
<dt>お名前：</dt>
<dd>
<input type="text" name="name" size="18" value="{name}" />
<input type="hidden" name="field[]" value="name" />
<input type="hidden" name="name:validator#required" />
</dd>
<!-- BEGIN name:validator --><dd>お名前が入力されていません。</dd><!-- END name:validator -->
<dt>メール：</dt>
<dd>
<input type="text" name="mail" size="18" value="{mail}" />
<input type="hidden" name="field[]" value="mail" />
<input type="hidden" name="mail:validator#email" />
</dd>
<!-- BEGIN mail:validator --><dd>メールが正しく入力されていません。</dd><!-- END mail:validator -->
<dt>コメント：</dt>
<dd>
<textarea name="comment" cols="20" rows="5">{comment}</textarea>
<input type="hidden" name="field[]" value="comment" />
</dd>
</dl>

<p><input type="submit" name="ACMS_POST_Form_Confirm" value="確認" /></p>

フォームの基本として、フォーム用の入力欄を1つ用意した際には、

<input type="hidden" name="field[]" value="name" />

のようなneme="field[]"を必ずセットで用意する事を行って下さい。また、入力のチェックについては、リファレンスにある フォームオプション をご覧ください。

また、フォームのチェック機能の他に、全角入力されたテキストを半角に変換したりするコンバート機能というものも実装されています。電話番号や郵便番号を整形するのに利用頂くと、フォームに「半角で入力してください」と書く必要がなくなります。

次に confirm.html の内容を見てみる事にします。 b5までのバージョンでは、このようにメールの送信先をこのHTML上で設定していますが、将来的にはこの設定がブラウザで出来るようになります。

<dl>
<dt>お名前：</dt>
<dd>{name}</dd>
<dt>メール：</dt>
<dd>{mail}</dd>
<dt>コメント：</dt>
<dd>{comment}[nl2br]</dd>
</dl>

<input type="hidden" name="field:takeover" value="{field:takeover}" />
<input type="submit" name="ACMS_POST_Form_Apply" value="戻る" />
<input type="submit" name="ACMS_POST_Form_Submit" value="送信" />

<input type="hidden" name="To[]" value="*****メール送信先****" />
<input type="hidden" name="From[]" value="{name}<{mail}>" />
<input type="hidden" name="Charset" value="ISO-2022-JP" />
<input type="hidden" name="SubjectTpl" value="/include/form/subject.txt" />
<input type="hidden" name="BodyTpl" value="/include/form/body.txt" />

<p>上記の内容で送信します。</p>

SubjectTpl , BodyTpl がメールのテンプレートを指定してます。 テンプレートの書き方は通常のHTMLのページと同じ事になります。

今回は input type="text" と textarea のサンプルでしたが、他の項目については、以下の場所にサンプルファイルがありますので、そちらを参考にしてください。

• http://(設置先)/sample/form.html

次回は、ケータイサイト制作の最終回になります。「第7回 カスタムフィールドを使ってみる」をご紹介致します。

---