【PHPスキル強化】問い合わせフォームを作成してみよう

Bootstrap
スポンサーリンク

こんにちは朱夏です。

まだまだ経験の少ないPHPのスキル強化をしていきたいと思います。
今回は問い合わせフォームを作って、メールを飛ばすところまで作ってみたいと思います。
実装にはBootstrap、PHPを使ってやっていきます。

フォームの入力項目は以下の5つです。

  • 名前
  • 生年月日
  • メールアドレス
  • 住所
  • 問い合わせ内容

それでは、やっていきます。

入力欄作成

まずは、入力欄、入力するための枠を作っていきます。
コードはこんな感じになりました。

      <!-- 問い合わせフォーム -->
      <div class="container">
         <h3>問い合わせフォーム</h3>
         <form>
            <!-- 氏名 -->
            <p class="mt-2 mb-0">氏名</p>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <input type="text" class="form-control" placeholder="苗字">
               </div>
               <div class="col-auto">
                  <input type="text" class="form-control" placeholder="名前">
               </div>
            </div>
            <!-- 氏名ここまで -->
            <!-- 生年月日 -->
            <p class="mt-2 mb-0">生年月日</p>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <input type="date" class="form-control">
               </div>
            </div>
            <!-- 生年月日ここまで -->
            <!-- メールアドレス -->
            <p class="mt-2 mb-0">メールアドレス</p>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="sample@email.co.jp">
               </div>
            </div>
            <!-- メールアドレスここまで -->
            <!-- 郵便番号 -->
            <p class="mt-2 mb-0">郵便番号</p>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <input type="text" class="form-control" id="inputZip" placeholder="000-0000">
               </div>
            </div>
            <!-- 郵便番号ここまで -->
            <!-- 住所 -->
            <p class="mt-2 mb-0">住所</p>
            <div class="form-row align-items-center">
               <div class="col-md-3 form-group">
                  <select class="form-control" id="exampleFormControlSelect1">
                     <option value="空白">--都道府県--</option>
                     <option value="北海道">北海道</option>
                     <option value="青森県">青森県</option>
                     <option value="岩手県">岩手県</option>
                     <option value="宮城県">宮城県</option>
                     <option value="秋田県">秋田県</option>
                     <option value="山形県">山形県</option>
                     <option value="福島県">福島県</option>
                     <option value="茨城県">茨城県</option>
                     <option value="栃木県">栃木県</option>
                     <option value="群馬県">群馬県</option>
                     <option value="埼玉県">埼玉県</option>
                     <option value="千葉県">千葉県</option>
                     <option value="東京都">東京都</option>
                     <option value="神奈川県">神奈川県</option>
                     <option value="新潟県">新潟県</option>
                     <option value="山梨県">山梨県</option>
                     <option value="長野県">長野県</option>
                     <option value="富山県">富山県</option>
                     <option value="石川県">石川県</option>
                     <option value="福井県">福井県</option>
                     <option value="岐阜県">岐阜県</option>
                     <option value="静岡県">静岡県</option>
                     <option value="愛知県">愛知県</option>
                     <option value="三重県">三重県</option>
                     <option value="滋賀県">滋賀県</option>
                     <option value="京都府">京都府</option>
                     <option value="大阪府">大阪府</option>
                     <option value="兵庫県">兵庫県</option>
                     <option value="奈良県">奈良県</option>
                     <option value="和歌山県">和歌山県</option>
                     <option value="鳥取県">鳥取県</option>
                     <option value="島根県">島根県</option>
                     <option value="岡山県">岡山県</option>
                     <option value="広島県">広島県</option>
                     <option value="山口県">山口県</option>
                     <option value="徳島県">徳島県</option>
                     <option value="香川県">香川県</option>
                     <option value="愛媛県">愛媛県</option>
                     <option value="高知県">高知県</option>
                     <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>
               </div>
               <div class="col-md-7 form-group">
                  <input type="text" class="form-control" id="" placeholder="〇〇市□□区××町00-00　マンション名000号室">
               </div>
            </div>
            <!-- 住所ここまで -->
            <!-- 問い合わせ内容 -->
            <p class="mt-2 mb-0">お問い合わせ内容</p>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <textarea class="form-control" name="" id="exampleFormControlTextarea1" cols="100" rows="10" placeholder="問い合わせ内容を入力してください"></textarea>
               </div>
            </div>
            <!-- 問い合わせ内容ここまで -->
            <!-- 送信ボタン -->
            <div class="mt-2">
               <button type="submit" class="btn btn-primary">確認</button>
            </div>
            <!-- 送信ボタンここまで -->
         </form>
      </div>
      <!-- 問い合わせフォームここまで -->

 

見た目はそれっぽくできました。
幾つか調べてみたのですが、都道府県のプルダウンって全部手書きだったんですね・・・住所は全部テキスト入力してもらうフォームの方が、コード的にはスッキリしていいのですが、選択式の方がユーザーにとっては入力しやすいんですかね・・・？
結論は出ませんが、とりあえずどっちで依頼されても対応できるようにしたいです。

 

