お問い合わせメールフォームver2
「PHPで作るお問い合わせメールフォーム（自動返信機能付き） - ウェブ学のすすめ」のお問い合わせメールフォームを改良してみました。
プレビュー
↓お問い合わせメールフォーム（入力された項目はデータベースに書き込まないように設定しています。）
↓管理画面（あらかじめサンプルの情報をデータベースに入れています。）
コード
トップページ（index.php）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォーカス時のスタイルを指定する</title> <link rel="stylesheet" href="style.css"> <script> function focusColor(i){ i.style.borderColor='#7F9DB9'; i.style.backgroundColor='#FFFFFF'; } function blurColor(i){ i.style.borderColor='#CCCCCC'; i.style.backgroundColor='#F3F3F3'; } </script> </head> <body> <h1>お問い合わせフォーム</h1> <form action="check.php" method="post" id="inquiry"> <table border="border" summary="お問い合わせに関する入力項目名とその入力欄" cellspacing="0"> <tr> <th scope="row" class="blue"><label for="name">お名前<em>必須</em></label></th> <td><input type="text" name="name" size="30" id="name" class="text1" onFocus="focusColor(this)" onBlur="blurColor(this)" placeholder="例）山田 太郎"></td> </tr> <tr> <th scope="row" class="green"><label for="postcode1">郵便番号</label></th> <td><input type="text" name="postcode1" size="3" maxlength="3" id="postcode1" class="text2" onFocus="focusColor(this)" onBlur="blurColor(this)" placeholder="例）012"> - <input type="text" name="postcode2" size="4" maxlength="4" id="postcode2" class="text2" onFocus="focusColor(this)" onBlur="blurColor(this)" placeholder="例）3456"> </td> </tr> <tr> <th scope="row" class="orange"><label for="prefecture">都道府県</label></th> <td> <select name="prefecture" id="prefecture"> <option value="" selected="selected">選択してください</option> <optgroup label="北海道・東北地方"> <option value="北海道">北海道</option> <option value="青森県">青森県</option> <option value="岩手県">岩手県</option> <option value="宮城県">宮城県</option> <option value="秋田県">秋田県</option> <option value="山形県">山形県</option> <option value="福島県">福島県</option> </optgroup> <optgroup label="関東地方"> <option value="茨城県">茨城県</option> <option value="栃木県">栃木県</option> <option value="群馬県">群馬県</option> <option value="埼玉県">埼玉県</option> <option value="千葉県">千葉県</option> <option value="東京都">東京都</option> <option value="神奈川県">神奈川県</option> </optgroup> <optgroup label="中部地方"> <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> </optgroup> <optgroup label="近畿地方"> <option value="三重県">三重県</option> <option value="滋賀県">滋賀県</option> <option value="京都府">京都府</option> <option value="大阪府">大阪府</option> <option value="兵庫県">兵庫県</option> <option value="奈良県">奈良県</option> <option value="和歌山県">和歌山県</option> </optgroup> <optgroup label="中国地方"> <option value="鳥取県">鳥取県</option> <option value="島根県">島根県</option> <option value="岡山県">岡山県</option> <option value="広島県">広島県</option> <option value="山口県">山口県</option> </optgroup> <optgroup label="四国地方"> <option value="徳島県">徳島県</option> <option value="香川県">香川県</option> <option value="愛媛県">愛媛県</option> <option value="高知県">高知県</option> </optgroup> <optgroup label="九州地方"> <option value="福岡県">福岡県</option> <option value="佐賀県">佐賀県</option> <option value="長崎県">長崎県</option> <option value="熊本県">熊本県</option> <option value="大分県">大分県</option> <option value="宮崎県">宮崎県</option> <option value="鹿児島県">鹿児島県</option> <option value="沖縄県">沖縄県</option> </optgroup> <option value="日本国外">日本国外</option> </select> </td> </tr> <tr> <th scope="row" class="red"><label for="address1">市区町村・番地</label></th> <td><input type="text" name="address1" size="30" id="address1" class="text3" onFocus="focusColor(this)" onBlur="blurColor(this)" placeholder="例）○○市▲▲町"></td> </tr> <tr> <th scope="row" class="violet"><label for="address2">アパート・マンション名</label></th> <td><input type="text" name="address2" size="30" id="address2" class="text3" onFocus="focusColor(this)" onBlur="blurColor(this)" placeholder="例）コーポ●●"></td> </tr> <tr> <th scope="row" class="navy"><label for="email">E-Mailアドレス<em>必須</em></label></th> <td><input type="text" name="email" size="30" id="email" class="text3" onFocus="focusColor(this)" onBlur="blurColor(this)" placeholder="例）xxx@gmail.com"></td> </tr> <tr> <th scope="row" class="aqua">お問い合わせの種類<em>必須</em></th> <td> <input name="category" type="radio" value="このサイトについてのお問い合わせ" id="category1"> <label for="category1">このサイトについてのお問い合わせ</label><br> <input name="category" type="radio" value="弊社の業務内容についてのお問い合わせ" id="category2"> <label for="category2">弊社の業務内容についてのお問い合わせ</label><br> <input name="category" type="radio" value="その他のお問い合わせ" id="category3"> <label for="category3">その他のお問い合わせ</label> </td> </tr> <tr> <th scope="row" class="yellow"><label for="content">お問い合わせ内容<em>必須</em></label></th> <td><textarea name="content" cols="30" rows="15" id="content" class="text4" onFocus="focusColor(this)" onBlur="blurColor(this)" placeholder="例）問い合わせたいこと"></textarea></td> </tr> </table> <div class="submit"><input type="submit" value="確認画面へ"></div> </form> </body> </html>
入力内容確認画面（check.php）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>確認画面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="inquiry"> <h1>お問い合わせ内容確認</h1> <?php $name = $_POST['name']; $postcode1 = $_POST['postcode1']; $postcode2 = $_POST['postcode2']; $prefecture = $_POST['prefecture']; $address1 = $_POST['address1']; $address2 = $_POST['address2']; $email = $_POST['email']; $category = $_POST['category']; $content = $_POST['content']; $name = htmlspecialchars($name); $postcode1 = htmlspecialchars($postcode1); $postcode2 = htmlspecialchars($postcode2); $prefecture = htmlspecialchars($prefecture); $address1 = htmlspecialchars($address1); $address2 = htmlspecialchars($address2); $email = htmlspecialchars($email); $category = htmlspecialchars($category); $content = htmlspecialchars($content); echo '<table>'."\n"; echo '<tr>'."\n"; echo '<th class="blue">お名前</th>'."\n"; echo '<td>'."\n"; if($name==''){ echo '<span class="deco">お名前の入力が必要です。</span>'."\n"; }else{ echo $name; } echo '</td>'."\n"; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<th class="green">郵便番号</th>'."\n"; echo '<td>'.$postcode1.'-'.$postcode2.'</td>'."\n"; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<th class="orange">都道府県</th>'."\n"; echo '<td>'.$prefecture.'</td>'."\n"; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<th class="red">市区町村・番地</th>'."\n"; echo '<td>'.$address1.'</td>'."\n"; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<th class="violet">アパート・マンション名</th>'."\n"; echo '<td>'.$address2.'</td>'."\n"; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<th class="navy">E-Mailアドレス</th>'."\n"; echo '<td>'."\n"; if($email==''){ echo '<span class="deco">E-mailアドレスの入力が必要です。</span>'."\n"; }else{ echo $email; } echo '</td>'."\n"; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<th class="aqua">お問い合わせの種類</th>'."\n"; echo '<td>'."\n"; if($category==''){ echo '<span class="deco">お問い合わせの種類を選択する必要があります。</span>'."\n"; }else{ echo $category; } echo '</td>'."\n"; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<th class="yellow">お問い合わせ内容</th>'."\n"; echo '<td>'."\n"; if($content==''){ echo '<span class="deco">お問い合わせ内容を入力する必要があります。</span>'."\n"; }else{ echo $content; } echo '</td>'."\n"; echo '</tr>'."\n"; echo '</table>'."\n"; if($name=='' || $email=='' || $category=='' || $content==''){ echo '<form>'."\n"; echo '<div class="submit"><p>入力されていない必須項目があります。戻るボタンを押してください。</p><input type="button" onClick="history.back()" value="戻る"></div>'."\n"; echo '</form>'."\n"; }else{ echo '<form action="thanks.php" method="post">'."\n"; echo '<input type="hidden" name="name" value="'.$name.'">'; echo '<input type="hidden" name="postcode1" value="'.$postcode1.'">'; echo '<input type="hidden" name="postcode2" value="'.$postcode2.'">'; echo '<input type="hidden" name="prefecture" value="'.$prefecture.'">'; echo '<input type="hidden" name="address1" value="'.$address1.'">'; echo '<input type="hidden" name="address2" value="'.$address2.'">'; echo '<input type="hidden" name="email" value="'.$email.'">'; echo '<input type="hidden" name="category" value="'.$category.'">'; echo '<input type="hidden" name="content" value="'.$content.'">'; echo '<div class="submit"><input type="button" onClick="history.back()" value="戻る">'."\n"; echo '<input type="submit" value="送信"></div>'."\n"; echo '</form>'."\n"; } ?> </div> </body> </html>
送信した旨を表示する＆入力されたメールアドレス宛てにサンキューメールを送信（thanks.php）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>確認画面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="inquiry"> <h1>送信完了</h1> <?php $name = $_POST['name']; $postcode1 = $_POST['postcode1']; $postcode2 = $_POST['postcode2']; $prefecture = $_POST['prefecture']; $address1 = $_POST['address1']; $address2 = $_POST['address2']; $email = $_POST['email']; $category = $_POST['category']; $content = $_POST['content']; $name = htmlspecialchars($name); $postcode1 = htmlspecialchars($postcode1); $postcode2 = htmlspecialchars($postcode2); $prefecture = htmlspecialchars($prefecture); $address1 = htmlspecialchars($address1); $address2 = htmlspecialchars($address2); $email = htmlspecialchars($email); $category = htmlspecialchars($category); $content = htmlspecialchars($content); echo $name.'様<br>'."\n"; echo 'お問い合わせ、ありがとうございました。<br>'."\n"; echo '確認メールを『'.$email.'』宛てに送りましたのでご確認ください。<br>'."\n"; echo '<table>'."\n"; echo '<tr>'."\n"; echo '<th class="blue">お名前</th>'."\n"; echo '<td>'.$name.'</td>'."\n"; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<th class="green">郵便番号</th>'."\n"; echo '<td>'.$postcode1.'-'.$postcode2.'</td>'."\n"; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<th class="orange">都道府県</th>'."\n"; echo '<td>'.$prefecture.'</td>'."\n"; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<th class="red">市区町村・番地</th>'."\n"; echo '<td>'.$address1.'</td>'."\n"; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<th class="violet">アパート・マンション名</th>'."\n"; echo '<td>'.$address2.'</td>'."\n"; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<th class="navy">E-Mailアドレス</th>'."\n"; echo '<td>'.$email.'</td>'."\n"; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<th class="aqua">お問い合わせの種類</th>'."\n"; echo '<td>'.$category.'</td>'."\n"; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<th class="yellow">お問い合わせ内容</th>'."\n"; echo '<td>'.$content.'</td>'."\n"; echo '</tr>'."\n"; echo '</table>'."\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); ?> <ul> <li><a href="index.php">トップページに戻る</a></li> </ul> </div> </body> </html>
スタイルシート（style.css）
@charset "UTF-8"; body { font-size:16px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height:1.5; color:#fff; background-color:#333; } #inquiry { width:600px; } #inquiry table { font-size:100%; width:100%; background-color:#fff; border-collapse:collapse; -webkit-box-shadow: 0 0 3px #fff; box-shadow: 0 0 3px #fff; color:#333; margin:10px 0 0; } #inquiry td { border-bottom:1px solid #ccc; padding:10px; } #inquiry th { border-bottom:1px solid #ccc; border-left:12px solid #ccc; background-color:#F3F3F3; font-weight:normal; padding:10px; width:180px; } #inquiry th.blue { border-left:12px solid #2D89F0; } #inquiry th.green { border-left:12px solid #01A31C; } #inquiry th.orange { border-left:12px solid #D44A26; } #inquiry th.red { border-left:12px solid #BC1C48; } #inquiry th.violet { border-left:12px solid #603CBA; } #inquiry th.navy { border-left:12px solid #3B5998; } #inquiry th.aqua { border-left:12px solid #48C4F3; } #inquiry th.yellow { border-left:12px solid #F2C451; } #inquiry th em { margin:0 0 0 5px; padding: 3px; vertical-align: text-bottom; color: #FFF; background-color: #D44A26; font-weight: bold; font-size: 11px; -webkit-border-radius: 4px; border-radius: 4px; } .text1, .text2, .text3, .text4 { border:1px solid #ccc; background-color:#f3f3f3; padding:2px; } .text1 { width:100px; } .text2 { width:4em; } .text3 { width:98%; } .text4 { width:98%; } #inquiry select { border:1px solid #CCC; background-color:#F3F3F3; } #inquiry .submit { text-align:center; margin-top:10px; } .text1:focus, .text2:focus, .text3:focus, .text4:focus { border-color:#7E9DB9; background-color:#FFF; } input[type="submit"] { margin:20px 0 10px; padding: 5px 10px; font-weight:bold; border: 1px solid #FFF; color: #FFF; background-color: #006699; background-image: -webkit-gradient(linear, left top, left bottom, from(#66CC00), color-stop(48%, #66B400), color-stop(52%, #66A700), to(#669900)); 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; -webkit-animation: shining 2s infinite; } @-webkit-keyframes shining { 0% { -webkit-box-shadow: 0 0 1px #FFD700; box-shadow: 0 0 1px #FFD700; } 50% { -webkit-box-shadow: 0 0 20px #FFD700; box-shadow: 0 0 20px #FFD700;} 100% { -webkit-box-shadow: 0 0 1px #FFD700; box-shadow: 0 0 1px #FFD700;} } 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(#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; } .deco { font-weight:bold; color:#F00; } #inquiry ul{ list-style-type:none; margin:20px 0 10px; } #inquiry li{ width:150px; } #inquiry li a { width:150px; display:block; text-decoration:none; color:#FFF; font-weight:bold; font-size:16px; background-color: #D9F5F3; background-image: -webkit-gradient(linear, left top, left bottom, from(#FF9900), color-stop(48%, #FF8600), color-stop(52%, #FF7700), to(#FF6600)); -webkit-border-radius:4px; border-radius:4px; border: 1px solid #FFF; -webkit-box-shadow: 0 0 3px #333; box-shadow: 0 0 3px #333; cursor:pointer; } #result table { background-color:#fff; border-collapse:collapse; -webkit-box-shadow: 0 0 3px #fff; box-shadow: 0 0 3px #fff; color:#333; margin:20px 0 0 0; width:980px; } #result td { border:1px solid #ccc; padding:10px; } #result th { border:1px solid #ccc; background-color:#F3F3F3; padding:10px; width:200px; } #result ul{ list-style-type:none; background-color:#F3F3F3; width:580px; height:200px; -webkit-border-radius:8px; border-radius:8px; padding:0 0 0 20px; margin-bottom:50px; } #result li{ height:100px; width:200px; padding:60px 20px 0; margin:20px; float:left; -webkit-border-radius:8px; border-radius:8px; } #result li:first-child { background-color:#2D89F0; } #result li:last-child { background-color:#01A31C; } #result li a { height:100px; width:200px; display:block; text-decoration:none; color:#fff; font-weight:bold; font-size:20px; } #result li:hover { background-color:#D44A26; } #back { list-style-type:none; margin:20px 0 10px; } #back li{ width:150px; } #back li a { width:150px; padding:5px 0 5px 20px; display:block; text-decoration:none; color:#FFF; font-weight:bold; font-size:16px; background-color: #D9F5F3; background-image: -webkit-gradient(linear, left top, left bottom, from(#FF9900), color-stop(48%, #FF8600), color-stop(52%, #FF7700), to(#FF6600)); -webkit-border-radius:4px; border-radius:4px; border: 1px solid #FFF; -webkit-box-shadow: 0 0 3px #333; box-shadow: 0 0 3px #333; cursor:pointer; } #search { width:400px; padding:30px; background-color:#f3f3f3; border-radius:4px; border: 1px solid #FFF; -webkit-box-shadow: 0 0 3px #333; box-shadow: 0 0 3px #333; text-align:center; }
管理メニュートップページ（menu.html）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>管理メニュー</title> <link rel="stylesheet" href="style.css"> </head> <body> <h3>管理メニュー</h3> <div id="result"> <ul> <li><a href="list.php">お問い合わせ内容一覧</a></li> <li><a href="search.html">お問い合わせ内容検索</a></li> </ul> </div> </body> </html>
お問い合わせ内容一覧（list.php）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>確認画面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="result"> <?php $dsn = 'mysql:dbname=form;host=localhost'; $user = 'root'; $password = 'root'; $dbh = new PDO($dsn,$user,$password); $dbh -> query('SET NAMES utf8'); $sql = 'SELECT * FROM inquiry WHERE 1'; $stmt = $dbh -> prepare($sql); $stmt -> execute(); echo '<table>'."\n"; echo '<tr><th>No</th><th>お名前</th><th>郵便番号</th><th>都道府県</th><th>市区町村・番地</th><th>アパート・マンション名</th><th>E-Mailアドレス</th><th>お問い合わせの種類</th><th>お問い合わせ内容</th></tr>'."\n"; while(1){ $rec = $stmt ->fetch(PDO::FETCH_ASSOC); if($rec == false){ break; } echo '<tr>'; echo '<th>'.$rec['code'].'</th>'; echo '<td>'.$rec['name'].'</td>'; echo '<td>'.$rec['postcode1'].'-'.$rec['postcode2'].'</td>'; echo '<td>'.$rec['prefecture'].'</td>'; echo '<td>'.$rec['address1'].'</td>'; echo '<td>'.$rec['address2'].'</td>'; echo '<td>'.$rec['email'].'</td>'; echo '<td>'.$rec['category'].'</td>'; echo '<td>'.$rec['content'].'</td>'; echo '</tr>'; } echo '</table>'."\n"; $dbh = null; ?> </div> <ul id="back"> <li><a href="menu.html">メニューに戻る</a></li> </ul> </body> </html>
お問い合わせ内容検索入力画面（search.html）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>検索</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>検索画面</h1> <p>コードを入力してください（半角数字）。</p> <div id="seach"> <form action="search.php" method="post" id="search"> <select name="code" id="code"> <option value="" selected="selected">コードを選択してください</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <br> <input type="submit" value="検索"> </form> </div> <ul id="back"> <li><a href="menu.html">メニューに戻る</a></li> </ul> </body> </html>
お問い合わせ内容検索結果画面（search.php）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>検索画面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="result"> <?php $code = $_POST['code']; $dsn = 'mysql:dbname=form;host=localhost'; $user = 'root'; $password = 'root'; $dbh = new PDO($dsn,$user,$password); $dbh -> query('SET NAMES utf8'); $sql = 'SELECT * FROM inquiry WHERE code=?'; $stmt = $dbh -> prepare($sql); $data[] = $code; $stmt -> execute($data); echo '<table>'."\n"; echo '<tr><th>No</th><th>お名前</th><th>郵便番号</th><th>都道府県</th><th>市区町村・番地</th><th>アパート・マンション名</th><th>E-Mailアドレス</th><th>お問い合わせの種類</th><th>お問い合わせ内容</th></tr>'."\n"; while(1){ $rec = $stmt ->fetch(PDO::FETCH_ASSOC); if($rec == false){ break; } echo '<tr>'; echo '<th>'.$rec['code'].'</th>'; echo '<td>'.$rec['name'].'</td>'; echo '<td>'.$rec['postcode1'].'-'.$rec['postcode2'].'</td>'; echo '<td>'.$rec['prefecture'].'</td>'; echo '<td>'.$rec['address1'].'</td>'; echo '<td>'.$rec['address2'].'</td>'; echo '<td>'.$rec['email'].'</td>'; echo '<td>'.$rec['category'].'</td>'; echo '<td>'.$rec['content'].'</td>'; echo '</tr>'; } echo '</table>'."\n"; $dbh = null; ?> </div> <ul id="back"> <li><a href="search.html">検索画面に戻る</a></li> </ul> </body> </html>
