【PHP + jQuery】Ajaxを使ってメール送信機能を実装する方法

WEBサービスやポートフォリオに欠かせない「お問い合わせフォーム」。

メール送信機能だけであればPHPのmb_send_mail関数を使えば簡単に作れますが、送信後画面がリフレッシュされて、画面の一番上に戻ってしまいます。

ポートフォリオのお問い合わせフォームが、ページを下へスクロールした先にあるのであれば、例えばバリデーションチェックに引っかかった場合に、画面が上に戻ってしまうので、ちょっとかっこ悪いですよね。

そこで、登場するのがAjax処理です。

Ajax処理は画面の必要な箇所だけを更新してくれるので、メール送信後やバリデーションチェックエラーの際も勝手に画面が上に戻ることはありません。

この記事では、そのAjax処理を使ってPHPでメールを送信するにはどうすれば良いのか解説していきます。



実装の流れ

全体の流れは次のようになります。

  1. フォームの値を取得(js)
  2. メール送信のファイルにPOST送信(js → PHP)
  3. メール送信 + 結果を返す(PHP → js)
  4. 結果を元に、画面にメッセージを表示する(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でメール送信機能を実装する方法でした。

上記の内容で、わからないことや間違いがあれば、コメント欄かお問い合わせからご連絡いただけると幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA