【まとめ】ちゃんと動く問い合わせフォームの作り方【2019年12月版】

HTML
2019.12.07
スポンサーリンク

こんにちは朱夏です。

今回は、テスト環境でちゃんと動くフォームを作成できたので、それをまとめてみたいと思います。
必要なものは、ちゃんと動くフォームとちゃんと動くテスト環境の２つでした。
手順は大きく分けて次の3ステップだけです。


手順

1.問い合わせフォーム作成
2.XAMPPセットアップ
3.結果確認

 

それぞれの手順で躓かないためのポイントも説明しつつやっていきたいと思います。

 

手順１．問い合わせフォームを作成

ここが一番重要です。
以下のポイントに注意して作るといいと思います。

    • 段階を踏んで1つずつ実装する
    • 実装したものを確認する
    • 上手くいかなかったらその場で調べる

因みに、参考にしたサイトはこちらです。
私の場合、Bootstrapでスタイルを指定しているので、CSSは殆ど使用していません。
フォームの画面遷移だとか、データの受け渡しなどのPHP部分の書き方や動きのしくみを参考にしています。

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

完成するまではvar_dump($_POST);を有効にしておくと良いです。

 

私個人としての躓きポイントと改善策を書いておきます。

躓き１：$_POSTでのデータの受け渡しがうまくいかなかった
→Bootstrap4の場合、<input>にname属性を付ける必要がある。

説明１：$_POST[“name”]に値が入る仕様の為

躓き２：ボタンを押しても確認ページに遷移しない
→Bootstrap4の場合、ボタンに任意のvalue属性を付ける必要がある。

説明２：ボタンが押された時、valueの値が$_POSTに入るため。そして、ページ切り替えフラグとなっているif文では、ボタンのname属性が空ではなかった場合、フラグを立てるようになっている。躓き３：mb_send_mailの$header関数を複数追加するとエラーになる
→String型ではなく、array型で渡すことで回避できた。

説明３：PHP公式マニュアルより、String型で複数指定する場合、環境によってはRFC2822に違反するような最終手段を取らなければいけない場合があるなど、安定してフォーム構築に使える記述に思えなかったので、array型を採用した。

 

サンプルコードはこちらです。

<?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ファイルの編集

参考サイトは以下になります。

www.webdesignleaves.com
 
PHP /HTTP/パスワードハッシュ/メール Web Design Leaves
http://www.webdesignleaves.com/pr/php/php_basic_05.php#xampp_email
PHP/HTTP/パスワードハッシュ/ メール操作(sendmail,PHPMailer)等に関する参考資料・解説等。header() 関数, リダイレクト, キャッシュを無効にする, ファイルのダウンロード, Basic 認証, パスワードハッシュ, password_hash(), password_verify(), メール操作, XAMPP を使ってメールを送信, php.ini の編集, sendmail.ini の編集, mb_send_mail(), PHPMailer の設定, IMAP でメールの受信, IMAP モジュールの利用, imap_open(), imap_check(), imap_headerinfo(), imap_fetchbody()。

 

 

トラブル回避や説明を理解しやすくするために、インストール先はデフォルトのc:\直下がいいと思います。
また、フォームの送信を行うためには.iniファイルを編集が必要になります。
編集した後はApacheの再起動が必要なので忘れないようにしましょう。

.iniファイルの編集内容は以下になります。

php.ini

; ↓[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

[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ファイルと同じディレクトリにログファイルが生成されます。

 

gmailを使用する場合
gmailは2段階認証できないデバイスからのログインをするためのアプリパスワードを発行して、smtpサーバのログインパスワードに設定する必要があります。
アプリパスワードはgoogleアカウントのセキュリティ画面で2段階認証をオンにすると発行できるようになります。

 

３．結果確認

準備したフォームとテスト環境で、結果を確認します。
確認するときのポイントを以下にまとめておきます。

 

・var_dump($_POST);は有効にしておく
・error.logを確認できるようにしておく
・フォームの受信アドレスの内容を確認できるようにしておく

 

総じて、正常に送信出来ているか確認するための情報がすぐに確認できるように準備しておくことがポイントですね。

 

まとめ

手順通りであれば、ちゃんと動く問い合わせフォームが完成しているはずです。
もしうまくいかないのであれば、以下の様な全ての状態を私と同じにすることで結果を確認してみてください。

    • コードはコピペしたものを使う
    • XAMPPを使う
    • gmailを使う

ちゃんと動いたら、そこから自分の理想の環境で動作する様に1つずつ変化させていってください。
動かなくなったタイミングで順番に改善していけばゴールにたどり着くはずです。

全ての状態を合わせても動かない場合は、XAMPPの環境構築に失敗している可能性があります。
インストールするディレクトリなども完全に一致させてみてください。

それでもうまくいかない場合は・・・コメントいただければ私の方でも調べてみたいと思います。

今回は以上になります。

 

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