お問い合わせフォームを作る

Webサイトのお問い合わせフォームを作成する

Webサイトやアプリケーションには必ずと言っていいほどお問い合わせフォームが設置してあります。
フォームによって入力する項目は様々ですが、一度は使ったことがあるのではないでしょうか。

お問い合わせフォームはとてもシンプルながら、利用者と運営者を繋ぐ非常に大切な存在です。

本ワークショップでは、実際に使うことができるお問い合わせフォームを1から作成していきます。
仕組みを1つずつ理解しながら作成できるように、これから複数回に分けて以下の機能を持つお問い合わせフォームを作成していきます。

• 入力された内容をメールにして管理者へ送信
• 自動返信メールを送信
• 入力された値が正しい形式かを確認(バリデーション)
• ファイル添付
• 二重送信の防止

フォームの入力形式についても単純なテキスト入力のみではなく、ラジオボタンやプルダウンメニューのような選択形式の入力も対応し、さらにファイルを添付する機能も追加していきます。

以上の機能を持つフォームが完成するときには、PHPプログラミングにおいて必須となるスーパーグローバルやセッションの扱い方、ファイルの送信（アップロード）、メール送信、セキュリティに関する基礎知識まで一通りを習得することができます。

なお、このワークショップではPHPの基本的な文法についてはある程度理解していることを前提に進めていきます。
復習をかねて基本的な文法を抑えておきたい方は、まずはこちらの入門編をおすすめします。

作成するお問い合わせフォームのページ構造

これから作るお問い合わせフォームは、次の3ページ構成になります。

• (1)入力ページ – 「氏名」や「メールアドレス」などを入力
• (2)確認ページ – 入力した内容を確認
• (3)完了ページ – 送信完了メッセージを表示

必要なページはこの3ページですが、1ページの中で表示を切り替えていく形で実装していきます。

ページを切り替える仕組みはざっくり言うと、それぞれのページに設置するボタンが押されたら入力データの送受信を行い、そのデータから次に表示するページを判定するイメージになります。
詳細は実際に作成しながら確認していきましょう。

全体の流れ

これから全10回に分けて、お問い合わせフォームを作っていきます。
全体の流れと、それぞれの回で実装する内容は次のようになります。

1. お問い合わせフォームの入力ページを作成する

まず最初に「index.php」というファイルを作成して、入力ページのHTMLを作成していきます。
フォームで入力したデータが送受信できるかを確認します。

1. お問い合わせフォームのコードを書いていくファイルを作成する
2. 入力ページのHTMLを作成する
3. POST通信でフォームに入力したデータを送信する
4. 受信したデータを確認する

2. フォームの確認ページ&完了ページを作成する

入力ページに続いて、フォームに入力した内容を確認するページと完了ページを作成していきます。
この回で、受け取ったデータから表示するページを判定して切り替える仕組みも実装します。

1. 確認ページのHTMLを作成する
2. 完了ページのHTMLを作成する
3. 表示するページを切り替える

3. 自動返信メールの実装

確認ページから完了ページに移動したときに、自動的にお礼の返信メールを送信する機能を実装していきます。
メールの本文も入力したデータが反映されるように設定します。

1. 自動返信メールを送信
2. フォームに入力されたデータから本文を作成
3. ユーザー向けと運営者向けにそれぞれメールを送信

4. 入力値の引き継ぎ

確認ページで「戻る」ボタンを押したときに、入力データを引き継いだ状態で入力ページに戻れるように設定します。
また、ここで入力項目を追加します。

1. ページ間のデータの受け渡しを実装
2. 入力項目を4つ追加

5. 入力値のサニタイズ

フォームへ入力したデータをサーバー側で安全に処理できるように、データを無害化（サニタイズ）する機能を実装します。

1. 入力したデータの無害化（サニタイズ）を実装

6. 入力値のバリデーション

フォームにきちんと入力がされているかチェックする「バリデーション」という機能を実装します。
バリデーションに引っかかった場合は入力ページに戻り、エラーメッセージを表示する設定も行います。

1. 必須項目の未入力チェックを実装
2. 入力にエラーがあるときは入力ページへ戻る
3. エラーがあるときはエラーメッセージを表示

7. 入力項目に合わせた様々なバリデーション

前章で実装した未入力チェックに加えて、入力されたデータが正しい形式で入力されているかチェックする機能を実装します。

1. 正しく入力されているかデータをチェックする機能を追加
2. 入力項目ごとにエラーメッセージを設定

8. フォームにファイルアップロード機能をつける

お問い合わせフォームの入力項目に「画像ファイル添付」を追加するために、サーバーにファイルをアップロードする機能を実装します。

1. 画像ファイルをサーバーにアップロード
2. 確認ページに添付ファイルを表示

9. アップロードしたファイルをメールに添付する

前章に引き続き、「画像ファイル添付」で選択された画像ファイルを自動返信メールに添付します。

1. 自動返信メールに画像ファイルを添付

10. セッションでフォームの多重送信を防ぐ

完了ページでブラウザの再読み込み（リロード）があると同じ内容の自動返信メールを送信してしまいますが、セッションを使った防止対策を施します。

1. セッションの読み込み＆書き込み

以上が全体の構成です。
お問い合わせフォームに実装する機能の仕組みを解説しながら、1歩ずつ進めていきます。

もし作っていて分からないことがあったり、お気付きの点がありましたら、各ページの下部にある「Good」「Bad」ボタンからメッセージを送っていただくか、お問い合せページよりお気軽にご連絡ください。