動的フォームの基本
動的フォームはエントリーページに設置することができます。動的フォームはHTMLの知識のない人でもフォームを設置できる仕組みになっています。例えば採用ページのエントリーを書いて、更新者がそのページに採用フォームをつけることができます。
フォームでは以下のような種類のフォームパーツが用意されています。
- テキスト
- テキストエリア
- ラジオ
- セレクト
- チェックボックス
動的フォームの導入方法
動的フォームはコンフィグ管理の機能設定から機能を有効にすることができます。動的フォーム項目の動的フォームを利用可能にするにチェックをしてください。
動的フォームの有効化
エントリーの詳細ページを見てみるとエントリー管理ボタンのところに[フォーム]というボタンが追加されています。このボタンを押してエントリーに動的フォームを作っていきます。
動的フォームの編集ボタン
動的フォーム作成画面ではエントリーのユニットと同じようにフォームのパーツが追加できます。ここにはフォームIDを紐づけるフォームセットという項目があります。こちらにフォームIDを設定していきます。次は動的フォーム用のフォームIDの作り作り方について解説します。
動的フォーム編集画面
フォームIDを作成
フォームIDは通常のフォームと同じようにフォーム管理の[フォームIDを作成]ボタンから作っていきます。 フォームID、フォーム名、一般のメールテンプレート、管理者のメールテンプレート、管理者のメールアドレスを設定していきます。
メールテンプレートのパスについて
動的フォームのメールテンプレートはsystemのテーマフォルダに用意されています。通常のフォームのメールテンプレートは自分で自由にレイアウトができますが、動的フォームでは自由にレイアウトなどカスタマイズができません。動的フォームのメールテンプレートのパスは以下のようになります。
| SubjectTpl | /include/form/subject.txt |
|---|---|
| BodyTpl | /include/form/body.txt |
| AdminSubjectTpl | /include/form/adminsubject.txt |
| AdminBodyTpl | /include/form/adminbody.txt |
上記は /themes/system/include/ 以下に存在する各ファイルとなりますが、実際に使用する場合には本文など適宜カスタマイズが必要になるため、使用するテーマディレクトリへのコピーをしてカスタマイズ・利用をすることをお勧めします。
一例として、 /themes/使用テーマディレクトリ/recruit/form/ 以下に各ファイルをコピーしカスタマイズしたものを使用する場合の設定画面は以下のようになります。他の内容に動的フォームを使いたい場合には、 /themes/使用テーマディレクトリ/aaaaa/form/ のようにもう1セットコピーして利用すれば、各フォームに合わせたメールテンプレートが使用できます。
フォームID作成画面
動的フォーム画面からフォームIDをセット
動的フォームを設置したいエントリーに戻り、[フォーム]ボタンを押して動的フォーム作成画面で先ほど作成したフォームIDを設定してください。動的フォームで送信されたデータはこのフォームIDに蓄積されていきます。
動的フォームの項目を追加
フォームのパーツはテキスト、テキストエリア、ラジオ、セレクト、チェックボックスを追加することができます。フォームのパーツはエントリーのユニットと同じように項目を追加していってください。
動的フォーム編集ボタン
[フォーム]ボタンを押すとフォームの編集画面に移動します。ここからテキスト、テキストエリア、ラジオ、セレクト、チェックボックスなどフォームの項目を追加することができます。
動的フォーム編集画面
| ラベル | フォームの項目名 | {label} |
|---|---|---|
| 説明 | このフォームユニットの説明 | {caption} |
バリデータとコンバーターを使う
[入力チェック]のリンクをクリックすることでフォームの項目を必須にしたり、文字数制限をしたり、文字を変換したり設定することができます。フォームのバリデータとコンバーターの設定について一部ご紹介していきます。
必須にする
項目はrequiredを選択します。メッセージにエラーメッセージを入力してください。
必須入力
数値になっているかチェック
項目はdigitsを選択します。メッセージにエラーメッセージを入力してください。
数値かチェック
入力文字数を制限する
項目はminLengthか、maxLengthを選択します。値には制限したい文字数を入力し、メッセージにエラーメッセージを入力してください。
文字数のチェック
入力した文字を変換する
入力の変換 ( converter )を選択し、値に変換したい種類を入力してください。コンバーターの変換種類についてはリファレンスのconverter ( c )の項目を御参考ください。
「全角カタカナ」を「半角カタカナ」に変換
1つのフォーム項目に複数のオプションを設定することができます。フォームの項目を保存するとエントリーに動的フォームが設置されました。
動的フォーム完成例
標準提供のテンプレートの中には、説明 {caption} が使われておりません。入力した内容を表示させる際には、テンプレートのカスタマイズが必要です。