確認ページを表示させよう

確認ボタンを押したら、確認ページを表示するようにします。
確認ページを表示させるには、PHPを使用する方法が一般的な様です。

今回は、こちらを参考に書いていこうと思います。

GRAYCODE
 
フォームの確認ページ&完了ページを作成 | GRAYCODE PHPプログラミング
https://gray-code.com/php/make-the-form-vol2/
フォームを作成するシリーズ記事の第2段。Webサイトにとって必要不可欠なフォームについて、基本的な仕組みから実践的な機能の実装方法まで、「お問い合わせフォーム」の作成を題材にして解説していきます。

 

以下の順で作業していきます。

  1. index.htmlをindex.phpに変換
  2. input、select、textarea、buttonにname属性を付与
  3. 確認ページを追加

 

1.index.htmlをindex.phpに変換

htmlファイルをリネームしてphpファイルに変換します。

 

2.input、select、textarea、buttonにname属性を付与

それぞれの入力項目にname属性を付与していきます。

苗字：lastname
名前：firstname
生年月日：barthday
メールアドレス：mailaddress
郵便番号：addnum
都道府県：topaddress
住所：address
問い合わせ：inquiry

 

3.確認ページを追加

最後に、確認ページを追加します。
参考ページと同じく、ボタンを押したらフラグを変化させて表示を変更する方法で書きました。
ついでに、送信完了画面も追記しています。

<?php
var_dump($_POST);

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

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

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

