項目と外観の変更
PHPメールフォームは、Blogger、MovableTypeのようにデザインがプログラムから分離されているテンプレート方式を用いています。 テンプレートファイルは普通のHTMLファイルです。このページではデザインを変更する際の注意点を述べます。
- ファイル構成
- フォームの項目を追加・削除する
- 複数選択のフォーム項目を追加する
- フォーム要素のname属性は2文字以上にする
- 必須のテキスト項目を設定する
- 必須項目の自動チェックを設定する(JavaScript)
- フォームページ(_1default.html)の注意点
- 確認ページ(_2confirm.html)の注意点
- 送信しましたページ(_3thanks.html)の注意点
- ログ閲覧ページ(_4view.html)の注意点
- メールテンプレート(_5mail_admin.txt、_6mail_user.txt)の注意点
- テンプレート変数
- 繰り返し構造のテンプレート変数 (フォームページ)
- 繰り返し構造のテンプレート変数 (ログ閲覧ページ)
- 以前のバージョンの情報
ファイル構成
PHPメールフォームは以下のファイルで構成されています。デザイン変更の際は、HTMLファイル、CSSファイルを変更します。
| Ver. | ファイル・ フォルダ名 | 役割 |
|---|---|---|
| 0.1b- |  data |
問い合わせデータ、スパム記録などを保存するフォルダ。属性757、777に設定する。 |
| 0.1b- |  _1default.html |
メールフォームページのテンプレートHTMLファイル。 |
| 0.1b- | _2confirm.html |
確認ページのテンプレートHTMLファイル。 |
| 0.1b- | _3thanks.html |
送信しましたページのテンプレートHTMLファイル。 |
| 0.1b- | _4view.html |
ログ閲覧ページのテンプレートHTMLファイル。 |
| 0.3- | _5mail_admin.txt | 管理者向けメールのテンプレートテキストファイル。 |
| 0.3- | _6mail_user.txt | ユーザ向けメールのテンプレートテキストファイル。 |
| 0.1b- |  _common.css |
各ページ共通のCSSファイル。 |
| 0.1b-0.3 | _form.js | Ver.0.31でファイル名が変更されました。
必須入力チェックのJavaScript実装ファイル。 |
| 0.31- | jform.js | |
| 0.1b- |  config.php |
ユーザ設定のPHPファイル。 |
| 0.1b-0.3 | form.php |
Ver.0.31でファイル名が変更されました。
PHPメールフォームの本体。 |
| 0.31- | jform.php |
フォームの項目を追加・削除する
※下記の内容はVer.0.3以降の場合に限られます。Ver.0.1b-0.24bをお使いの場合は、 以前のバージョンの説明をご覧下さい。
ここでは下記のようなテキスト入力ボックスを追加する例を説明します。フォームページ(_1default.html)と、 確認ページ(_2confirm.html)を変更します。
1) フォームページ(_1default.html)の変更
フォームページに<input type="text">要素を追加します。name属性はnew1としました。
value属性に{$_POSTVAL_new1}を記述して、確認ページから戻ったときに値を復帰できるようにします。
2) 確認ページ(_2confirm.html)の変更
確認ページで入力データが表示されるように、下記のように記述を追加します。
先ほどのname属性の前に「_POSTHTML_」をつけたテンプレート変数をHTMLに記述します。
これによって、{$_POSTHTML_new1}とした部分が実際の入力内容に置き換えられ、確認ページで表示されるようになります。
項目を削除する場合は、フォームページ、確認ページから対応する項目を削除します。
複数選択肢のフォーム項目を追加する
※下記の内容はVer.0.3以降の場合に限られます。Ver.0.1b-0.24bをお使いの場合は、 以前のバージョンの説明をご覧下さい。
<input type="checkbox">、<input type="radio">、<select>
で複数の選択肢があるフォーム項目を設置するには、<formitem>独自タグを用います。
これによって、確認ページから戻った際に選択した値を復帰することができます。
フォームページ(_1default.html)では、下記の点に注意して記述します。
- <formitem>…</formitem>の内側に、1つ分の<input>・<option>を記述する。
- <select>の場合、<formitem>の外側を<select>で囲う。
- <input>・<select>のname属性末尾に、[]をつける。
- <formitem>と<input>・<select>のname属性を同じにする。
- <formitem>のvalues属性に、選択肢の値をカンマ区切りで記述する。
<formitem>の内側では、下記の点に注意します。
- {$value}に選択肢の値が出力される。
- {$index}は選択肢の通し番号になる。<label>などで使用する。
- {$checked}はchecked="checked"に、{$selected}はselected="selected"に置換される。
確認ページ(_2confirm.html)で入力内容を表示させるテンプレート変数は、"[]"をつけない形式にします。例えばname属性が「interests[]」であった場合は、 {$_POSTHTML_interests}にします。
フォーム要素のname属性は2文字以上にする
フォーム要素のname属性は、 2文字以上のアルファベットでつけてください。 これはフォーム要素のname属性として扱われるテンプレート変数{$PARAM_MODE}、{$PARAM_PASSWORD}などが、 1文字のアルファベットで置換されるように定義されているためです。
必須のテキスト項目を設定する
※下記の内容はVer.0.21b以降に限られます。
入力必須のテキスト項目<input type="text">、<input type="password">、<textarea>
を設定するには、name属性の末尾に「_r」を付けます。
Ver.0.3以降では、value属性に{$_POSTVAL_(name属性値)}を設定し、
確認ページから戻ったときに値を復帰できるようにします。
この機能は、<input type="checkbox">、<input type="radio">、<select>では使用できない点にご注意ください。
必須項目の自動チェックを設定する(JavaScript)
※下記の内容はVer.0.3以降の場合に限られます。
フォームページ(_1default.html)では、下記注意点にしたがってフォーム項目を設定すると、 JavaScriptによる必須項目チェックが行われるようになります。
- <head>内に<script src="form.js">を記述します。
- <form>にonsubmit="return Jb.Form.check(this);"を記述します。
- 必須入力にする<input>、<select>のclass属性に"required"または"required(数値)"を記述します。
- 複数選択可能な<input type="checkbox">、<select multiple="multiple">でclass="required(数値)"を記述すると、(数字)で指定した項目数を選択することが必須になります。
- <input>、<select>にtitle属性を設定すると、チェック時の警告に使用されます。
- id="err-(項目のname属性値)"のブロック要素を記述すると、チェック時にstyle="display: block;"に変更してメッセージを表示することができます。
フォームページ(_1default.html)の注意点
問い合わせフォームのテンプレートファイルでは、以下の点は省略できません。
- <form>タグ。action属性を{$FORMPATH_SELF}、method属性をpostにする。
- 上記<form>タグ内部に<input type="hidden">タグを配置。name属性を{$PARAM_MODE}、value属性を{$MODE_CONFIRM}にする。
(Ver.0.3以降) JavaScriptによる必須項目チェックを有効にする場合は、下記のようにします。
- <script src="jform.js">を<head>内側に記述する。
- <form onsubmit="return Jb.Form.check(this);">を記述する
確認ページ(_2confirm.html)の注意点
確認ページでは、問い合わせデータ記録とメール送信処理に移行できるように、下記の記述が必須です。
- <form>タグ。action属性を{$FORMPATH_SELF}、method属性をpostにする。
- <form>タグ内部に{$_POST}変数を配置する。jform.phpで表示する際に、利用者が入力した内容の<input type="hidden">タグを出力します。
- (Ver.0.1b-0.24b) <input type="hidden">タグ。name属性を{$PARAM_MODE}、value属性を{$MODE_SEND}にする。
- (Ver.0.3-) 2つのボタン<input type="submit" name="{$SUBMIT_SEND}">、 <input type="submit" name="{$SUBMIT_BACK}">を配置する。それぞれ送信決定時、内容修正時のボタンになる。
送信しましたページ (_3thanks.html)の注意点
(Ver.0.1b-0.24b) 特に注意すべき点はありません。
(Ver.0.3-) {$ERROR_MSG}を記述しておきます。メール送信エラー時にエラーが表示されます。
ログ閲覧ページ (_4view.html)の注意点
ログ閲覧ページには特殊なタグ<LogRecord>があります。
このタグで囲われた領域は、問い合わせデータ1件分のデザインを示しています。jform.phpで表示した際には、
この領域内のテンプレート変数が実際のデータで置き換えられた上、データの件数分まで展開されて表示されます。
これを 「繰り返し構造」と呼んでいます。詳しくは、繰り返し構造のテンプレート変数をご覧ください。
メールテンプレート(_5mail_admin.txt、_6mail_user.txt)の注意点
_5mail_admin.txtは管理者あてメール用、_6mail_user.txtはユーザあてメールのテンプレートになります。
変数は{$_POSTVAL_…}だけが使用可能で、入力した値に置換されます。
テンプレート変数
利用者が入力した問い合わせデータや、PHPメールフォームの動作に必要な情報などは、
テンプレートファイルの中では変数として表現されています。
これはSmartyテンプレートなどでおなじみの
{$...} 形式で表現され、
PHPスクリプトがページ表示処理の際に実際のデータに置き換えます。
PHPメールフォームで定義されている変数は、下記のとおりです。
| 導入Ver. | 変数名 | 解説 |
|---|---|---|
| 0.1b- | {$_POST} | _2confirm.htmlでのみ有効。submitしたすべてのデータの<input type="hidden">タグを出力します。 |
| 0.1b- | {$_POST_…} | Ver0.3以降では使用しないでください(廃止予定)。 _2confirm.htmlでのみ有効。submitした内容を確認表示するために使います。 「…」部分は、フォーム要素のname属性と一致します。 この変数と置換されて現れるテキストは、HTMLが無効化され、改行が<br>になります。 |
| 0.3- | {$_POSTHTML_…} | 主に_2confirm.htmlで使用。 「…」部分は、フォーム要素のname属性と一致します。 この変数と置換されて現れるテキストは、HTMLが無効化され、改行は<br>になります。 |
| 0.3- | {$_POSTVAL_…} | 主に_1default.html、_5mail_admin.txt、_6mail_user.txtで使用。 「…」部分は、フォーム要素のname属性と一致します。 この変数と置換されて現れるテキストは、HTMLが無効化されます。 |
| 0.1b- | {$APP_VERSION} | PHPメールフォームアプリケーションのバージョン表示。 |
| 0.21b-0.21b | {$ENCODING} | HTMLの文字エンコーディング。0.22b以降は廃止されました。 |
| 0.21b- | {$ERROR_MSG} | エラーメッセージの表示位置。 |
| 0.1b- | {$FORMPATH_SELF} | PHPメールフォームスクリプト自身のファイル名。既定ではjform.php。 jform.phpの名前を変えてもこの変数が誤動作することはありませんので、好きなファイル名を付けることができます。 |
| 0.1b- | {$FORMPATH_VIEW} | ログ閲覧ページの相対URL。既定では_1default.htmlに埋め込まれています。 |
| 0.1b- | {$MODE_CONFIRM} | 「確認ページ」を識別する動作モード定数 |
| 0.1b- | {$MODE_SEND} | 「メール送信処理」を識別する動作モード定数 |
| 0.1b- | {$MODE_THANKS} | 「送信しましたページ」を識別する動作モード定数。 |
| 0.1b- | {$MODE_VIEW} | 「ログ閲覧ページ」を識別する動作モード定数 |
| 0.3- | {$PARAM_EMAIL} | ユーザのメールアドレスとして認識する<input>要素のname属性。この入力アドレスに対して、メール送信を試みます。 |
| 0.1b- | {$PARAM_MODE} | 動作モードを受け渡す<input>要素のname属性 |
| 0.1b- | {$PARAM_PASSWORD} | 管理者パスワードを受け渡す<input>要素のname属性 |
| 0.3- | {$SUBMIT_BACK} | フォームページに戻る<input type="submit">要素のname属性。確認ページ(_2confirm.html)で用いる。 |
| 0.3- | {$SUBMIT_SEND} | メール送信する<input type="submit">要素のname属性。確認ページ(_2confirm.html)で用いる。 |
繰り返し構造のテンプレート変数 (フォームページ)
<formitem>の属性一覧
| 導入 Ver. | 属性名 | 必須 | 説明 |
|---|---|---|---|
| 0.3 | name | ※ | 対応するform要素のname属性と同じ値を設定します。末尾に[ ]を付ける必要はありません。 |
| 0.3 | values | ※ | 項目として出力する値をカンマ区切りで指定します。 |
<formitem>の内側で有効な変数一覧
| 導入 Ver. | 変数名 | 説明 |
|---|---|---|
| 0.3 | {$value} | 項目の値を出力します。 |
| 0.3 | {$index} | 通し番号。項目を出力するごとに1ずつ増加。<label>を指定する際などに使用します。 |
| 0.3 | {$checked} | 確認ページからの復帰時、checked="checked"に置換されます。もともと選択していた値を復帰する役割を持ちます。 |
| 0.3 | {$selected} | 確認ページからの復帰時、selected="selected"に置換されます。もともと選択していた値を復帰する役割を持ちます。 |
繰り返し構造のテンプレート変数 (ログ閲覧ページ)
ログ閲覧ページの<LogRecord>タグで有効なテンプレート変数です。
| 導入 Ver. | 繰り返し 構造タグ | 変数名 | 説明 |
|---|---|---|---|
| 0.1b | <LogRecord> | {$logrecord_body} | 問い合わせ内容。 |
| 0.1b | <LogRecord> | {$logrecord_host} | 問い合わせをしたホストのIPアドレス。 |
| 0.1b | <LogRecord> | {$logrecord_time} | 問い合わせをした日付時刻。config.phpのAPP_TIMEFORMATで表示形式を指定できる。 |
| 0.1b | <LogRecord> | {$logrecord_useragent} | 問い合わせをした利用者のUser-agent文字列。 |