[PHP入門]お問い合わせフォームの作り方を徹底解説![前編]

お問い合わせフォームはユーザーとの窓口になります。

使いやすいお問い合わせフォームを設置することでお問い合わせが増えるきっかけにもなるでしょう。

このページではお問い合わせフォームの作り方を詳しく解説していきます。

このページで解説すること

1.お問い合わせフォームの構成

2.HTMLでお問い合わせフォームの作成

3.formタグ

4.inputタグ

5.textareaタグ

6.submitタグ

1.お問い合わせフォームの構成

お問い合わせフォームを設置する場合、どのような画面の動きになるのでしょうか。

一般的にお問い合わせフォームの画面遷移は入力画面、確認画面、完了画面の3段階となっています。

それそれどのような役割を担っているのでしょうか。

入力画面
入力画面はWebサイトを訪問したユーザーがお問い合わせのために名前、電話番号、FAX番号、お問い合わせ内容等を入力する画面です。
確認画面
確認画面はユーザーが入力した内容が正しいかどうかを確認する画面です。
確認画面を飛ばして、完了画面に遷移すると入力ミスがあった場合、送信者と受信者の両方にとって手間がかかる原因になります。
完了画面
完了画面はお問い合わせフォームが送信されたことを通知するための画面です。

ここでは詳しく解説はしませんが、お問い合わせフォームの入力内容やデザインはお問い合わせが増えるかどうかの一つの要因になります。

そのため、ユーザーが使いやすいお問い合わせフォームにする必要があります。

2.HTMLでお問い合わせフォームの作成

お問い合わせフォームを作成していく前に、フォームとは何かを解説していきます。

フォームはユーザーが入力した内容を受け取って画面を移動させる役割を担っています。

フォームを利用することでお問い合わせフォームだけでなく、予約システム、検索ページなど様々なWebアプリケーションを作成することができます。

フォーム自体はHTMLで作成していきます。

HTMLはWebページの構造を記述するためのマークアップ言語で、HTMLタグを利用して表記していきます。

HTMLについての詳しい解説は以下をご覧下さい。

あわせて読みたい

⇒⇒HTMLについての詳しい詳細はこちら

HTML & CSSとは?

それではお問い合わせフォームをHTMLで作成していきましょう。

以下はHTMLで入力画面を作成したプログラムです。

<html>

<head>

 <title>お問い合わせフォーム</title>

</head>

<body>

 <form method="POST" action="check.php">

  <table>

   <tr>

    <td>お名前</td>

    <td><input type="text" name="name" size="25"></td>

   </tr>

   <tr>

    <td>メールアドレス</td>

    <td><input type="text" name="mail" size="25"></td>

   </tr>

   <tr>

    <td>お問い合わせ内容</td>

    <td><textarea row="6" cols="25" name="contents"></textarea></td>

   </tr>

  </table>

  <input type="submit" name="submit" value="確認画面へ">

 </form>

</body>

</html>

上記を見て分かるかと思いますが、お問い合わせフォームは主にformタグ、inputタグ、textareaタグを利用してフォームを作成します。

以下は上記のプログラムで作成した入力画面となっています。

入力画面

次にformタグ、inputタグ、textareaタグを個別に詳しく見ていきましょう。

3.formタグ

formタグは入力画面を次の画面に渡す役割を担っています。

そのため、text、textarea、submitなどの要素はformタグ内に記述する必要があります。

次にformタグの中身を詳しく見ていきましょう。

methodでは送信方法を指定しており、POSTでデータを送信しています。

actionでは送信先を指定しており、check.phpにデータを送信しています。

そのため、「確認画面へ」というボタンをクリックすると、画面がcheck.phpに遷移します。

あわせて読みたい

⇒⇒POSTについての詳しい詳細はこちら

通信プロトコルのHTTPとは何かわかりやすく解説!

4.inputタグ

inputタグはテキストボックスや送信ボタンを設置するために使用します。

inputタグの中身を詳しく見ていきましょう。

typeでは種類を指定しています。

textと指定されている時は、テキストボックスが設置され、submitと指定されている時は、ボタンが設置されます。

submitと指定するとクリックしたタイミングで確認画面に切り替えることができます。

nameでは名前を指定しています。

nameはブラウザに表示されませんが、PHPと連携する時に使用されます。

sizeではテキストボックスの長さを指定しています。

5.textareaタグ

textareaタグはお問い合わせ内容などの長い文字列のために使用します。

textareaタグの中身を詳しく見ていきましょう。

rowでは行数を指定しています。

colsでは幅を指定しています。

nameでは名前を指定しており、PHPと連携する時に使用されます。

ポイント

・お問い合わせフォームは通常、入力画面・確認画面・完了画面の3構成で作られます

・お問い合わせフォームはformタグ・inputタグ・textareaタグを使用して作成していきます

2020年02月04日