?>

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8"> 
        <title>問い合わせフォーム</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="css/style.css">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://kit.fontawesome.com/da0fa6be04.js" crossorigin="anonymous"></script>

       <!--[if lt IE 9]>
       <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
       <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
       <![endif]-->
    <script src="js/sample.js"></script>
    </head>
    <body>
      <!-- 問い合わせフォーム -->
      <div class="container">
         <h3>問い合わせフォーム</h3>

         <?php if( $page_flag === 1 ): ?>
         <!-- page_flagが1の時確認ページ -->
         <form method="post" action="">
            <!-- 氏名 -->
            <label class="mt-2 mb-0">氏名</label>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <p><?php echo $_POST['lastname']; ?></p>
               </div>
               <div class="col-auto">
                  <p><?php echo $_POST['firstname']; ?></p>
               </div>
            </div>
            <!-- 氏名ここまで -->
            <!-- 生年月日 -->
            <label class="mt-2 mb-0">生年月日</label>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <p><?php echo $_POST['barthday']; ?></p>
               </div>
            </div>
            <!-- 生年月日ここまで -->
            <!-- メールアドレス -->
            <label class="mt-2 mb-0">メールアドレス</label>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <p><?php echo $_POST['mailaddress']; ?></p>
               </div>
            </div>
            <!-- メールアドレスここまで -->
            <!-- 郵便番号 -->
            <label class="mt-2 mb-0">郵便番号</label>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <p><?php echo $_POST['addnum']; ?></p>
               </div>
            </div>
            <!-- 郵便番号ここまで -->
            <!-- 住所 -->
            <label class="mt-2 mb-0">住所</label>
            <div class="form-row align-items-center">
               <div class="col-auto form-group">
                  <p><?php echo $_POST['topaddress']; ?></p>
               </div>
               <div class="col-auto form-group">
                  <p><?php echo $_POST['address']; ?></p>
               </div>
            </div>
            <!-- 住所ここまで -->
            <!-- 問い合わせ内容 -->
            <label class="mt-2 mb-0">お問い合わせ内容</label>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <p><?php echo $_POST['inquiry']; ?></p>
               </div>
            </div>
            <!-- 問い合わせ内容ここまで -->
            <!-- ボタン -->
            <div class="form-row mt-2">
               <div class="col-auto">
                  <button type="submit" name="btn_back" class="btn btn-secondary" value="戻る">戻る</button>
                  <button type="submit" name="btn_submit" class="btn btn-primary" value="送信">送信</button>
               </div>
            </div>
            <!-- ボタンここまで -->
            <input type="hidden" name="lastname" value="<?php echo $_post['lastname'];?>">
            <input type="hidden" name="firstname" value="<?php echo $_post['firstname'];?>">
            <input type="hidden" name="barthday" value="<?php echo $_post['barthday'];?>">
            <input type="hidden" name="mailaddress" value="<?php echo $_post['mailaddress'];?>">
            <input type="hidden" name="addnum" value="<?php echo $_post['addnum'];?>">
            <input type="hidden" name="topaddress" value="<?php echo $_post['topaddress'];?>">
            <input type="hidden" name="address" value="<?php echo $_post['address'];?>">
            <input type="hidden" name="inquiry" value="<?php echo $_post['inquiry'];?>">
         </form>
         <!-- page_flagが1の時確認ページここまで -->

         <!-- 完了ページ -->
         <?php elseif( $page_flag === 1): ?>
         <p class="text-center">送信が完了しました。</p>
         <!-- 完了ページここまで -->

         <?php else: ?>

         <!-- 入力ページ -->
         <form method="post" action="">
            <!-- 氏名 -->
            <label class="mt-2 mb-0">氏名</label>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <input type="text" name="lastname" class="form-control" placeholder="苗字">
               </div>
               <div class="col-auto">
                  <input type="text" name="firstname" class="form-control" placeholder="名前">
               </div>
            </div>
            <!-- 氏名ここまで -->
            <!-- 生年月日 -->
            <label class="mt-2 mb-0">生年月日</label>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <input type="date" name="barthday" class="form-control">
               </div>
            </div>
            <!-- 生年月日ここまで -->
            <!-- メールアドレス -->
            <label class="mt-2 mb-0">メールアドレス</label>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <input type="email" name="mailaddress" class="form-control" id="exampleInputEmail1" placeholder="sample@email.co.jp">
               </div>
            </div>
            <!-- メールアドレスここまで -->
            <!-- 郵便番号 -->
            <label class="mt-2 mb-0">郵便番号</label>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <input type="text" name="addnum" class="form-control" id="inputZip" placeholder="000-0000">
               </div>
            </div>
            <!-- 郵便番号ここまで -->
            <!-- 住所 -->
            <label class="mt-2 mb-0">住所</label>
            <div class="form-row align-items-center">
               <div class="col-md-3 form-group">
                  <select class="form-control" name="topaddress" id="exampleFormControlSelect1">
                     <option value="">--都道府県--</option>
                     <option value="北海道">北海道</option>
                     <option value="青森県">青森県</option>
                     <option value="岩手県">岩手県</option>
                     <option value="宮城県">宮城県</option>
                     <option value="秋田県">秋田県</option>
                     <option value="山形県">山形県</option>
                     <option value="福島県">福島県</option>
                     <option value="茨城県">茨城県</option>
                     <option value="栃木県">栃木県</option>
                     <option value="群馬県">群馬県</option>
                     <option value="埼玉県">埼玉県</option>
                     <option value="千葉県">千葉県</option>
                     <option value="東京都">東京都</option>
                     <option value="神奈川県">神奈川県</option>
                     <option value="新潟県">新潟県</option>
                     <option value="山梨県">山梨県</option>
                     <option value="長野県">長野県</option>
                     <option value="富山県">富山県</option>
                     <option value="石川県">石川県</option>
                     <option value="福井県">福井県</option>
                     <option value="岐阜県">岐阜県</option>
                     <option value="静岡県">静岡県</option>
                     <option value="愛知県">愛知県</option>
                     <option value="三重県">三重県</option>
                     <option value="滋賀県">滋賀県</option>
                     <option value="京都府">京都府</option>
                     <option value="大阪府">大阪府</option>
                     <option value="兵庫県">兵庫県</option>
                     <option value="奈良県">奈良県</option>
                     <option value="和歌山県">和歌山県</option>
                     <option value="鳥取県">鳥取県</option>
                     <option value="島根県">島根県</option>
                     <option value="岡山県">岡山県</option>
                     <option value="広島県">広島県</option>
                     <option value="山口県">山口県</option>
                     <option value="徳島県">徳島県</option>
                     <option value="香川県">香川県</option>
                     <option value="愛媛県">愛媛県</option>
                     <option value="高知県">高知県</option>
                     <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>
               </div>
               <div class="col-md-7 form-group">
                  <input type="text" name="address" class="form-control" id="" placeholder="〇〇市□□区××町00-00　マンション名000号室">
               </div>
            </div>
            <!-- 住所ここまで -->
            <!-- 問い合わせ内容 -->
            <label class="mt-2 mb-0">お問い合わせ内容</label>
            <div class="form-row align-items-center">
               <div class="col-auto">
                  <textarea class="form-control" name="inquiry" id="exampleFormControlTextarea1" cols="100" rows="10" placeholder="問い合わせ内容を入力してください"></textarea>
               </div>
            </div>
            <!-- 問い合わせ内容ここまで -->
            <!-- 確認ボタン -->
            <div class="mt-2">
               <button type="submit" name="btn_confirm" class="btn btn-primary" value="内容確認へ">確認</button>
            </div>
            <!-- 確認ボタンここまで -->
         </form>
      </div>
      <!-- 問い合わせフォームここまで -->

      <?php endif; ?>

    </body>
</html>

 

これで、入力画面、確認画面、完了画面が出来ました。
画面遷移もうまく対応できているようです。

画面遷移

　入力画面　＜＞　確認画面　＞　完了画面

 

長くなりそうなので、今回はここまでにします。
次回は、送信後の動作を作っていきます。

今回は以上です。

スポンサーリンク
タイトルとURLをコピーしました