【jQuery/PHP】画面遷移無しのお問い合わせフォームを作る

こんにちは！セミマサです。

WordPressプラグイン「ContactForm7」のような、画面遷移無しのお問い合わせフォームを作ってみました。この記事はその備忘録になります。

HTML
CSS
PHP
jQuery
おわりに

HTML

<section>
    <div class="inner">
            <h2 class="heading">お問い合わせはこちら</h2>
            <p><span class="red">※</span>は必須項目です。</p>
            <form method="post" id="contact-form" action="contact.php">
                    <label class="form-label">お名前<span class="red">※</span></label>
                    <input type="text" name="name" value="" placeholder="お名前" required>
                    <label class="form-label">メールアドレス<span class="red">※</span></label>
                    <input type="email" name="email" value="" placeholder="メールアドレス" pattern="[\w\d_-]+@[\w\d_-]+\.[\w\d._-]+"　title="メールアドレスは、aaa@example.com のような形式で記入してください。"　 required>
                    <label class="form-label">件名</label>
                    <input type="text" name="subject" value="" placeholder="件名">
                    <label class="form-label">お問い合わせ内容<span class="red">※</span></label>
                    <textarea name="message" cols="40" rows="10" placeholder="お問い合わせ内容" required></textarea>
                    <input type="submit" value="送信" class="send-btn" id="submit">
            </form>
            <p class="contact-result"></p>
    </div>
</section>

お問い合わせフォームのHTMLです。

・inputタグやtextareaタグにrequired属性をつけると入力必須項目にすることができます。今回はお名前・メールアドレス・お問い合わせ内容を入力必須にしました。

・メールアドレスに関してはpattern属性をつけて「***@***.***」という形式での入力を指定しています。

CSS

@charset "UTF-8";
.heading{
  font-size: 2rem;
}
.inner{
  padding: 20px 5%;
}
form {
  width: 100%; }
.form-label {
  margin-top: 16px;
  display: block;
  width: 100%; }
input {
  width: 100%; }
textarea {
  width: 100%; }
.red {
  font-size: 0.8rem;
  color: red; }
.send-btn {
  margin-top: 16px;
  cursor: pointer; }
.contact-result {
  width: 100%;
  padding: 8px 0;
  background-color: #e1a948;
  text-align: center;
  color: white;
  display: none; }

*{
  box-sizing: border-box;
}

こちらはCSSになります。

PHP

<?php
if($_SERVER['REQUEST_METHOD'] != 'POST'){
    //methodがPOSTでない場合変数をすべて空にする
    $name = '';
    $email = '';
    $subject = '';
    $message = '';
    $complete_msg = '';
}else{
    //取得した値を変数に代入
    $name = $_POST['name'];
    $email = $_POST['email'];
    $subject = $_POST['subject'];
    $message = $_POST['message'];
    //完了メッセージの初期化
    $complete_msg = '';
    //送り先のアドレス
    $to = 'ここに送り先のアドレスを入れる';
    //送信者情報
    $headrs = "From: ".$email."\r\n";

    $message .= "\r\n\r\n".$name;
    //送信処理
    mb_send_mail($to,$subject,$message,$headrs);
    
    $complete_msg = '送信されました！';
    //完了メッセージを返す
    echo $complete_msg;
    // 初期化
    $name = '';
    $email = '';
    $subject = '';
    $message = '';
}
?>

次はPHPのコードです。$toの中身は送り先のメールアドレスに置き換えてください。

jQuery

$('#contact-form').submit(function(event){
    //submit実行を止める
    event.preventDefault();
    var $form = $(this);
    var $button = $form.find('.send-btn');
    $.ajax({
        url:$form.attr('action'),
        type:$form.attr('method'),
        data: $form.serialize(),
        //10秒でタイムアウト
        timeout:10000,
        //重複送信を避けるためにボタンを無効化
        beforeSend: function(xhr, settings) {
            $button.attr('disabled', true);
        },
        //完了後ボタンを押せるように
        complete: function(xhr, textStatus) {
            $button.attr('disabled', false);
        }
    }).done(function(data, textStatus, jqXHR){
        // 成功時の処理
        //フォームを初期化
        $form[0].reset();
        $(".contact-result").text(data);
        $(".contact-result").slideToggle(200);
        $(".contact-result").delay(3000).slideToggle(200);
      }).fail(function(jqXHR, textStatus, errorThrown){
        // 失敗時の処理
        $(".contact-result").text("エラーが発生しました。ステータス：" + jqXHR.status);
        $(".contact-result").slideToggle(200);
        $(".contact-result").delay(3000).slideToggle(200);
      });
});

最後にjQueryのコードになります。

・submitはデフォルトでは処理実行後にページの先頭に戻ってしまうのでevent.preventDefault()で処理を止め、ajaxでデータのやり取りをします。

・ slideToggleメソッドを使ってContactForm7のようにニュッとメッセージウィンドウが出るようにしています。delayメソッドによって3秒後にウィンドウが閉じます。