Webサイトのお問い合わせフォームを作成する
Webサイトやアプリケーションには必ずと言っていいほどお問い合わせフォームが設置してあります。
フォームによって入力する項目は様々ですが、一度は使ったことがあるのではないでしょうか。
お問い合わせフォームはとてもシンプルながら、利用者と運営者を繋ぐ非常に大切な存在です。
本ワークショップでは、実際に使うことができるお問い合わせフォームを1から作成していきます。
仕組みを1つずつ理解しながら作成できるように、これから複数回に分けて以下の機能を持つお問い合わせフォームを作成していきます。
- 入力された内容をメールにして管理者へ送信
- 自動返信メールを送信
- 入力された値が正しい形式かを確認(バリデーション)
- ファイル添付
- 二重送信の防止
フォームの入力形式についても単純なテキスト入力のみではなく、ラジオボタンやプルダウンメニューのような選択形式の入力も対応し、さらにファイルを添付する機能も追加していきます。
以上の機能を持つフォームが完成するときには、PHPプログラミングにおいて必須となるスーパーグローバルやセッションの扱い方、ファイルの送信(アップロード)、メール送信、セキュリティに関する基礎知識まで一通りを習得することができます。
なお、このワークショップではPHPの基本的な文法についてはある程度理解していることを前提に進めていきます。
復習をかねて基本的な文法を抑えておきたい方は、まずはこちらの入門編をおすすめします。
作成するお問い合わせフォームのページ構造
これから作るお問い合わせフォームは、次の3ページ構成になります。
- (1)入力ページ - 「氏名」や「メールアドレス」などを入力
- (2)確認ページ - 入力した内容を確認
- (3)完了ページ - 送信完了メッセージを表示
必要なページはこの3ページですが、1ページの中で表示を切り替えていく形で実装していきます。
ページを切り替える仕組みはざっくり言うと、それぞれのページに設置するボタンが押されたら入力データの送受信を行い、そのデータから次に表示するページを判定するイメージになります。
詳細は実際に作成しながら確認していきましょう。
全体の流れ
これから全10回に分けて、お問い合わせフォームを作っていきます。
全体の流れと、それぞれの回で実装する内容は次のようになります。
以上が全体の構成です。
お問い合わせフォームに実装する機能の仕組みを解説しながら、1歩ずつ進めていきます。
もし作っていて分からないことがあったり、お気付きの点がありましたら、各ページの下部にある「Good」「Bad」ボタンからメッセージを送っていただくか、お問い合せページよりお気軽にご連絡ください。