PHP + JavaScriptによる簡易的な問い合わせフォームの作り方

どんなサイト・ブログでも、問い合わせフォームは欠かせないモノ

WordPressだったらプラグインとか使えば楽に作れますが、
Webサービスを作ってると、それすらも自作する必要があって面倒です。

ということで、PHP + JavaScritp で問い合わせを自作する手順 をまとめてみました。

あと reCAPTCH を使い、迷惑メール対策手順も紹介します。

手順1.フォームの基礎部分を用意しよう

まず Bootstrap(ブートストラップ) を読み込む

別に Bootstrap がなくても問い合わせフォームは作れます。

でもフォームの構成が作りやすかったり、レスポンシブにも簡単に対応できるので便利です。

▼ 例えばこういう感じで読み込んでおく

これ1つあればレイアウトが楽になるので、いつも使ってます。

問い合わせフォーム部分の HTML を作成する

次はブラウザから送信するためのフォーム部分を作成

今回は次の4つの情報をフォームに含めることにします。

  • 送信者の名前
  • 送信者のメルアド
  • 問い合わせタイトル
  • 問い合わせ本文

基本的にはこの4つがあれば十分

 

実際のフォーム部分の HTML例 は次の通り(一部 Bootstrap 使用)

Bootstrapではフォームの input  や textarea  は class="form-group"  を付けて囲みます。

あと各フォーム部品には label  をつけて、問い合わせ側にとって分かりやすい配置にもしてます
(本当に親切なフォームにするならプレースホールダーとか必要)

▼ Bootstrapのフォーム部品について

 

あと form  タグの次の部分もポイント

ここで verifyContactForm  という関数で、内容に不備がないかチェックしてます。

この verifyContactForm  のコードはこんな感じ

とりあえず空でないかどうか調べてるだけです。

フォームによっては、他にもチェック項目があるかもしれません。

手順2.フォーム送信を受け取るPHPスクリプトの実装

肝心なのはここから

次はフォーム送信を処理するスクリプトの実装です。

ここでは最低限、次の処理をすることにします。

  1. メルアド形式のチェック
  2. 件名・本文の不正チェック
  3. 実際に送信する

 

このコード例は次の通り

何をやってるかは、コード内のコメントとか参照

 

このコードで "特に" 大事なのは次の部分

ここでメルアドが正しい形式かどうかチェックしてます(存在してるかは気にしない)

▼ 詳しくはこの記事をチェック

この記事で書いたように、 filter_var  関数はメルアドやURLのチェックに使えます。

これが地味に便利なので、フォームのチェックとかにも重宝しますね。

 

以上が簡易的な問い合わせフォームの作成方法

本当にシンプルな構成だけど、コンタクトを受け取るだけなら十分すぎるくらいです。

手順3.スパム対策に reCAPTCH v3 導入

これで問い合わせフォーム自体は動くんですが・・・

何のセキュリティ対策もないと、スパムの温床にしかならないです。

なので reCAPTCH v3 も実装しておくのが安全

その実装方法については、次記事でまとめたので興味のある方はご覧ください。

実装手順は面倒そうに見えて、意外とシンプルです。

ほんのちょっとの手間を加えるだけで、あとの管理が楽になるので導入しときましょう。

問い合わせフォーム作成のまとめ

箇条書きで作り方まとめ

  1. 問い合わせフォームのHTML部分作成
  2. 送信をおこなうPHPスクリプト作成
  3. スパム対策として reCAPTCH 実装

以上、PHP + JS で問い合わせフォームを作る手順でした。ではまた

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください