チュートリアル
このメールフォームに含まれる画面テンプレートはサンプルです。 オリジナルのデザインを元にフォーム画面のHTMLを作成して使用することができます。
このチュートリアルを進めることで、オリジナルデザインのフォームの作成方法を学習できます。
１. サンプルフォームを元にフォームのデザインをオリジナルに変更する
この例では、サンプルフォームから次の項目を省略します。
- 確認画面を省略します。
- 自動応答メールを省略します。
- オリジナルデザインのフォームを作成
オリジナルのフォーム画面をオーサリングソフトなどを使って作成します。 - オリジナルデザインに、サンプルのHTML要素を移植します。
サンプルの entry.html に含まれるフォーム項目をオリジナルデザインのHTML内に配置します。
具体的には、form, textarea, input, select タグをオリジナルのHTML内に移植します。
submitボタンのvalue属性値は、「送信」に変更します。
<input type="submit" value="送信">
エラーメッセージを表示するためのタグも移植します。
エラーメッセージを表示するためのタグのid属性は、アンダースコア区切りで "error"という単語を使っています。例："error_message", "name_error"
作成したオリジナルのフォーム画面を、サンプルのentry.htmlと差し替えます。
- 設定を変更します
今回の例では確認画面を使わないので、config.ini を編集します。
config.ini 内の use_confirm 項目に 0 をセットします。
[flow] ;; 確認画面を使用する ;; この項目に 0 を指定するか、この項目をコメントアウトすると、確認画面を使用せずに、 ;; メールを送信します use_confirm = 0
自動応答メールを省略するので、config.iniを編集します。
config.ini 内の responder_to 項目行の先頭に ";"（セミコロン）を入力します。
[mail] ;; ;; 省略 ;; ;; 自動応答メールのフォーム項目名 ;; フォームの項目名を指定すると、その項目の入力値を宛先としてメールを送信します ;responder_to = email
※設定ファイル（config.ini及びitem.ini）の行頭に ";"（セミコロン）を入力すると、その行の設定を無効にできます。 - 動作を確認します
ブラウザでフォーム画面にアクセスして、問い合わせ内容を入力して送信ボタンをクリックします。
これで、メールが送信されることを確認します。
また、必須項目を未入力にしてエラーを発生させます。
その際に、エラーメッセージが表示されることを確認します。
２. 確認画面を使用する
例１の状態から、確認画面を追加する方法を説明します。
- オリジナルデザインの確認画面を作成
オーサリングソフトなどを使って作成します。
例１のフォームの入力項目と同じ項目を用意します。 - オリジナルデザインに、サンプルのHTML要素を移植します。
サンプルの confirm.html に含まれるフォーム項目をオリジナルデザインのHTML内に配置します。
具体的には、form, input タグをオリジナルのHTML内に移植します。 - 入力内容を表示させたいHTML要素にIDを指定します。
例えば、お問い合わせ内容を表示させたいHTML要素には、id="comment" を指定します。
<tr> <th>お問い合わせ内容</th> <td id="comment"></td> </tr>
※入力項目のNAMEに対応したID名を持つ要素内が、入力内容に置換される仕組みです。要素は、liやdivなどでもかまいません。 - 入力画面のボタンの文言を変更します。
entry.html の「送信」ボタンの表示を、「確認画面へ」に変更します。
<input type="submit" value="確認画面へ">
- 設定を変更します。
今回の例では確認画面を使うので、config.ini を編集します。
config.ini 内の use_confirm 項目に 1 をセットします。
[flow] ;; 確認画面を使用する ;; この項目に 0 を指定するか、この項目をコメントアウトすると、確認画面を使用せずに、 ;; メールを送信します use_confirm = 1
- 動作を確認します。
ブラウザでフォーム画面にアクセスして、問い合わせ内容を入力して「確認画面へ」ボタンをクリックします。
これで、確認画面が表示されて、入力画面で入力した値が表示されることを確認します。
確認画面で、「送信する」ボタンをクリックします。
これで、メールが送信されることを確認します。
３. メール本文を変更する
メール本文を変更する方法と、入力内容を置換するルールについて説明します。
- メール本文を独自の文章に変更する。
メール本文は、body.txt ファイルの内容が使用されます。
body.txt を独自の文章に変更します。 - フォームに入力した内容をメール本文に差し込む。
フォームの入力内容を、メール本文に差し込むには、メール本文に特定のキーワードを記入します。
例えば、例１のフォームの場合で、お問い合わせ内容を差し込むには、body.txt内に "{comment}" を記入します。
■お問い合わせ内容 {comment}そうすると、メール送信時に "{comment}" というキーワードがフォームの入力に置換されます。
４. メール本文にフォーム登録時の情報を差し込む
フォーム登録時の情報を差し込む方法を説明します。 例３と同様に body.txt を編集します。
フォーム登録時の日時、IP、ホスト、ユーザーエージェント をメール本文内に差し込みたい場合は、次のキーワードを body.txt に記入します。
日時：{_date}
IP：{_ip}
ホスト：{_host}
ユーザーエージェント：{_ua}
※"{}" 波括弧で囲われた部分がフォーム登録時の情報を表すキーワードです。
５. フォーム項目を追加・削除する
フォームの入力項目を追加したり削除する方法について説明します。
フォーム項目の設定ファイルについて
item.ini という設定ファイルで、フォーム項目を定義します。
設定例：
;; お問い合わせ内容 [comment] type = textarea label = "お問い合わせ内容" required = 1 maxlength = 500
項目名
"[]"（角かっこ）内に指定した文字列が項目名になります。 上の例の場合、"comment" が項目名とります。 この項目名が、入力画面・確認画面・メール本文で利用される名前となります。
入力画面では、input要素やtextarea要素のNAME属性として指定します。
エラーメッセージを表示させたいHTML要素に、項目名＋"_error" のID属性を指定します。 この場合は、"comment_error"というID属性を指定した要素内にエラーメッセージが表示されます。
<tr> <th>お問い合わせ内容<span style="color:red;">※</span></th> <td><textarea name="comment" cols="50" rows="10"></textarea> <div id="comment_error" style="color:red;">エラーメッセージ</div></td> </tr>
確認画面では、入力内容を表示させたい要素のID属性に"comment"を指定します。
<tr> <th>お問い合わせ内容</th> <td id="comment"></td> </tr>
メール本文では、body.txt内の"{comment}"という文字列を入力内容に置換します。
■お問い合わせ内容
{comment}
type
入力フォームのinput要素に対応したtype属性を指定します。 typeには、次の名前を指定できます。
- text
- textarea
- select
- radio
- checkbox
- password
- hidden
- email
メールアドレスの簡易フォーマットチェックを行うためのtypeです。 - captcha
CAPTCHA（画像認証）を利用するためのtypeです。 img要素を用意して、項目名＋"image" というID属性を指定すると、そこにCAPTCHA画像が表示されます。 認証のために、画像に表示された文字を入力するinput要素も用意します。
<tr> <th>画像認証<span style="color:red;">※</span></th> <td> <img id="captcha_image" src="./me_mailform/public/captcha_image.php" width="160" height="80" title="画像認証"><br> 画像に表示されている文字を入力してください。<br> <input id="captcha" type="text" name="captcha"> <div id="captcha_error" style="color:red;">エラーメッセージ</div> </td> </tr>
label
項目の表示名を指定します。
エラーメッセージでは、"label"の値に置き換えることができます。
例えば、label = "お名前" を指定していた場合、エラーメッセージの設定文内の"{label}"が置換されて、「お名前を入力してください。」というようなエラーメッセージが表示されます。
※ エラーメッセージの設定は、config.ini内の[message]セクションで指定します。
required
必須項目にしたい場合は "1" を指定します。
required = 1
maxlength
最大文字数を指定したい場合は、文字数を指定します。
例：最大文字数を500文字に指定する
maxlength = 500
multiple
checkboxあるいは、selectタイプで複数要素を選択したい場合に "1" を指定します。
※ html側でもname属性に "[]" を付けるなどの対応が必要です。
multiple = 1
numeric
入力値が半角数字だけであることを確認したい場合は "1" を指定します。
入力が許可される文字は、半角の 0 から 9 です。
numeric = 1
phone
入力値が電話番号書式であることを確認したい場合は "1" を指定します。
入力が許可される文字列は、2から5桁の半角数字 -(半角ハイフン) 1から4桁の半角数字 -(半角ハイフン) 4桁の半角数字です。
許可される文字列の例：
03-1234-5678
01234-1-5678
phone = 1
postal
入力値が郵便番号書式であることを確認したい場合は "1" を指定します。
入力が許可される文字列は、3桁の半角数字 -(半角ハイフン) 4桁の半角数字です。
許可される文字列の例：
170-0011
postal = 1
equal_to
入力値が他の項目の入力値と同じかどうかを確認したい場合は、比較対象の項目名を指定します。
"email" という項目名と同じであることを確認する場合は次のように指定します。
equal_to = email
convert_kana
入力値の全角・半角、カタカナ・ひらがな等を変換します。
「全角」英数字を「半角」に変換します。
convert_kana = a
「半角」英数字を「全角」に変換します。
convert_kana = A
「仮名」を全て「全角カタカナ」に変換します
convert_kana = KVC
「半角カタカナ」を「全角カタカナ」に変換し、「全角」英数字を「半角」に変換します。
convert_kana = KVa
convert_kanaの設定値は、PHPのmb_convert_kana関数のオプションとして使われます。使用できる設定値については、こちらの「使用可能な変換オプション」をご確認ください。
http://php.net/manual/ja/function.mb-convert-kana.php
convert_upper
入力値のアルファベットを大文字に変換します。
convert_upper = 1
convert_lower
入力値のアルファベットを小文字に変換します。
convert_lower = 1
フォーム項目を追加する
- item.ini に項目に関する記述を追加する。
例えば、テキストボックス追加する場合は次の行をitem.iniに記入します。
[foo] type = text label = "追加項目"
- 入力画面にフォーム要素を追加
input要素を用意して、NAME属性に"foo"を指定します。 エラーメッセージ用の要素を用意して、ID属性に"foo_error"を指定します。
<tr> <th>追加項目<span style="color:red;">※</span></th> <td><input type="text" name="foo"> <div id="foo_error" style="color:red;">エラーメッセージ</div></td> </tr>
- 確認画面の指定
確認画面がある場合は、入力内容を表示させたいHTML要素のID属性に"foo"を指定します。
<tr> <th>追加項目</th> <td id="foo"></td> </tr>
- メール本文の指定
メール本文に、入力内容を表示させたい場合は、body.txtに "{foo}" を記入します。
■追加項目 {foo}
フォーム項目を削除する
- item.ini から削除したい項目の記述を削除する。
ここでは、"foo"項目を削除します。
[foo] type = text label = "追加項目"
- 入力画面・確認画面・メール本文からfooに関する記述を削除します。