【PHP・Javascript】Form入力後に自動で自分のメールアドレスに内容を自動送信する

index.htmlのFormで、submitしたら入力された内容を自動で指定のメールアドレスに送信されるようにしてみました。
表示上は、「送信完了しました」という旨のメッセージを表示させ、ページ遷移なしでデータは送信したい。

 

index.html (jQueryは読み込んどいて)

<form action="" method="post">
  <div class="form-group">
    <label>お名前</label>
    <input id="name" type="text" name="name" class="form-control" required="required">
  </div>

  <div class="form-group">
    <label>メールアドレス</label>
    <input id="email" type="mail" name="mail" class="form-control" required="required">
  </div>

  <div class="form-group">
    <label>お問い合わせ内容</label>
    <textarea id="inquiry-body" name="body" class="form-control" rows="10" required="required"></textarea>
  </div>

  <div class="form-group send-email">
    <button type="submit" name="button" class="btn btn-default">送信!</button>
  </div>
</form>

 

script.js

$(function() {
  $('button[type=submit]').on('click', function() {

    // Formに入力されたデータを取得
    var name = $('#name').val();
    var email = $('#email').val();
    var body = $('#inquiry-body').val();

    // 連想配列化
    var postData = {"name":name, "email":email, "body":body};

    // POSTで送信
    $.post(
      "confirm.php",
      postData,
    );

    // 送信完了後の処理(送信完了のメッセージ表示)
    $('.send-email').html('<p>送信完了しました。お問い合わせありがとうございます。</p>');
    $('#name').val("");
    $('#email').val("");
    $('#inquiry-body').val("");
  });
});

 

inquiry.php

<?php
// 日本語対応
mb_language("Japanese");
mb_internal_encoding("UTF-8");

// JSから送信されたデータの取得
$name  = $_POST["name"];
$email = $_POST["email"];
$body  = $_POST["body"];

// 送信フォーマット等の設定
$to      = "example@test.com";
$subject = "お問い合わせ自動送信";
$message = "お問合わせメッセージが送信されました。\n----------\n【お名前】\n" . $name ."\n\n【Email】\n" . $email ."\n\n【お問い合わせ内容】\n" . $body;
$headers = "From: " . $name;

// メール送信実行
mb_send_mail($to, $subject, $message, $headers);
?>

 

PHPは、mb_send_mail()メソッドを使えばメールが送れます。

コメントを残す