designsupply.llc
  • aboutabout
  • servicesservices
  • worksworks
  • mediamedia
  • contactcontact
  • homeサイトトップ
  • about会社概要
  • services業務内容
  • works実績紹介
  • mediaメディア
  • contactお問い合わせ
ja/

media

メディア

  1. サイトトップ
  2. メディア
  3. プログラミングの記事
  4. PHPで自動返信メール機能付きのコンタクトフォームを作成する(確認画面)

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

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

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

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

Sponsored Link

  • Showcase
  • Startify UI
  • Functional Gradation Generator
  • Coloooors

categories

  • WordPress(61)
  • JavaScript(49)
  • Vue.js(48)
  • CSS(46)
  • jQuery(34)
  • Nuxt.js(22)
  • Sass(21)
  • Gulp(17)
  • webpack(16)
  • PHP(14)
  • HTML(14)
  • GSAP(11)
  • React(10)
  • Vite(9)
  • Pug(9)
  • Laravel(8)
  • Cordova(8)
  • Linux(7)
  • Next.js(6)
  • Apache(5)
  • Shopify(4)
  • REST API(4)
  • Node.js(4)
  • Smarty(3)
  • Git(3)
  • JSON(3)
  • その他プログラミング(3)
  • Google Apps API(3)
  • Bootstrap(3)
  • 環境構築・システム(3)
  • TypeScript(2)
  • EJS(2)
  • RMS(2)
  • Docker(2)
  • Instagram API(2)
  • Excel VBA(2)
  • SVG(1)
  • Dart(1)
  • ECカートASP(1)
  • Markdown(1)
  • AMP(1)
  • Nginx(1)
  • XML(1)
  • shellscript(1)
  • Ruby(1)
  • MySQL(1)
  • 次の記事
  • 一覧に戻る
  • 前の記事

まだ依頼内容が決まっていなくても、ご相談ください。

課題の整理や小さな検証、UI/UX・フロントエンドの部分的な支援から始められます。

お問い合わせやご相談はこちらから

Webサイト・プロダクトの企画設計/UI・UXデザイン/フロントエンド開発合同会社デザインサプライ(DesignSupply. LLC)

Office:大阪府大阪市天王寺区清水谷町3-22
Email:info@designsupply-web.com
home
  • サイトトップ
about
  • 3つのポリシー
  • 経営理念
  • 代表・クリエイター紹介
  • 会社概要
services
  • ビジネス・プロダクト支援
  • UI/UX・フロントエンド開発支援
  • プロジェクトの進め方・支援体制
  • エデュケーション事業
works
  • 開発プロジェクト
  • クリエイティブ支援
  • 自社プロダクト
media
  • デザイン
  • プログラミング
  • マーケティング
  • Web開発
  • 写真・動画制作
contact
  • お問い合わせ
news
  • インフォメーション
privacy
  • プライバシーポリシー

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

© 2013 - 2026 DesignSupply.LLC
サイトトップへ
contact