簡単設定のAjaxメールフォーム -protoform.js-


以前の弊社HPでは使用していたのですが、WordpressでHPを作成してからは使わなくなっていました。今回はprototype.jsを使用したCOOL&スタイリッシュで、Ajaxライクなメールフォームスクリプト「protoform.js」を紹介します。配布元が英語サイトで、日本語の紹介サイトが少なかったというのもここに掲載した1つの理由です。

このフォームは入力に[ 必須 / Tel / Email / URL / 日付]のチェックをしてくれます。デモはこちらの「Send message (demo)」になります、またソース一式は「DownLoad」から取得可能ですが、PHPソースの書き換えが必要だったりしますので、サーバ環境含め少し知識ある人でないと設置できないかもしれません。元ファイルはUTF-8なので、(一概には言えませんが)EUC-JP/SJISの方はファイルの文字エンコードを変換しておくといいかもしれません。では、以下設定手順を。

設定方法

ファイル一式を取得し解凍

proto

解凍すると、以下のようなファイルがあります。

proto2

index.htmlについて

このページに使い方も記載されています。 簡単な翻訳を記載しておきます。

  • HTMLファイルにprototype.js and protoform.jsをインクルードしてください。
  • フォームは<div id=”box”>で囲んでください。formタグにclass=”validate”を指定すると入力チェックをするようになります。
  • InputタグのTitleに入力エラー時のメッセージを指定してください。Inputタグのid名には入力チェックする条件を指定できます。

例:index.html

&lt;title&gt;メールフォーム&lt;/title&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;prototype.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;protoform.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;styles.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;box&quot;&gt; &lt;!-- IDはbox指定 --&gt;
&lt;form action=&quot;send.php&quot; method=&quot;post&quot; id=&quot;send&quot; class=&quot;validate&quot;&gt;
&lt;fieldset&gt;
&lt;legend&gt;メールフォームです&lt;/legend&gt;
&lt;div&gt;
&lt;label for=&quot;name_Req&quot;&gt;名前&lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
&lt;!-- idに_Reqがつくと必須チェックする --&gt;
&lt;input type=&quot;text&quot; id=&quot;name_Req&quot; name=&quot;name&quot; title=&quot;名前(必須)が未入力です&quot; /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for=&quot;contact_Req_Email&quot;&gt;メール&lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
&lt;!-- idに_Emailがつくとアドレスチェックする(今回は必須+アドレスチェック) --&gt;
&lt;input type=&quot;text&quot; id=&quot;contact_Req_Email&quot; name=&quot;email&quot; title=&quot;メール(必須)が未入力か誤っています&quot; /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for=&quot;telephone_Tel&quot;&gt;電話&lt;/label&gt;
&lt;!-- idに_Telがつくと番号チェックする --&gt;
&lt;input type=&quot;text&quot; id=&quot;telephone_Tel&quot; name=&quot;telephone&quot; title=&quot;正しい電話番号を入力してください&quot; /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for=&quot;message_Req&quot;&gt;内容&lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
&lt;!-- idに_Reqがつくと必須チェックする --&gt;
&lt;textarea id=&quot;message_Req&quot; name=&quot;message&quot; rows=&quot;5″ cols=&quot;20″ title=&quot;内容(必須)が未入力です&quot;&gt;&lt;/textarea&gt;
&lt;/div&gt;
&lt;div class=&quot;button&quot;&gt;
&lt;input type=&quot;submit&quot; value=&quot;送信&quot; /&gt;
&lt;/div&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
&lt;/div&gt;&lt;!-- /#box --&gt;
&lt;/body&gt;
&lt;/html&gt;

send.phpの修正

ダウンロードした状態では、メール送信するようなスクリプトにはなっていないので、送信処理を追加します。上記例のHTMLになぞると、以下のようなPHPソースになります。

例:send.php

&lt;?php
echo &quot;&lt;div id=\&quot;response\&quot;&gt;&quot;;
$name            = $_POST[&quot;name&quot;];
$email           = $_POST[&quot;email&quot;];
$telephone       = $_POST[&quot;telephone&quot;];
$message         = $_POST[&quot;message&quot;];
if ( ($name==&quot;&quot;) &amp;&amp; ($email==&quot;&quot;) &amp;&amp; ($telephone==&quot;&quot;) &amp;&amp; ($message==&quot;&quot;)) {

echo &quot;&lt;p&gt;全項目を埋めてください&lt;span&gt;*&lt;/span&gt;&lt;/em&gt;&lt;/p&gt;&quot;;

}else {
// ■■■■■■■■■■■■ ここに送信処理を記載する
$msg = &quot;名前&quot;.$name.&quot;内容&quot;.$message.&quot;TEL:&quot;.$telephone.&quot;E-Mail:&quot;.$email;
mail(&quot;sample@todomain.jp&quot;,mb_encode_mimeheader (&quot;タイトル&quot;,&quot;JIS&quot;,&quot;B&quot;),mb_convert_encoding($msg,&quot;JIS&quot;),
&quot;From: &quot;.$email.&quot;rnReply-To: &quot;.$email.&quot;rnX-Mailer: PHP/&quot; . phpversion());
// ■■■■■■■■■■■■ 送信処理ここまで

echo &quot;&lt;p&gt;送信されました:&lt;/p&gt;&quot;;
echo &quot;&lt;ul&gt;&quot;;
echo &quot;&lt;li&gt;Name: &quot;.$name.&quot;&lt;/li&gt;&quot;;
echo &quot;&lt;li&gt;E-mail: &quot;.$email.&quot;&lt;/li&gt;&quot;;
echo &quot;&lt;li&gt;Telephone: &quot;.$telephone.&quot;&lt;/li&gt;&quot;;
echo &quot;&lt;li&gt;Message:&quot;.$message.&quot;&lt;/li&gt;&quot;;
echo &quot;&lt;/ul&gt;&quot;;
}
echo &quot;&lt;/div&gt;&quot;;
?&gt;

上記緑部分が追記となります。mb_send_mailが使えるサーバであればそちらを使用することをお勧めします。

これをサーバにUPすれば設定完了です。最後に実行権限付与をお忘れなく。MITライセンスなので商用も著作権表記しておけば利用可能です。

追記(2010/03/22)

本項はprotoform ver1.0の紹介です。2010/03/22.現在ではVer1.1となっており、使用方法が変更されています。Ver1.0時のサンプルソースを以下に掲載しておきます。
protoform ver1.0 サンプル


「簡単設定のAjaxメールフォーム -protoform.js-」へのコメント1件

  1. […] 前回の「簡単設定のAjaxメールフォーム -protoform.js-」に引き続いて、こちらを紹介します。AjaxMailです。 […]

コメントは受け付けていません。