0%

Programmingプログラミングナレッジ

Posted:2016.06.13

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

前回に引き続き、今回も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で自動返信メール機能付きのコンタクトフォームを作成する(送信画面)」では、これらの入力情報をメールで送信させるための送信画面を作成していきます。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】