【PHP】コンタクトフォームの作り方
ここではPHPを使ったコンタクトフォーム（お問い合わせフォーム）の作り方を紹介します。
最近は WordPress でホームページやブログを簡単に作れるようになり、お問い合わせフォームもプラグインで簡単に追加できるようになりました。
ゼロから作ることは少なくなっていますが、お問い合わせフォームには PHP の基礎がたくさん詰まっているので、PHPの学習にはとてもオススメです。
全ての手順を紹介していますので、PHP 初心者の方もぜひ挑戦してみてください！
はじめに
デモ動画
まずはデモ動画をご覧ください。このようなお問い合わせフォームを作っていきます。
今回作るお問い合わせフォームでは
- POST フォーム
- 入力チェック
- メール送信
を実装します。
私も初めて作った PHP アプリケーションがお問い合わせフォームでしたが、当時は CSS を知らなかったので以下のようなとても質素なものでした。
これだと「お問い合わせフォームを作った」という感じがしないので、今回は Bootstrap という無料で使えるサービスを使ってお問い合わせフォームらしくしていきます。
Bootstrap はフレームワークといい、難しいコードを書かずにシンプルで綺麗なフォームやボタンを作ることができます。今回は使いませんが JavaScript でモーダルや切り替えタブなども簡単に作成できます。
開発環境
以下の環境で動作確認をしています。
- Windows + XAMPP
- Mac + MAMP
また XAMPP や MAMP などでメール送信を行うには、別途設定が必要になります。
以下の記事でメール送信の設定・確認を行ってからお進みください。
開発の流れ
Web アプリを作るときは、いきなり PHP のコードを書くのではなく
- HTML を作成
- CSS でスタイルを付ける
- PHP コードを組み込む
という手順で進めていきます。
まずレイアウトを作ることで、どこに PHP を書けば良いかを明確にできるのでミスを減らすことができます。
それでは始めていきましょう！
HTML
PHP ファイルを作成
はじめに PHP ファイルを１つ作成します。
ファイル名は何でも良いですが、必ず PHP 拡張子 ファイル名.php で作成してください。
ここでは contact.php としました。
作成したファイルを XAMPP や MAMP の htdocs フォルダに置きます。
HTMLを書く
contact.php に、以下のように HTML を書きます。
container, row, form-control など、この HTML に書いているクラス名は全て Bootstrap で指定されているクラス名です。
詳しい使い方は割愛しますが、これらの HTML は Bootstrap のドキュメントからコピー＆ペーストで使うことができます。
Bootstrap ドキュメント
ブラウザで確認
ウェブブラウザで http://localhost/contact.php を開いてみましょう。
このようになっていれば HTML は完成です。
CSS
Bootstrap の CSS ファイルを読み込みましょう。
Bootstrap 5 の公式サイト https://getbootstrap.com/ を開いて、画面をスクロールすると Include via CDN という箇所があります。
１つ目のコードの アイコンをクリックしてコードをコピーします。
コピーしたコードを6行目に追加します。
ブラウザを更新してみてください。Bootstrap が適用されたでしょうか？
これでレイアウトは完成です！
PHP
全体の流れ
このお問い合わせフォームでは、メールを送信する前に「すべての項目が入力されているか」をチェックします。
すべての項目が入力されている場合は
メール送信 → 入力された項目をリセット → 完了メッセージの表示
という処理を行います。
未入力の項目がある場合は「未入力の項目があります」とメッセージを表示しましょう。
PHPコード
少し長いですが、一気に書いてしまいましょう！
追加・変更しているコードは1~49・64~74・78・81・84・87行目です。
30行目
お問い合わせメールの送信先を指定します。
31・34行目
31・34行目に書いている “\r\n” は改行コードです。
ダブルクォーテーション “ で囲む必要があります。
37行目
この１行でメールを送信することができます。
mb_send_mail($to, $subject, $message, $headers);| $to | 宛先（カンマ区切りで複数のメールアドレスに送信できます） |
|---|---|
| $subject | 件名 |
| $message | 本文 |
| $headers | 差出人、Cc、Bcc （複数追加する場合は “\r\n” で区切ります） |
エラーメッセージ
64~68行目では、エラーメッセージの表示をしています。
$err_msg が空でない場合（$err_msg に文字列がセットされている場合）にエラーメッセージを表示します。
送信完了メッセージ
70~74行目では、送信完了メッセージの表示をしています。
$complete_msg が空でない場合（$complete_msg に文字列がセットされている場合）に送信完了メッセージを表示します。
完成
これで全て完成です！
メールが送信されるかテストしてみてください。
メールが送信されない場合は、30行目の管理者メールアドレスをご確認ください。
またローカル環境でのメール設定をしていない方は設定を行って下さい。
まとめ
いかがだったでしょうか？
一番始めにも書きましたが、最近は WordPress でウェブサイトを作ることが多くなり、お問い合わせフォームはプラグインで簡単に作成できるようになりました。
しかしメール送信は欠かせない機能です。
私が今までに頂いたウェブサービスやショッピングサイトの開発の仕事でも、メール送信機能はほぼ100％実装しました。
例えばショッピングサイトの場合
- 受注メール（管理者宛）
- 注文受付メール（お客様宛）
- 支払確認メール（お客様宛）
- 発送メール（お客様宛）
- レビュー依頼メール（お客様宛）
- 新着レビューメール（管理者宛）
- ニュースレター（お客様宛）
など、たくさん種類があります。
さくっとメール機能を実装できるようになっておくと必ず役に立つと思います。
もっと PHP コードを書いてみたいという方は、ぜひ以下の記事もお読みください。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
