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

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で自動返信メール機能付きのコンタクトフォームを作成する(送信画面)

 

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

HTMLでまずはフォームのパーツを生成します。その後tableなどでレイアウトを整えます。

 

【form.php】※一部抜粋

<form id="mail-form" action="./check.php" method="post">
  <table>
    <thead>
      <tr>
        <td colspan="2">コンタクトフォーム</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>お名前</th>
        <td><input type="text" id="name" name="name" value="" placeholder="名前を入力してください"></td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td><input type="mail" id="email" name="email" value="" placeholder="メールアドレスを入力してください"></td>
      </tr>
      <tr>
        <th>電話番号</th>
        <td><input type="tel" id="tel" name="tel" value="" placeholder="電話番号を入力してください"></td>
      </tr>
      <tr>
        <th>URL</th>
        <td><input type="url" id="url" name="url" value="" placeholder="URLを入力してください"></td>
      </tr>
      <tr>
        <th>性別</th>
        <td>
          <input type="radio" id="sex-male" name="sex" value="男性">男性
          <input type="radio" id="sex-female" name="sex" value="女性">女性
        </td>
      </tr>
      <tr>
        <th>お住まいのエリア</th>
        <td>
          <select id="location" name="location">
            <option value="">選択してください</option>
            <option value="北海道・東北">北海道・東北</option>
            <option value="関東・甲信">関東・甲信</option>
            <option value="首都圏">首都圏</option>
            <option value="中部・東海">中部・東海</option>
            <option value="近畿・北陸">近畿・北陸</option>
            <option value="中国・四国">中国・四国</option>
            <option value="九州・沖縄">九州・沖縄</option>
          </select>
        </td>
      </tr>
      <tr>
        <th>お問い合わせ項目</th>
        <td>
          <input type="checkbox" id="check-inquiry" name="check[]" value="お問い合わせ">お問い合わせ
          <input type="checkbox" id="check-quotation" name="check[]" value="お見積もり">お見積もり
          <input type="checkbox" id="check-order" name="check[]" value="発注依頼">発注依頼
        </td>
      </tr>
      <tr>
        <th>件名</th>
        <td><input type="text" id="subject" name="subject" value="" placeholder="件名を入力してください"></td>
      </tr>
      <tr>
        <th>お問い合わせ内容</th>
        <td><textarea id="message" name="message" rows="5" cols="50"></textarea></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td><button type="reset" id="reset-input" name="reset-input">やり直す</button></td>
        <td><button type="submit" id="submit-input" name="submit-input">確認画面へ</button></td>
      </tr>
    </tfoot>
  </table>
</form>

 

まず、formタグのaction属性には送信先画面であるcheck.phpへのパスを指定します。method属性にはpostの値を指定します。

 

次に文字入力の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に設定します。

 

重要なのは、

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

 

といったところです。

 

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

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

 

  • このエントリーをはてなブックマークに追加
>>記事一覧に戻る