【HTML5, CSS3, PHP 】 SESSION を利用したお問い合わせフォーム ( データベース )
以前まで$_POSTでデータを受け取って記述していましたが、
今回はSESSIONを使って記述してみます。
注意しなければいけないのが、check.phpでSESSIONにデータを受け渡してしまうと、
POSTの中身は空になってしまい、thanks.phpでもSESSIONを使って記述しなければなりません。
尚、メール自動送信機能は、phpが利用できるサーバーにアップロードしないと機能しません。
【index.html】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせ入力フォーム</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <form action="check.php" method="post" id="inquiry"> <h1>お問い合わせメールフォーム</h1> <p>このフォームはphpの練習で作成したサンプルです。<br> 入力されたメールアドレス宛てに自動返信される機能が付いています。<br>よろしければお試しください。</p> <table summary="お問い合わせに関する入力項目名とその入力欄"> <tr> <th><label for="name">お名前</label></th> <td><input type="text" name="name" size="30" id="name" class="text1" placeholder="例)山田太郎" autofocus required></td> </tr> <tr> <th><label for="email">メールアドレス</label></th> <td><input type="text" name="email" size="30" id="email" class="text2" placeholder="例)xxx@example.com" required></td> </tr> <tr> <th><label for="message">お問い合わせの内容</label></th> <td><textarea name="message" cols="32" rows="5" id="message" class="text3" placeholder="例)コメント" required></textarea></td> </tr> </table> <div class="submit"> <input type="submit" value="確認画面へ"> </div> </form> </body> </html>
【check.php】
<?php // フォームデータが空の場合は処理終了 if (empty($_POST)) { print "処理終了"; exit; } // セッションの開始 session_start(); $name = htmlspecialchars( $_POST[ 'name' ], ENT_QUOTES ); $email = htmlspecialchars( $_POST[ 'email' ], ENT_QUOTES ); $message = htmlspecialchars( $_POST[ 'message' ], ENT_QUOTES ); $_SESSION[ 'name' ] = $name; $_SESSION[ 'email' ] = $email; $_SESSION[ 'message' ] = $message; ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>確認画面</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="inquiry"> <h1>確認画面</h1> <?php print '<ul>'."\n"; print '<li>'; if($name==''){ print 'お名前が入力されていません。<br>'."\n"; }else{ print 'お名前:'.$name.'<br>'."\n"; } print '</li>'."\n"; print '<li>'; if($email==''){ print 'メールアドレスが、入力されていません。<br>'."\n"; }else{ print 'メールアドレス:'.$email.'<br>'."\n"; } print '</li>'."\n"; print '<li>'; if($message==''){ print 'お問い合わせの内容が、入力されていません。<br>'."\n"; }else{ print 'お問い合わせの内容:'.$message."\n"; } print '</li>'."\n"; print '</ul>'."\n"; if($name=='' || $email=='' || $message==''){ print '<p>未記入の項目があります。「<span class="deco">戻る</span>」ボタンをクリックしてください。</p>'."\n"; print '<div class="submit">'."\n"; print '<form>'."\n"; print '<input type="button" onclick="history.back()" value="戻る">'."\n"; print '</form>'."\n"; print '</div>'."\n"; }else{ print '<p>以上の内容を送信します。<br>よろしければ「<span class="deco">送信</span>」ボタンを、修正する場合は「<span class="deco">戻る</span>」ボタンをクリックしてください。</p>'."\n"; print '<div class="submit">'."\n"; print '<form action="thanks.php" method="post">'."\n"; /* print '<input type="hidden" name="name" value="'.$name.'">'; print '<input type="hidden" name="email" value="'.$email.'">'; print '<input type="hidden" name="message" value="'.$message.'">'; */ print '<input type="button" onClick="history.back()" value="戻る">'."\n"; print '<input type="submit" value="送信">'."\n"; print '</form>'."\n"; print '</div>'."\n"; } ?> </div> </body> </html>
【thanks.php】
<?php // セッションの開始 session_start(); $name = htmlspecialchars( $_SESSION[ 'name' ], ENT_QUOTES ); $email = htmlspecialchars( $_SESSION[ 'email' ], ENT_QUOTES ); $message = htmlspecialchars( $_SESSION[ 'message' ], ENT_QUOTES ); ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>確認画面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="inquiry"> <?php $dsn = 'mysql:dbname=データベース名;host=ホスト名'; $user = 'ユーザー名'; $password = 'パスワード'; $dbh = new PDO($dsn,$user,$password); $dbh -> query('SET NAMES utf8'); /* $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $name = htmlspecialchars($name); $email = htmlspecialchars($email); $message = htmlspecialchars($message); */ print $name.'様<br>'."\n"; print 'お問い合わせ、ありがとうございました。<br>'."\n"; print 'お問い合わせ内容『'.$message.'』を<br>'."\n"; print $email.'にメールで送りましたのでご確認ください。'."\n"; $mail_sub = 'お問い合わせを受け付けました。'; $mail_body = $name.'様、ご協力ありがとうございました。'; $mail_body = html_entity_decode($mail_body,ENT_QUOTES,"UTF-8"); $mail_head = 'From:xxx@gmail.com'; mb_language('Japanese'); mb_internal_encoding("UTF-8"); mb_send_mail($email, $mail_sub, $mail_body,$mail_head); $sql = 'INSERT INTO テーブル名(name,email,message)VALUES("'.$name.'","'.$email.'","'.$message.'")'; $stmt = $dbh -> prepare($sql); $stmt -> execute(); $dbh = null; ?> <ul> <li><a href="index.html">トップページに戻る</a></li> </ul> </div> </body> </html>
【style.css】
@charset "UTF-8"; body { background-color: #FFF; font-size: 16px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.5; color: #333; } #inquiry { margin: 20px auto; background-color: #FFF; width: 520px; padding: 10px 20px 10px 20px; border-left: 6px solid #8CC9B5; box-shadow: 0 0 3px #999; } .submit { text-align: center; } input[type="submit"] { margin: 20px 0 10px; padding: 5px 10px; font-weight: bold; border: 1px solid #FFF; color: #FFF; background-color: #D9F5F3; background-image: -webkit-gradient(linear, left top, left bottom, from(#FF9900), color-stop(48%, #FF8600), color-stop(52%, #FF7700), to(#FF6600)); font-size: 16px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px #333; box-shadow: 0 0 3px #333; cursor: pointer; } input[type="button"] { margin: 20px 0 10px; padding: 5px 10px; font-weight: bold; border: 1px solid #FFF; color: #FFF; background-color: #D9F5F3; background-image: -webkit-gradient(linear, left top, left bottom, from(#060), color-stop(48%, #0C3), color-stop(52%, #0F3), to(#093)); font-size: 16px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px #333; box-shadow: 0 0 3px #333; cursor: pointer; } .deco { font-weight: bold; } table { width: 500px; border: 1px solid #CCC; border-collapse: collapse; } tr { height: 40px; } td, th { font-size: 14px; border: 1px solid #CCC; padding: 10px; } th { background-color: #E5F7F2; } ul { list-style: none; margin: 10px 0; padding: 10px 10px 10px 20px; background-color: #eee; border-radius: 8px; } input, textarea { font-size: 14px; line-height: 15px; border: 1px solid #CCC; } h1 { font-size: 20px; } table#list { padding: 5px; } table#list th { text-align: center; }