こんにちは朱夏です。
まだまだ経験の少ないPHPのスキル強化をしていきたいと思います。
今回は問い合わせフォームを作って、メールを飛ばすところまで作ってみたいと思います。
実装にはBootstrap、PHPを使ってやっていきます。
フォームの入力項目は以下の5つです。
- 名前
- 生年月日
- メールアドレス
- 住所
- 問い合わせ内容
それでは、やっていきます。
まずは、入力欄、入力するための枠を作っていきます。
コードはこんな感じになりました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
<!-- 問い合わせフォーム --> <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を使用する方法が一般的な様です。
今回は、こちらを参考に書いていこうと思います。
以下の順で作業していきます。
- index.htmlをindex.phpに変換
- input、select、textarea、buttonにname属性を付与
- 確認ページを追加
1.index.htmlをindex.phpに変換
htmlファイルをリネームしてphpファイルに変換します。
2.input、select、textarea、buttonにname属性を付与
それぞれの入力項目にname属性を付与していきます。
名前:firstname
生年月日:barthday
メールアドレス:mailaddress
郵便番号:addnum
都道府県:topaddress
住所:address
問い合わせ:inquiry
3.確認ページを追加
最後に、確認ページを追加します。
参考ページと同じく、ボタンを押したらフラグを変化させて表示を変更する方法で書きました。
ついでに、送信完了画面も追記しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 |
<?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> |
これで、入力画面、確認画面、完了画面が出来ました。
画面遷移もうまく対応できているようです。
長くなりそうなので、今回はここまでにします。
次回は、送信後の動作を作っていきます。
今回は以上です。