PHPで自動返信メール機能付きのコンタクトフォームを作成する（入力画面）

PHP2016.6.10

最終更新日：2020.2.21 Update!!

今回はPHPで作成する自動返信メール機能が付いたコンタクトフォームについて。このコンタクトフォームは各フォームパーツへ入力された値を確認画面に表示し、その値をメールで送信するという内容です。

コンタクトフォームの仕組み

コンタクトフォームの画面については、

1.情報を入力する「入力画面」【form.php】
2.入力した情報を確認する「確認画面」【check.php】
3.情報を送信し閲覧者へ伝える「送信画面」【send.php】

の3つの画面から構成されます。そしてシステムの仕組みについて、おおまかに次のような流れになります。

1.入力画面でinputやtextareaなどのフォームパーツに情報が入力される
2.入力した情報を値としてPOST形式で確認画面へ送られPOST変数に格納されます
3.確認画面で入力された情報が表示される
4.POST変数をSESSION変数に格納
5.送信画面でSESSION変数の値をメール送信し完了のメッセージを表示する

今回から第3回に分けてソースコードも合わせてまとめていきたいと思います。また、当記事で紹介しているのはメールフォームの動作についてまとめている内容になります。実用においてはこれ以外にも十分なセキュリティ対策が必要となるので、あらかじめご注意ください。また入力値のバリデーションここでは紹介していません。別記事「PHPでサーバーサイドのフォームバリデーションを実装する」にて紹介しています。（続きの記事はこちらから）・PHPで自動返信メール機能付きのコンタクトフォームを作成する（確認画面）・PHPで自動返信メール機能付きのコンタクトフォームを作成する（送信画面）

コンタクトフォームの入力画面

HTMLでまずはフォームのパーツを生成します。その後tableなどでレイアウトを整えます。【form.php】※一部抜粋

<form method="post" action="./check.php">
  <?php
    //CSRF対策のワンタイムトークン発行
    $randomNumber = openssl_random_pseudo_bytes(16);
    $token = bin2hex($randomNumber);
    echo '<input name="input_token" type="hidden" value="'.$token.'">';

    //トークンをセッションに格納
    session_start();
    $_SESSION['input_token'] = $token;
  ?>
  <table>
    <thead>
      <tr>
        <th colspan="2">
          <h1>PHPメールフォームサンプル（入力画面）</h1>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>全角テキスト</th>
        <td><input type="text" name="input_text" value="" placeholder="テキストを入力してください"></td>
      </tr>
      <tr>
        <th>カタカナ</th>
        <td><input type="text" name="input_kana" value="" placeholder="フリガナを入力してください"></td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td><input type="text" name="input_email" value="" placeholder="メールアドレスを入力してください"></td>
      </tr>
      <tr>
        <th>電話番号</th>
        <td><input type="text" name="input_tel" value="" placeholder="電話番号を入力してください"></td>
      </tr>
      <tr>
        <th>URL</th>
        <td><input type="text" name="input_url" value="" placeholder="urlを入力してください"></td>
      </tr>
      <tr>
        <th>郵便番号</th>
        <td><input type="text" name="input_zipcode" value="" placeholder="郵便番号を入力してください"></td>
      </tr>
      <tr>
        <th>ラジオボタン</th>
        <td>
          <label><input type="radio" name="input_radio" value="ラジオボタン選択肢1" selected>ラジオボタン選択肢1</label>
          <label><input type="radio" name="input_radio" value="ラジオボタン選択肢2">ラジオボタン選択肢2</label>
          <label><input type="radio" name="input_radio" value="ラジオボタン選択肢3">ラジオボタン選択肢3</label>
        </td>
      </tr>
      <tr>
        <th>チェックボックス</th>
        <td>
          <label><input type="checkbox" name="input_checkbox[]" value="チェックボックス選択肢1">チェックボックス選択肢1</label>
          <label><input type="checkbox" name="input_checkbox[]" value="チェックボックス選択肢2">チェックボックス選択肢2</label>
          <label><input type="checkbox" name="input_checkbox[]" value="チェックボックス選択肢3">チェックボックス選択肢3</label>
        </td>
      </tr>
      <tr>
        <th>セレクトボックス</th>
        <td>
          <select name="input_selectbox">
            <option value="" selected>選択してください</option>
            <option value="セレクトボックス選択肢1">セレクトボックス選択肢1</option>
            <option value="セレクトボックス選択肢2">セレクトボックス選択肢2</option>
            <option value="セレクトボックス選択肢3">セレクトボックス選択肢3</option>
          </select>
        </td>
      </tr>
      <tr>
        <th>複数行テキスト</th>
        <td>
          <textarea name="input_textarea" value="" placeholder="複数行のテキストを入力してください"></textarea>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">
          <input type="reset" value="リセット">
          <input type="submit" value="確認画面へ">
        </td>
      </tr>
    </tfoot>
  </table>
</form>

まず、formタグのaction属性には送信先画面であるcheck.phpへのパスを指定します。method属性にはpostの値を指定します。そして、最初に行う処理ですが、CSRF対策として、ワンタイムトークンを発行し、hiddenのインプット要素でPOSTで送信します。合わせて$_SESSIONのグローバル変数にも同じものを入れておきます。この後、確認画面にて、きちんとフォーム経由でデータを送信しているかをトークンを照らし合わせることで確認します。次に文字入力のinputについては、名前や件名など全角・半角文字が入力される部分には、type属性の値をtextに、電話番号はtelの値、メールアドレスはmailの値、URLにはurlの値をそれぞれ指定します。value属性の値は空にします。name属性はフォームの値を受け渡す際に固有の識別として使います。id属性はここでは必須ではないですが、バリデーションなどで項目の指定する際に使うので、まずはname属性と揃えておきます。複数行の文字入力はtextareaタグで構成し、name属性を設定します。必要に応じてrows属性、cols属性もそれぞれ指定します。選択肢項目のinputである単一選択のラジオボタンにはtype属性にradioの値を、value属性に項目名を、name属性には任意の値を入れます。単一選択でもプルダウン式のセレクトボックスにはselectタグとoptionタグで構成し、selectタグのname属性に任意の値を、optionタグのvalueに項目名を入れます。複数選択のinputであるチェックボックスはtype属性をcheckboxに、value属性に項目名を、name属性には任意の値入れた後に” [] ”を追加します。これは複数の項目を選択した際に情報を配列として扱う必要があるためです。ボタンはinputタグもしくはbuttonタグで構成し、それぞれtype属性で指定します。送信ボタンは値をsubmitに、リセットボタンは値をresetに設定します。重要なのは、