OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

PHPで自動返信メール機能付きのコンタクトフォームを作成する(確認画面)

最終更新日:2020.2.21 Update!!
前回に引き続き、今回もPHPでのコンタクトフォーム作成についてまとめていきます。入力画面に引き続き、フォームの入力情報を表示させる確認画面を作成していきます。また、当記事で紹介しているのはメールフォームの動作についてまとめている内容になります。実用においてはこれ以外にも十分なセキュリティ対策が必要となるので、あらかじめご注意ください。また入力値のバリデーションここでは紹介していません。別記事「PHPでサーバーサイドのフォームバリデーションを実装する」にて紹介しています。   この確認画面では、入力画面で入力された情報を表示させたのち、POST変数をSESSION変数に格納する動作までを行います。  
コンタクトフォームの確認画面
入力画面と同じくHTMLで作成します。今回は入力画面のフォーム部分をベースに一部変更するだけの形になります。またこの画面ではPOST変数をSESSION変数に格納するのでファイルの先頭にPHPを記述します。   【check.php】※一部抜粋
<?php 
  session_start();
  if(!$_POST){
    header('Location: ./form.php');
  }
  
  //トークンチェック・POSTからSESSIONへ受け渡し
  if($_SESSION['input_token'] === $_POST['input_token']) {
    $_SESSION = $_POST;
    $tokenValidateError = false;
  } else {
    $tokenValidateError = true;
  }
?>

〜 一部省略 〜

<form method="post" action="./send.php">
  <table>
    <thead>
      <tr>
        <th colspan="2">
          <h1>PHPメールフォームサンプル(確認画面)</h1>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>全角テキスト</th>
        <td>
          <?php echo htmlspecialchars($_POST['input_text'], ENT_QUOTES, 'UTF-8'); ?>
        </td>
      </tr>
      <tr>
        <th>カタカナ</th>
        <td>
          <?php echo htmlspecialchars($_POST['input_kana'], ENT_QUOTES, 'UTF-8'); ?>
        </td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td>
          <?php echo htmlspecialchars($_POST['input_email'], ENT_QUOTES, 'UTF-8'); ?>
        </td>
      </tr>
      <tr>
        <th>電話番号</th>
        <td>
          <?php echo htmlspecialchars($_POST['input_tel'], ENT_QUOTES, 'UTF-8'); ?>
        </td>
      </tr>
      <tr>
        <th>URL</th>
        <td>
          <?php echo htmlspecialchars($_POST['input_url'], ENT_QUOTES, 'UTF-8'); ?>
        </td>
      </tr>
      <tr>
        <th>郵便番号</th>
        <td>
          <?php echo htmlspecialchars($_POST['input_zipcode'], ENT_QUOTES, 'UTF-8'); ?>
        </td>
      </tr>
      <tr>
        <th>ラジオボタン</th>
        <td>
          <?php echo htmlspecialchars($_POST['input_radio'], ENT_QUOTES, 'UTF-8'); ?>
        </td>
      </tr>
      <tr>
        <th>チェックボックス</th>
        <td>
          <?php 
            foreach ($_POST['input_checkbox'] as $value) {
              echo htmlspecialchars("{$value},", ENT_QUOTES, 'UTF-8');
            };
          ?>
        </td>
      </tr>
      <tr>
        <th>セレクトボックス</th>
        <td>
          <?php echo htmlspecialchars($_POST['input_selectbox'], ENT_QUOTES, 'UTF-8'); ?>
        </td>
      </tr>
      <tr>
        <th>複数行テキスト</th>
        <td>
          <?php echo htmlspecialchars($_POST['input_textarea'], ENT_QUOTES, 'UTF-8'); ?>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">
          <input type="button" onClick="history.back();" value="戻る">
          <?php if(!$tokenValidateError): ?>
            <input type="submit" value="送信する">
          <?php endif; ?>
        </td>
      </tr>
    </tfoot>
  </table>
</form>
  まず、プログラム先頭に記述されているPHPコードですが、session_start()でセッションを開始します。次の条件分岐ではフォーム入力からの遷移でないアクセスの場合にフォーム入力画面へリダイレクトさせています。最後にPOST変数をSESSION変数に格納するのですが、先ほど入力画面から送信された、hiddenのインプット要素に入ったトークンの値と$_SESSIONに入ったトークンの値を比較し、一致するときのみ、フォームの入力値をSESSION変数に代入するようにします。   次にフォーム部分ですが、基本的には入力画面のinputなどのフォーム部品がなくなり、代わりに入力内容を表示させるPHPのプログラムが入っている形になります。ただし、フォームのaction属性ではPOST形式の送信先を送信画面であるsend.phpを指定します。   入力内容表示のPHPプログラム部分ですが、htmlspecialchars()でクロスサイトスクリプティング(XSS)対策をします。こうすることで万が一フォームの入力情報に悪質なプログラムを埋め込まれても、HTMLタグやスクリプトなどのコードを通常の文字列として表示し、未然に防ぐことができます。   表示させる項目は各inputなどのフォーム部品に入力された情報を受け取るので、POST変数の配列要素名を対応するinputのname属性を指定します。そして続くENT_QUOTESでシングルクォートとダブルクォートの両方を置き換え、UTF-8の文字コード指定を行います。   しかし、複数選択のチェックボックスの値を表示させるためには、この方法では表示させることができません。選択された項目の値が配列で格納されているため、foreach文を使って一つずつ値を取り出す必要があります。$valueが値の変数になります。   そして値はそれぞれechoで文字列として出力します。ボタンについて入力画面に戻る方には、入力画面へのリンクをつける、もしくはjavascriptのhistory.back()で対応し、送信ボタンにはtype属性にsubmitの値を入れます。この時送信ボタンはトークンの比較エラーがない場合のみ表示されるようにしておきます。   以上がコンタクトフォームの確認画面になります。次回記事「PHPで自動返信メール機能付きのコンタクトフォームを作成する(送信画面)」では、これらの入力情報をメールで送信させるための送信画面を作成していきます。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram