お問合せフォームをPHPで実装してみた！（１）

Contents

1 実装内容
2 フォームの自動送信
3 次回予告

実装内容

こんにちは，レッドインパルスのアルバイターの秦です．

今回はインカレのお問い合わせフォームをPHPで実装してみたので，その方法とつまずくポイントの紹介をしていきます．以下は今回実装した機能です．

フォームの自動送信
確認・送信完了ページの追加
入力値の引継ぎ
formタグでの遷移防止対策
正規表現（エラーチェック）
多重送信防止
迷惑メールに送られないための対策

フォームの自動送信

以前まで僕のインカレでは相手側にメーラーを開かせることでお問い合わせを受け付ける方法を取っていましたが，UI等を考えるとゴミみたいな機能だったので今回自動送信と言う機能を実装しました．PHPでは入力値を変数に代入し表示・送信するようにすることで自動的にメールを送信することが出来ます．以下では実際のサイトのスクリーンショットを見ながら説明していきます．

フォームの基本構造

今回作成したお問合せフォームは確認ページと完了ページを新しく設けました．

入力ページでは内容を記入し，Checkボタンを押すと確認のページに切り替わります．確認ページではBackボタンを押すとデータは引き継がれたまま入力ページに戻り，Sendボタンを押すとメールが自分と運営側に送られ送信完了ページに切り替わります．

入力ページの作成

前段階として入力ページを作成しましょう．以下のコードをコピペするとスクリーンショットのようなページができます．

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
      <!--CSS-->
      <style rel="stylesheet" type="text/css">
        * {
          font-family: serif;
        }

        body {
          margin: 0;
        }

        footer {
          height: auto;
          width: auto;
          padding:70px 0 10px;
          background-color: #34353a;
        }

        footer hr {
          border: none;
          height: 3px;
          width: 30px;
          background-color: #731c80;
          margin-left: 0;
          text-align: left;
        }

        .footer-top {
          display: flex;
          justify-content: center;
          margin-bottom: 30px;
        }

        footer h3 {
          color: #ffffff;
          font-size: 28px;
        }

        #about-us {
          margin-right: 20px;
        }

        #about-us h3 {
          margin: 0px;
        }

        #about-us p {
          color: #68696d;
          font-size: 19px;
        }

        #social h3 {
          margin:  0px;
        }

        .social-media {
          display: flex;
          justify-content: flex-start;
        }

        .social-media li {
          font-size: 40px;
        }

        .social-media li a{
          border-bottom: 0px;
        }

        .fa {
          color: #731c80;
        }

        ::-webkit-input-placeholder {
          color: #909195;
          font-size: 16px;
        }

        #drop-us {
          margin-left: 20px;
        }

        #drop-us h3 {
          margin: 0px
        }

        #drop-us form div.element_wrap label {
          color: #ffffff;
          font-size: 19px;
        }

        #drop-us form .element_wrap div {
          height: auto;
          max-width: 400px;
        }

        #drop-us form .element_wrap p {
          color: #909297;
          font-size: 18px;
        }

        #drop-us #flag1 input {
          width: 80px;
          height: 35px;
          background-color: #731c80;
          color: #ede3ef;
          font-size: 17px;
          border: none;
          border-radius: 8px 8px 8px 8px;
        }

        .attention {
          text-align: center;
          display: flex;
          justify-content: flex-start;
        }

        #drop-us p {
          color: #ffffff;
          font-size: 17px;
        }

        .form-group .fa {
          color: red;
        }

        .form {
          width: 400px;
          height: 30px;
          margin-bottom: 20px;
          background-color: #3e3f47;
          color: #ffffff;
          padding-left: 10px;
          border: none;
          border-radius: 8px 8px 8px 8px;
        }

        #drop-us textarea {
          height: 200px;
          width: 400px;
          color: #ffffff;
          background-color: #3e3f47;
          padding-left: 10px;
          border: none;
          border-radius: 8px 8px 8px 8px;
          resize: none;
        }

        span.error_m {
          font-size: 15px;
          font-weight: normal;
          color: #FF4040;
          display: block;
          margin: 0;
        }

        .error {
          border: 1px solid red;
        }

        .error_list {
          padding: 10px 30px;
          color: #ff2e5a;
          font-size: 86%;
          text-align: left;
          border: 1px solid #ff2e5a;
          border-radius: 5px;
          list-style: none;
        }

        textarea::-webkit-input-placeholder {
        }

        #drop-us .form-group p{
          color: #68696d;
        }

        #submit-center {
          width: 400px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
        }

        #submit-center p {
          margin: 0;
        }

        #submit {
          width: 80px;
          height: 35px;
          background-color: #731c80;
          color: #ede3ef;
          font-size: 17px;
          border: none;
          border-radius: 8px 8px 8px 8px;
        }
      </style>
  </head>
