2017/1/2 【html, jQuery, PHP】メールフォームを作る
このサイトのAboutページにあるメールフォーム、
今までは忍者メールフォームをそのまま使っていたのですが
PHPやjQueryなどの勉強ついでに作ってみました。
実際に動いている様子は下の通りです。
作り方を以下に書いていきます。
1. 概要
今回作るメールフォームに入力する項目は
名前、メールアドレス、件名、本文の４つで、
本文だけは入力必須ですが、他の入力は任意とします。
メールを送信する部分はPHPやJavaScriptなどで作ることが出来ますが、
JavaScriptで普通に作ってしまうとメールアドレスが丸見え状態になってしまうので
PHPで作ることにしました。
ですが、今このサイトで使っているFC2の無料サーバーはPHPが使えないので
メールフォームの本体はXdomainサーバーに作り、
それをFC2側から呼び出して使うようにしました。
最終的なファイル構成は下のような感じです。
2. html
まずはメールフォームのhtmlを書いていきます。
<body></body>
プログラムはこうなりました。
フォームに入力された４種類の情報をPOSTメソッドでsendMail.phpに送っています。
本文が入力されないまま送信ボタンが押されてしまったときの対策として、
送信ボタンの上に ※※※ 本文を入力してください ※※※
という警告メッセージを出すスペースを空けています。
3. jQuery
次に、先程作ったフォームに動きを付けるためのjQueryを書いていきます。
マウスが要素に乗ったとき、フォーカスが要素に当たったとき、
本文を入力せずに送信ボタンが押された時の３つの動きを作ります。
ここでは要素の色を変えていくのですが、
色を変えるときはjQueryの本体と、jQuery Color プラグイン
というものを読み込む必要があるので、htmlで読み込みます。
<head> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script> </head>
まずは、マウスが要素に乗った時の処理を書きます。
<body> </body>hover()メソッドの第一引数にマウスが当たった時の処理、
第二引数にマウスが離れたときの処理を書いています。
stop()メソッドの第一引数をfalseにすることで溜まっているキューは破棄せず、
第二引数をtrueにすることで
実行中のアニメーションを最後まで飛ばすようにしています。
このようにすることで、マウスが一瞬だけ要素に当たって離れた場合にも
色がはっきりと変わるので当たったということが分かりやすいかなと思います。
次に、要素にフォーカスが当たった時の処理を書きます。
<body> </body>css()メソッドでは、入力部分の背景の色を変えています。
複数の値を同時に変える際には連想配列を渡さなければいけないので、
引数に直接値を書く場合には{}を忘れず書くことが重要かなと思います。
作ってるときはこれに気付かずに物凄く悩んでしまいました……
最後に、本文が入力されていない場合に警告を出す処理を書きます。
<body> </body>on()メソッドでは、入力がsubmitされるときのイベントハンドラを定義しています。
このときに呼び出した関数でfalseを返すとsubmitを中止できるので
テキストエリアの.val()で中身を取得し、入力が無いならsubmitを中止しています。
また、submitを中止する際はメッセージのopacity(透明度)を変更することで
警告を一定時間表示しています。
hide()とshow()を使ってもメッセージを出したり隠したりすることはできますが、
その場合はメッセージから下の要素の位置がずれてしまうので
透明度を変更して、メッセージが見えない時でも
処理的には完全に透明なものが表示され続けているようにしました。
4. PHP
次に、POSTメソッドで送られてきた情報を
メールで送信するPHPのプログラムを書きます。
<html>
<body>
<?php
$mail = "[名前]\n".$_POST['name']."\n\n[メールアドレス]\n".$_POST['email']."\n\n[件名]\n".$_POST['about']."\n\n[本文]\n".$_POST['main'];
if(mb_send_mail("送信したいメールアドレス", "新着メール", $mail, "From: 水飴信号メールフォーム<自分のメールアドレス>")){
echo "送信成功！！！";
}else{
echo "送信失敗……";
}
?>
</body>
</html>
送られたデータは$_POST['要素のname']に入っているので、データを出力したい順に繋ぎ合わせて変数$mailに格納し、
mb_send_mail()関数で実際に送信しています。
この関数の引数は、第一引数が送信先のアドレス、第二引数がメールの件名、
第三引数がメールの本文、第四引数が送信元のアドレスです。
送信元のアドレスはそのまま表示すると分かりにくかったので名前を付けています。
また、mb_send_mail()でメールの送信に成功するとtrue、
失敗するとfalseが返るので、その結果をhtmlに表示させています。
5. メールフォーム読み込み(html)
以上でメールフォームは完成です！
ただ、このメールフォームは使いたいサーバー(FC2)
とは別のサーバー(Xdomain)にあるので、
FC2のhtmlからiframeを使うことで設置しています。
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="Xdomainのサーバー/mailForm.html">
iframeは初期状態だと色々と制限がかかっているので、
sandbox属性に制限を外すための文字列を入れることで
メールフォームとして正しく機能するようにしています。
ここで作ったメールフォームは
iframeを使っているhtmlファイルと同じドメインであることにして(allow-same-origin)
iframe内でformを使うことを許可して(allow-forms)
iframe内でスクリプトを使うことを許可しています(allow-scripts)。
6. ソースコード全体
今回作ったメールフォームのソースコードは
https://github.com/mizzsig/html-tests/tree/master/mailForm
こちらに置いてあります。
-
Please
- feedly
- hatena bookmark
- Google plus
Share!
