PHPでコンタクトフォームの入力画面を作る

今回はPHPを使ってコンタクトフォームの入力画面を作成する方法を紹介します。

作成する内容はコンタクトフォームを作成し、送信先のファイルまで情報を送るところまでです。難易度自体は簡単だと思います。

 

コンタクトフォームのコード

今回作成するコンタクトフォームはform.php、送信先はcheck.phpとします。

流れとしては、<input>や<textarea>に必要事項をユーザーに入力してもらい、情報をPOST変数に格納してデータを送るという感じです。

 

まずはHTMLでフォームを作成し、<table>などを使って少し整えておきましょう。

form.php(一部省略)

<form id="mail-form" action="./check.php" method="post">
  <table>
    <thead>
      <tr>
        <td colspan="2">コンタクトフォーム</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>お名前</th>
        <td><input type="text" id="name" name="name" value="" placeholder="名前を入力してください"></td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td><input type="mail" id="email" name="email" value="" placeholder="メールアドレスを入力してください"></td>
      </tr>
      <tr>
        <th>電話番号</th>
        <td><input type="tel" id="tel" name="tel" value="" placeholder="電話番号を入力してください"></td>
      </tr>
      <tr>
        <th>URL</th>
        <td><input type="url" id="url" name="url" value="" placeholder="URLを入力してください"></td>
      </tr>
      <tr>
        <th>性別</th>
        <td>
          <input type="radio" id="sex-male" name="sex" value="男性">男性
          <input type="radio" id="sex-female" name="sex" value="女性">女性
        </td>
      </tr>
      <tr>
        <th>お住まいのエリア</th>
        <td>
          <select id="location" name="location">
            <option value="">選択してください</option>
            <option value="北海道・東北">北海道・東北</option>
            <option value="関東・甲信">関東・甲信</option>
            <option value="首都圏">首都圏</option>
            <option value="中部・東海">中部・東海</option>
            <option value="近畿・北陸">近畿・北陸</option>
            <option value="中国・四国">中国・四国</option>
            <option value="九州・沖縄">九州・沖縄</option>
          </select>
        </td>
      </tr>
      <tr>
        <th>お問い合わせ項目</th>
        <td>
          <input type="checkbox" id="check-inquiry" name="check[]" value="お問い合わせ">お問い合わせ
          <input type="checkbox" id="check-quotation" name="check[]" value="お見積もり">お見積もり
          <input type="checkbox" id="check-order" name="check[]" value="発注依頼">発注依頼
        </td>
      </tr>
      <tr>
        <th>件名</th>
        <td><input type="text" id="subject" name="subject" value="" placeholder="件名を入力してください"></td>
      </tr>
      <tr>
        <th>お問い合わせ内容</th>
        <td><textarea id="message" name="message" rows="5" cols="50"></textarea></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td><button type="reset" id="reset-input" name="reset-input">やり直す</button></td>
        <td><button type="submit" id="submit-input" name="submit-input">確認画面へ</button></td>
      </tr>
    </tfoot>
  </table>
</form>

 

解説

送信先のファイルにデータを送るためには<form>タグにはaction属性とmethod属性を指定する必要があります。

action属性には送信先のファイル名、method属性にはpostを指定します。

<input>のtype属性は全てtextでも問題ないですが、よりわかりやすいように電話番号はtel、メールアドレスにはmail、URLにはurlとしておきましょう。また、value属性の値はからにしておきます。

name属性は送信先で参照するので、わかりやすい文字列を指定しておきましょう。

idは指定しなくても大丈夫ですが、バリデーションなどで項目の指定する際に使うので、name属性と同じ値を入れておきます。

 

本文となるお問い合わせ内容の欄は<textarea>タグで作成します。必要に応じてcols、rowsの値も指定しておきましょう。

また、複数の選択肢からどれか1つだけを選択する場合は<input>タグのtype属性にradio、value属性に項目名、name属性にわかりやすい文字列を指定しておきます。ラジオボタンですね。

1つを選択する場合でもプルダウン形式にしたい場合は<selece>タグと<option>タグで構成します。ラジオボタンと同じようにvalue属性に項目名、name属性にわかりやすい文字列を指定しておきます。

複数選択可能にしたい場合はtype属性をcheckboxとします。value属性とname属性は上と同じです。

 

ボタン自体は<button>タグを使って作成し、役割をtype属性で指定することができます。送信ボタンならsubmit、入力値のリセットならresetと指定します。

 

最後に注意点ですが、チェックボックスのように複数選択できる項目のname属性は、値の最後に[]を追加することを忘れないでください。

これは項目が複数選択された場合に、送信先に選択された複数のデータを全て受け取れるようにするための記述です。忘れると複数選択したはずなのに、最初の1つしか送信されていないなんてことになるので注意しましょう。

コンタクトフォームの入力画面はだいたいこんな感じです。正直PHPはほとんど使いませんでしたね。

name属性は送信先のファイルでデータを指定する際に使うので、わかりやすい値をいえれておくのがいいでしょう。