<body>
  <footer id="contact">
    <div class="footer-top">
      <div id="drop-us">
        <h3>Drop us a line</h3>
        <hr>
        <form id="form" method="post" action="#contact">
          <div class="attention">
            <p>(*)は必須項目</p>
          </div>
          <div class="form-group">
            <div class="attention">
              <span id="text_data0_error" class="error_m"></span>
            </div>
            <input type="text" name="name" class="form" id="text_data0" placeholder="*Name" autocomplete="off">
          </div>

          <div class="form-group">
            <div class="attention">
              <span id="text_data1_error" class="error_m"></span>
            </div>
            <input type="text" name="college" class="form" id="text_data1" placeholder="*College" autocomplete="off">
          </div>

          <div class="form-group">
            <div class="attention">
              <span id="text_data2_error" class="error_m"></span>
            </div>
            <input type="text" name="email" class="form" id="text_data2" placeholder="*E-mail" autocomplete="off">
          </div>

          <div class="form-group">
            <div class="attention">
              <span id="text_data3_error" class="error_m"></span>
            </div>
            <textarea type="text" name="message" id="text_data3" placeholder="*Message" rows="1000" cols="20" wrap="hard" maxlength="1600"></textarea>
          </div>

          <div class="form-group">
            <div id="submit-center">
              <input id="submit" type="submit" name="btn_confirm" value="Check">
            </div>
          </div>
        </form>
      </div>
    </div>
  </footer>
</body>
</html>

実行結果

form要素のmethod属性をpostで指定しているので通信はPOST通信です．また，後でそれぞれのフォームに入力された値を受け取るためににinput要素のname属性に分かりやすい名前を付けておきます．

確認ページと送信完了ページの作成

入力ページではCheckを押した際に確認ページに切り替え，確認ページではBackを押した際に確認ページに戻り，Sendを押した際に完了ページに切り替える機能を追加するためにはそれぞれのinput要素から値を受け取りpage_flag変数に数値を代入しそれぞれのページを行き来します．

まず，<!DOCTYPE>の前に以下のコードを追加してください．

//変数の初期化
$page_flag = 0;

if( !empty($_POST['btn_confirm'])) {
  $page_flag = 1;

} elseif ( !empty($_POST['btn_submit'])) {
  $page_flag = 2;

} else {
  $page_flag = 0;
}

初めに変数page_flagを初期化します．!empty($_POST[‘btn_confirm’])はname=”btn_confirm”のボタンが押された際に変数page_flagに 1 が代入されるための if 文の条件です．同じようにpage_flag に2を代入する条件を elseif で書いています．else では page_flag = 0 つまり入力ページを入れておきます．

次に確認ページと送信完了ページをPHPの if 文を使って追加していきます．まずは<form id=”form”>の閉じタグの後に<?php endif; ?>を追加してください．これはこれから追加していただくif 文の閉じタグです．過ぎに以下のコードを<form id=”form”>の前に記述してください．

<?php if( $page_flag === 1): ?>
<form method="post" action="" id="flag1">
  <div class="element_wrap">
    <div>
      <label>Name</label>
    </div>
    <div>
      <p><?php echo $_POST['name']; ?></p>
    </div>
  </div>

  <div class="element_wrap">
    <div>
      <label>College</label>
    </div>
    <div>
      <p><?php echo $_POST['college']; ?></p>
    </div>
  </div>

  <div class="element_wrap">
    <div>
      <label>E-mail</label>
    </div>
    <div>
      <p><?php echo $_POST['email']; ?></p>
    </div>
  </div>

  <div class="element_wrap">
    <div>
      <label>Message</label>
    </div>
    <div>
      <p><?php echo $_POST['message']; ?></p>
    </div>
  </div>
  <input type="submit" name="btn_back" value="Back">
  <input type="submit" name="btn_submit" value="Send">
  <input type="hidden" name="name" value="<?php echo $_POST['name']; ?>">
  <input type="hidden" name="college" value="<?php echo $_POST['college']; ?>">
  <input type="hidden" name="email" value="<?php echo $_POST['email']; ?>">
  <input type="hidden" name="message" value="<?php echo $_POST['message']; ?>">
</form>

<?php elseif( $page_flag === 2): ?>
<p>送信が完了しました。</p>

<?php else: ?>

このコードはpage_flag変数が 1 の時確認ページに，2 のときに完了ページに切り替わるための if 文です．また，input要素にtype=”hidden” vlaue=”<?php echo $_POST[‘受け取りたいname属性’]; ?>”を加えることで確認ページで入力した値を表示させることが出来ます．以下のスクリーンショットは実際に値を受け取りSendを押し確認ページへ切り替わった際の例です．

実行結果