以前の弊社ＨＰでは使用していたのですが、WordpressでＨＰを作成してからは使わなくなっていました。今回はprototype.jsを使用したCOOL&スタイリッシュで、Ajaxライクなメールフォームスクリプト「protoform.js」を紹介します。配布元が英語サイトで、日本語の紹介サイトが少なかったというのもここに掲載した１つの理由です。
このフォームは入力に[ 必須 / Tel / Email / ＵＲＬ / 日付]のチェックをしてくれます。デモはこちらの「Send message (demo)」になります、またソース一式は「DownLoad」から取得可能ですが、ＰＨＰソースの書き換えが必要だったりしますので、サーバ環境含め少し知識ある人でないと設置できないかもしれません。元ファイルはUTF-8なので、（一概には言えませんが）EUC-JP/SJISの方はファイルの文字エンコードを変換しておくといいかもしれません。では、以下設定手順を。
設定方法
ファイル一式を取得し解凍
解凍すると、以下のようなファイルがあります。
index.htmlについて
このページに使い方も記載されています。 簡単な翻訳を記載しておきます。
- HTMLファイルにprototype.js and protoform.jsをインクルードしてください。
- フォームは<div id=”box”>で囲んでください。formタグにclass=”validate”を指定すると入力チェックをするようになります。
- ＩｎｐｕｔタグのTitleに入力エラー時のメッセージを指定してください。Ｉｎｐｕｔタグのid名には入力チェックする条件を指定できます。
例：index.html
<title>メールフォーム</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="protoform.js"></script> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="box"> <!-- IDはbox指定 --> <form action="send.php" method="post" id="send" class="validate"> <fieldset> <legend>メールフォームです</legend> <div> <label for="name_Req">名前<span>*</span></label> <!-- idに_Reqがつくと必須チェックする --> <input type="text" id="name_Req" name="name" title="名前(必須)が未入力です" /> </div> <div> <label for="contact_Req_Email">メール<span>*</span></label> <!-- idに_Emailがつくとアドレスチェックする(今回は必須+アドレスチェック) --> <input type="text" id="contact_Req_Email" name="email" title="メール(必須)が未入力か誤っています" /> </div> <div> <label for="telephone_Tel">電話</label> <!-- idに_Telがつくと番号チェックする --> <input type="text" id="telephone_Tel" name="telephone" title="正しい電話番号を入力してください" /> </div> <div> <label for="message_Req">内容<span>*</span></label> <!-- idに_Reqがつくと必須チェックする --> <textarea id="message_Req" name="message" rows="5″ cols="20″ title="内容(必須)が未入力です"></textarea> </div> <div class="button"> <input type="submit" value="送信" /> </div> </fieldset> </form> </div><!-- /#box --> </body> </html>
send.phpの修正
ダウンロードした状態では、メール送信するようなスクリプトにはなっていないので、送信処理を追加します。上記例のＨＴＭＬになぞると、以下のようなＰＨＰソースになります。
例：send.php
<?php
echo "<div id=\"response\">";
$name = $_POST["name"];
$email = $_POST["email"];
$telephone = $_POST["telephone"];
$message = $_POST["message"];
if ( ($name=="") && ($email=="") && ($telephone=="") && ($message=="")) {
echo "<p>全項目を埋めてください<span>*</span></em></p>";
}else {
// ■■■■■■■■■■■■ ここに送信処理を記載する
$msg = "名前".$name."内容".$message."TEL:".$telephone."E-Mail:".$email;
mail("sample@todomain.jp",mb_encode_mimeheader ("タイトル","JIS","B"),mb_convert_encoding($msg,"JIS"),
"From: ".$email."rnReply-To: ".$email."rnX-Mailer: PHP/" . phpversion());
// ■■■■■■■■■■■■ 送信処理ここまで
echo "<p>送信されました:</p>";
echo "<ul>";
echo "<li>Name: ".$name."</li>";
echo "<li>E-mail: ".$email."</li>";
echo "<li>Telephone: ".$telephone."</li>";
echo "<li>Message:".$message."</li>";
echo "</ul>";
}
echo "</div>";
?>
上記緑部分が追記となります。mb_send_mailが使えるサーバであればそちらを使用することをお勧めします。
これをサーバにＵＰすれば設定完了です。最後に実行権限付与をお忘れなく。MITライセンスなので商用も著作権表記しておけば利用可能です。
追記（2010/03/22）
本項はprotoform ver1.0の紹介です。2010/03/22.現在ではVer1.1となっており、使用方法が変更されています。Ver1.0時のサンプルソースを以下に掲載しておきます。
■protoform ver1.0 サンプル
[…] 前回の「簡単設定のAjaxメールフォーム -protoform.js-」に引き続いて、こちらを紹介します。AjaxMailです。 […]