【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>

<divclass="inner">

<h2class="heading">お問い合わせはこちら</h2>

<p><spanclass="red">※</span>は必須項目です。</p>

<formmethod="post"id="contact-form"action="contact.php">

<labelclass="form-label">お名前<spanclass="red">※</span></label>

<inputtype="text"name="name"value=""placeholder="お名前"required>

<labelclass="form-label">メールアドレス<spanclass="red">※</span></label>

<inputtype="email"name="email"value=""placeholder="メールアドレス"pattern="[\w\d_-]+@[\w\d_-]+\.[\w\d._-]+"　title="メールアドレスは、aaa@example.com のような形式で記入してください。"　required>

<labelclass="form-label">件名</label>

<inputtype="text"name="subject"value=""placeholder="件名">

<labelclass="form-label">お問い合わせ内容<spanclass="red">※</span></label>

<textareaname="message"cols="40"rows="10"placeholder="お問い合わせ内容"required></textarea>

<inputtype="submit"value="送信"class="send-btn"id="submit">

</form>

<pclass="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;
}

@charset"UTF-8";

.heading{

font-size:2rem;

}

.inner{

padding:20px5%;

}

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:8px0;

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

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);
      });
});