WEBサービスやポートフォリオに欠かせない「お問い合わせフォーム」。
メール送信機能だけであればPHPのmb_send_mail関数を使えば簡単に作れますが、送信後画面がリフレッシュされて、画面の一番上に戻ってしまいます。
ポートフォリオのお問い合わせフォームが、ページを下へスクロールした先にあるのであれば、例えばバリデーションチェックに引っかかった場合に、画面が上に戻ってしまうので、ちょっとかっこ悪いですよね。
そこで、登場するのがAjax処理です。
Ajax処理は画面の必要な箇所だけを更新してくれるので、メール送信後やバリデーションチェックエラーの際も勝手に画面が上に戻ることはありません。
この記事では、そのAjax処理を使ってPHPでメールを送信するにはどうすれば良いのか解説していきます。
実装の流れ
全体の流れは次のようになります。
- フォームの値を取得（js）
- メール送信のファイルにPOST送信（js → PHP）
- メール送信 + 結果を返す（PHP → js）
- 結果を元に、画面にメッセージを表示する（js）
HTMLのコードサンプル
以下はフォームのよくあるフォームのサンプルです。
「名前」、「メールアドレス」、「用件」を入れて送信する形となっています。
見やすくするために、余計なクラス名やその他の属性などは省略しています。
<section>
<form action = "" method = "post">
<!-- 名前 -->
<label>
お名前
<input class="js-get-val-name" type="text" name="name">
</label>
<!-- メールアドレス -->
<label>
メールアドレス
<input class="js-get-val-email" type="email" name="email">
</label>
<!-- 用件 -->
<label>
お問い合わせ内容
<textarea class="js-get-val-comment" name="comment"></textarea>
</label>
<!-- 送信ボタン -->
<input class="js-send-email" type="submit" value="メールを送信する">
</form>
</section>jQueryのコードサンプル
ここでは、「送信ボタン」がクリックされたら、イベントが発火するようになっています。
処理の内容は、画面上で入力された値を取得し、その値をPHPのほうにPOST送信しています。
そして、ajax通信が正常に実施されたら、「done」以降の処理を行います。処理の内容は人によってやりたいことが異なると思うので、ここには載せていません。
画面をリロードしたいのであれば「location.reload();」、画面にメッセージを表示したいのであれば、jQueryのhtml()メソッドや、text()メソッドを使えばできます。
// 送信ボタンクリックされたら
$ ('.js-send-email'). on ('click', function (e) {
e.preventDefault (); //画面が更新されないように
// Ajax処理
$.ajax ({
type: 'post',
url: 'send-mail.php',
datatype: 'json',
data: {
name: $ ('. js-get-val-name'). val (), // 名前
email: $ ('. js-get-val-email'). val (), // メールアドレス
comment: $ ('. js-get-val-comment'). val () // 用件
}
}).done(function (data) { // ajax通信が成功したら
if (data.result) {
// メール「送信」に成功した時の処理
// 画面にメッセージを表示、画面をリロードなど。
} else {
//メール送信に「失敗」した時の処理
// 画面にメッセージを表示など
}
});
});上記では、ajax通信に失敗した場合の処理を載せていませんが、失敗した場合の処理も書く場合は次のようにして書きます。
jQueryでAjaxを実装する場合の書き方
$.ajax({
type: 'post',
url: 'send-mail.php',
datatype: 'json',
data: {
name: $ ('. js-get-val-name'). val (), // 名前
email: $ ('. js-get-val-email'). val (), // メールアドレス
comment: $ ('. js-get-val-comment'). val () // 用件
}
}).done(function (data) {
//ajax通信成功
}).fail(function (data) {
//ajax通信失敗
});PHPのコードサンプル
PHP側ではjsから渡ってきたフォームのデータを使って実際にメールを送信し、結果をjson形式で返します。
<?php
// POST送信チェック
if(!empty($_POST)){
$name = $_POST['name'];
$email = $_POST['email'];
$comment = $_POST['comment'];
//メール送信処理
$from = $email;
$to = 'test@gmail.com'; //あなたのメールアドレス
$subject = $name.'様からお問い合わせです'; //メールの標題
$description = $comment;
// フォームの内容が空でなければメールを送信する
if(!empty($from) && !empty($subject) && !empty($description)){
mb_language("Japanese");
mb_internal_encoding("UTF-8");
//メール送信
$result = mb_send_mail($to, $subject, $description, "From:".$from);
//送信結果を判定
if($result){
echo json_encode(array('result' => true));
}else{
echo json_encode(array('result' => false));
}
}
//フォームに空の項目がありエラー
echo json_encode(array('result' => false));
}上記では、結果をtrue、falseしかjs側へ返却していませんが、もし、他にもデータを追加したいのであれば、カンマで区切って追加してください。
//例echo json_encode(array('result' => true, 'msg' => 'メールを送信しました'));
js側では、「data.result」、「data.msg」のようにして値を取り出せます。
最後に
以上、ざっくりとした紹介でしたが、PHP + jQueryでAjaxでメール送信機能を実装する方法でした。
上記の内容で、わからないことや間違いがあれば、コメント欄かお問い合わせからご連絡いただけると幸いです。
