こんにちは朱夏です。
今回は、テスト環境でちゃんと動くフォームを作成できたので、それをまとめてみたいと思います。
必要なものは、ちゃんと動くフォームとちゃんと動くテスト環境の２つでした。
手順は大きく分けて次の3ステップだけです。
手順
1.問い合わせフォーム作成
2.XAMPPセットアップ
3.結果確認
それぞれの手順で躓かないためのポイントも説明しつつやっていきたいと思います。
手順１．問い合わせフォームを作成
ここが一番重要です。
以下のポイントに注意して作るといいと思います。
-
- 段階を踏んで1つずつ実装する
- 実装したものを確認する
- 上手くいかなかったらその場で調べる
因みに、参考にしたサイトはこちらです。
私の場合、Bootstrapでスタイルを指定しているので、CSSは殆ど使用していません。
フォームの画面遷移だとか、データの受け渡しなどのPHP部分の書き方や動きのしくみを参考にしています。
完成するまではvar_dump($_POST);を有効にしておくと良いです。
私個人としての躓きポイントと改善策を書いておきます。
サンプルコードはこちらです。
|
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 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 |
<?php // 入力確認部分をコメントアウト // var_dump($_POST); // 変数の初期化 $page_flag = 0; // 日本語設定 mb_language('ja'); mb_internal_encoding('UTF-8'); if( !empty($_POST['btn_confirm']) ) { $page_flag = 1; } elseif( !empty($_POST['btn_submit']) ) { $page_flag = 2; // メール送信 // データ初期化 $auto_header = null; $auto_reply_subject = null; $auto_reply_text = null; $admin_reply_subject = null; $admin_reply_text = null; date_default_timezone_set('Asia/Tokyo'); // ヘッダー情報初期化 $auto_header = [ "MIME-Version" => "1.0", "From" => "xxxxx@gmail.com", "Reply-To" => "xxxxx@gmail.com" ]; // 件名 $auto_reply_subject = 'お問い合わせありがとうございます。'; // 本文 $auto_reply_text = "お問い合わせいただき、ありがとうございます。下記の内容でお問い合わせを受け付けいたしました。（このメールは自動返信で送信しております。回答までしばらくお待ちください。）\n\n"; $auto_reply_text .= "受付日時：" . date("Y-m-d H:i") . "\n"; $auto_reply_text .= "お名前：" . $_POST['lastname'] . $_POST['firstname'] . "\n"; $auto_reply_text .= "メールアドレス：" . $_POST['mailaddress'] . "\n\n"; $auto_reply_text .= "お問い合わせ内容：" . $_POST['inquiry'] . "\n\n"; $auto_reply_text .= "○○事務局"; // 送信 mb_send_mail( $_POST['mailaddress'], $auto_reply_subject, $auto_reply_text, $auto_header); // 自分で受け取るメール // 件名 $admin_reply_subject = "お問い合わせを受け付けました"; // 本文 $admin_reply_text = "お問い合わせを受信しました。\n\n"; $admin_reply_text .= "受付日時：" . date("Y-m-d H:i") . "\n"; $admin_reply_text .= "お名前：" . $_POST['lastname'] . $_POST['firstname'] . "\n"; $admin_reply_text .= "生年月日：" . $_POST['barthday'] . "\n"; $admin_reply_text .= "メールアドレス：" . $_POST['mailaddress'] . "\n"; $admin_reply_text .= "住所：" . $_POST['addnum'] . $_POST['topaddress'] . $_POST['address'] . "\n\n"; $admin_reply_text .= "お問い合わせ内容：" . $_POST['inquiry'] . "\n\n"; $admin_reply_text .= "○○事務局"; // メール送信 mb_send_mail( 'xxxxx@gmail.com', $admin_reply_subject, $admin_reply_text, $auto_header); } ?> <!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の時確認ページここまで --> <!-- page_flagが2の完了ページ --> <?php elseif( $page_flag === 2): ?> <p class="text-center">送信が完了しました。</p> <form action=""> <div class="form-row mt-2"> <div class="col-auto"> <button type="submit" name="btn_back" class="btn btn-secondary" value="戻る">戻る</button> </div> </div> </form> <!-- page_flagが2の完了ページここまで --> <?php else: ?> <!-- page_flagが0の入力ページ --> <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> <!-- page_flagが0の入力ページここまで --> </div> <!-- 問い合わせフォームここまで --> <?php endif; ?> </body> </html> |
２．XAMPPセットアップ
XAMPPのセットアップでやることは以下の2つになります。
-
- インストール
- .iniファイルの編集
参考サイトは以下になります。
トラブル回避や説明を理解しやすくするために、インストール先はデフォルトのc:\直下がいいと思います。
また、フォームの送信を行うためには.iniファイルを編集が必要になります。
編集した後はApacheの再起動が必要なので忘れないようにしましょう。
.iniファイルの編集内容は以下になります。
php.ini
|
1 2 3 |
; ↓[mail function]配下の行に以下の2行を追記します ; XAMPP: Comment out this if you want to work with fakemail for forwarding to your mailbox (sendmail.exe in the sendmail folder) sendmail_path = "\"C:\xampp\sendmail\sendmail.exe\" -t" |
sendmail.ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
[sendmail] smtp_server=smtp.gmail.com smtp_port=587 smtp_ssl=auto error_logfile=error.log auth_username=*****@gmail.com auth_password=password pop3_server= pop3_username= pop3_password= force_sender= force_recipient= hostname= |
設定は使用するメールサービスによって可変になります。
今回はgmailの場合の設定を仮で入力しています。
※error_logfileの設定はデフォルトなので、そのまま有効にしておきましょう。
.iniファイルと同じディレクトリにログファイルが生成されます。
３．結果確認
準備したフォームとテスト環境で、結果を確認します。
確認するときのポイントを以下にまとめておきます。
総じて、正常に送信出来ているか確認するための情報がすぐに確認できるように準備しておくことがポイントですね。
まとめ
手順通りであれば、ちゃんと動く問い合わせフォームが完成しているはずです。
もしうまくいかないのであれば、以下の様な全ての状態を私と同じにすることで結果を確認してみてください。
-
- コードはコピペしたものを使う
- XAMPPを使う
- gmailを使う
ちゃんと動いたら、そこから自分の理想の環境で動作する様に1つずつ変化させていってください。
動かなくなったタイミングで順番に改善していけばゴールにたどり着くはずです。
全ての状態を合わせても動かない場合は、XAMPPの環境構築に失敗している可能性があります。
インストールするディレクトリなども完全に一致させてみてください。
それでもうまくいかない場合は・・・コメントいただければ私の方でも調べてみたいと思います。
今回は以上になります。
