どんなサイト・ブログでも、問い合わせフォームは欠かせないモノ
WordPressだったらプラグインとか使えば楽に作れますが、
Webサービスを作ってると、それすらも自作する必要があって面倒です。
ということで、PHP + JavaScritp で問い合わせを自作する手順 をまとめてみました。
あと reCAPTCH を使い、迷惑メール対策手順も紹介します。
このページの目次
手順１．フォームの基礎部分を用意しよう
まず Bootstrap（ブートストラップ） を読み込む
別に Bootstrap がなくても問い合わせフォームは作れます。
でもフォームの構成が作りやすかったり、レスポンシブにも簡単に対応できるので便利です。
▼ 例えばこういう感じで読み込んでおく
1 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> |
これ１つあればレイアウトが楽になるので、いつも使ってます。
問い合わせフォーム部分の HTML を作成する
次はブラウザから送信するためのフォーム部分を作成
今回は次の４つの情報をフォームに含めることにします。
- 送信者の名前
- 送信者のメルアド
- 問い合わせタイトル
- 問い合わせ本文
基本的にはこの４つがあれば十分
実際のフォーム部分の HTML例 は次の通り（一部 Bootstrap 使用）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <form action="send-contact-email.php" method="POST" onsubmit="return verifyContactForm();"> <div class="form-group"> <label for="guest-name">お名前 : </label> <input id="guest-name" class="form-control" /> </div> <div class="form-group"> <label for="guest-email">メールアドレス : </label> <input id="gurst-email" class="form-control" /> </div> <div class="form-group"> <label for="mail-subject">件名 : </label> <input type="text" id="mail-subject" class="form-control" /> </div> <div class="form-group"> <label for="mail-body">本文 : </label> <textarea id="mail-body" class="form-control" ></textarea> </div> <div class="form-group text-right"> <button class="btn btn-primary">送信</button> </div> </form> |
Bootstrapではフォームの input や textarea は class="form-group" を付けて囲みます。
あと各フォーム部品には label をつけて、問い合わせ側にとって分かりやすい配置にもしてます
（本当に親切なフォームにするならプレースホールダーとか必要）
▼ Bootstrapのフォーム部品について
あと form タグの次の部分もポイント
1 2 | <form action="send-contact-email.php" method="POST" onsubmit="return verifyContactForm();"> |
ここで verifyContactForm という関数で、内容に不備がないかチェックしてます。
この verifyContactForm のコードはこんな感じ
1 2 3 4 5 6 7 8 9 10 11 12 13 | function verifyContactForm(){ var name = $('#guest_name').val(); var email = $('#guest_email').val(); var subject = $('#mail_subject').val(); var body = $('#mail_body').val(); if(!(name && email && subject && body)) { alert('問い合わせ内容に不備があります'); return false; } return true; } |
とりあえず空でないかどうか調べてるだけです。
フォームによっては、他にもチェック項目があるかもしれません。
手順２．フォーム送信を受け取るPHPスクリプトの実装
肝心なのはここから
次はフォーム送信を処理するスクリプトの実装です。
ここでは最低限、次の処理をすることにします。
- メルアド形式のチェック
- 件名・本文の不正チェック
- 実際に送信する
このコード例は次の通り
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <?php /// フォームからPOSTパラメーター受け取り $guest_name = $_POST['guest_name']; $guest_email = $_POST['guest_email']; $mail_subject = $_POST['mail_subject']; $mail_body = $_POST['mail_body']; $is_validated = true; if( ! filter_var( $guest_email, FILTER_VALIDATE_EMAIL ) ) { /// メールアドレスが不正 $is_validated = false; } if( empty($mail_subject) || empty($mail_body) ) { /// 件名または本文がない or null /// エラー処理 $is_validated = false; } /// サイト管理者に問い合わせメール送信 $result = mb_send_mail( 'admin@example.com', $email_subject, $email_body, 'From: '.mb_encode_mimeheader($guest_name).'<'.$guest_email.'>' ); ?> <?php if ( $is_validated && $result ): ?> <p>問い合わせを受け付けました。</p> <?php else: ?> <p>内容に不備があります。もう一度お確かめください。</p> <a href="#" onclick="history.back();">送信フォームに戻る</a> <?php endif ?> |
何をやってるかは、コード内のコメントとか参照
このコードで "特に" 大事なのは次の部分
1 2 3 4 | if( ! filter_var( $guest_email, FILTER_VALIDATE_EMAIL ) ) { /// メールアドレスが不正 $is_validated = false; } |
ここでメルアドが正しい形式かどうかチェックしてます（存在してるかは気にしない）
▼ 詳しくはこの記事をチェック
この記事で書いたように、 filter_var 関数はメルアドやURLのチェックに使えます。
これが地味に便利なので、フォームのチェックとかにも重宝しますね。
以上が簡易的な問い合わせフォームの作成方法
本当にシンプルな構成だけど、コンタクトを受け取るだけなら十分すぎるくらいです。
手順３．スパム対策に reCAPTCH v3 導入
これで問い合わせフォーム自体は動くんですが・・・
何のセキュリティ対策もないと、スパムの温床にしかならないです。
なので reCAPTCH v3 も実装しておくのが安全
その実装方法については、次記事でまとめたので興味のある方はご覧ください。
実装手順は面倒そうに見えて、意外とシンプルです。
ほんのちょっとの手間を加えるだけで、あとの管理が楽になるので導入しときましょう。
問い合わせフォーム作成のまとめ
箇条書きで作り方まとめ
以上、PHP + JS で問い合わせフォームを作る手順でした。ではまた
