0%

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

Posted:2016.06.10

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

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

 

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

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

 

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

 

の3つの画面から構成されます。

そしてシステムの仕組みについて、おおまかに次のような流れになります。

 

  1. 1.入力画面でinputやtextareaなどのフォームパーツに情報が入力される
  2. 2.入力した情報を値としてPOST形式で確認画面へ送られPOST変数に格納されます
  3. 3.確認画面で入力された情報が表示される
  4. 4.POST変数をSESSION変数に格納
  5. 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に設定します。

 

重要なのは、

  • ・CSRF対策としてワンタイムのトークンを用意する
  • ・inputやtextarea、buttonなどの各フォームで扱うパーツを揃える
  • ・全てのフォーム部品にname属性を設定する
  • ・選択肢項目にはvalueの値を設定する
  • ・複数選択のチェックボックスのname属性には値へ” [] ”を追加する

 

といったところです。

 

これでコンタクトフォームの入力部分が出来上がりました。

次は「PHPで自動返信メール機能付きのコンタクトフォームを作成する(確認画面)」で、これらの入力値を受け取り、確認画面へ表示させる流れをまとめていきます

 

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

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

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

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

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

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

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

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

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

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

CAPTCHA


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