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()メソッドを使えばメールが送れます。