【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;
}
