お問い合わせフォームを作ってみる -要素・機能編-

こんにちは、ユアサです。

今回は、簡易的ではありますがお問い合わせを想定したフォームの作成をしていきます。
フォーム作成のお手伝いはしたことがありますが、一人で作成したことがなかったので一つひとつ順を追って作成していきたいと思います。
まずは、フォームを作成するにあたって必須となる要素をまとめていきます。

HTMLの要素

  • form要素
    フォームの親要素です。action属性やmethod属性など、formに必要なタグや内容は全てこの要素の中に入れて記述します。
  • input要素・select要素・textarea要素
    入力フォームの部品を作成するための要素です。type属性、name属性などが入ります。
  • label要素
    ラベルテキストと入力部品を関連づけることができます。
  • button要素
    ボタンを作成することができます。「戻る」や「送信」を作成する際に使います。

この4つを使ってフォームの基礎を作っていきます。
しかしこれだけではお問い合わせフォームとして動作しないので、PHPで機能を追加していきます。

PHPで作成する機能

  • バリデーション
    フォームに入力して欲しい項目が正しい形式で入力されているか確認し、入力ミスを防ぐ役割があります。
    バリデーションと言っても入力項目によって入力される値が違うため、入力項目に合わせたバリデーションを用意する必要があります。
    よく使うバリデーションとして4つ挙げられます。

    1. 必須項目のチェック
    2. 最大値のチェック
    3. メールアドレスのチェック
    4. 電話番号や郵便番号のチェック
  • 自動返信メール
    ユーザと管理者が実際に入力内容を送信・受信できたのか確認するためにも、またその”控え”としてメールを保管できるという意味でも、完了画面まで進んだタイミングでユーザに自動的にメール送信する機能は必須になってきます。
    メールのタイトルや文章も、テンプレートとして設定できます。

  • ファイルアップロード機能
    製品のお問い合わせを想定した際に、対象商品の画像ファイルやPDFファイルなどをアップロードできる機能もあれば、より使い勝手がよくなりそうです。
    また添付したファイルを確認画面で内容が確認できるようにするのも大事です。

これらの機能を実装すれば、より便利なフォームができそうです!作成する際に実装していこうと思います。

まとめ

今回はお問い合わせを想定したフォーム作成の前段階として、HTMLの要素と実装していきたい要素・機能についてまとめました。
次回からはこれらの実装を目的としてフォーム作成に取り組んでいく予定です。
最後まで読んでいただきありがとうございました(^人^)