ウェブ学のすすめ

Study of Web Design & Programing

PHPで作るお問い合わせメールフォーム(自動返信機能付き)

自動返信機能付きのお問い合わせメールフォームをPHPで制作しました。

またブラウザー上でデータベース内の情報を見ることができる管理メニューページも作成。

この管理メニューページには.httaccessを使ったBasic認証でIDとパスワードを入れないとページが見れないようになっています。

プレビュー

お問い合わせメールフォーム
f:id:vinton:20140202193656p:plain
管理メニュー(IDとパスワードの入力が必要です。)

ポイント

データベースに接続する
$dsn = 'mysql:dbname=データベース名;host=データベースホスト名';
$user = 'ユーザー名;
$password = 'パスワード';
$dbh = new PDO($dsn, $user, $password);
$dbh -> query('SET NAMES UTF8');

freewebの場合、
↓まずはMySQLを稼働させてから

↓接続情報一覧にあるMySQLの項目を参照します。

ロりポップの場合
↓「WEBツール」>「データベース」

データベースを操作する
$sql = 'SQL文';
$stmt = $dbh -> prepare($sql);
$stmt -> execute();
データベースから切断する
$dbh = null;
サンキューメールを自動返信する(サーバーがsendmailに対応している必要があります)
$mail_sub = '題名';
$mail_body ='本文';
$mail_head = 'From:送信元メールアドレス';
mb_language('Japanese');
mb_internal_encoding("UTF-8");
mb_send_mail($email, $mail_sub, $mail_body,$mail_head);

コード

トップページ(index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ入力フォーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="check.php" method="post" id="inquiry">
<h2>お問い合わせメールフォーム</h2>
<p>このフォームはphpの練習で作成したサンプルです。入力されたメールアドレス宛てに自動返信される機能が付いています。よければお試しください。</p>

<table summary="お問い合わせに関する入力項目名とその入力欄">
<tr>
<th><label for="name">お名前</label></th>
<td><input type="text" name="name" size="30" id="name" class="text1" placeholder="例)山田太郎"></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"></td>
</tr>
<tr>
<th><label for="message">お問い合わせの内容</label></th>
<td><input type="text" name="message" size="30" id="message" class="text3" placeholder="例)コメント"></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">
<h2>確認画面</h2>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

$name = htmlspecialchars($name);
$email = htmlspecialchars($email);
$message = htmlspecialchars($message);
echo '<ul>'."\n";
echo '<li>';
if($name==''){
	echo 'お名前が入力されていません。<br>'."\n";
}else{
	echo 'お名前:'.$name.'<br>'."\n";
}
echo '</li>'."\n";
echo '<li>';
if($email==''){
	echo 'メールアドレスが、入力されていません。<br>'."\n";
}else{
	echo 'メールアドレス:'.$email.'<br>'."\n";
}
echo '</li>'."\n";
echo '<li>';
if($message==''){
	echo 'お問い合わせの内容が、入力されていません。<br>'."\n";
}else{
	echo 'お問い合わせの内容:'.$message."\n";
}
echo '</li>'."\n";
echo '</ul>'."\n";


if($name=='' || $email=='' || $message==''){
	echo '<p>未記入の項目があります。「<span class="deco">戻る</span>」ボタンをクリックしてください。</p>'."\n";
	echo '<div class="submit">'."\n";
echo '<form>'."\n";
echo '<input type="button" onClick="history.back()" value="戻る">'."\n";
echo '</form>'."\n";
echo '</div>'."\n";
}else{
	echo '<p>以上の内容を送信します。よろしければ「<span class="deco">送信</span>」ボタンを、修正する場合は「<span class="deco">戻る</span>」ボタンをクリックしてください。</p>'."\n";
	echo '<div class="submit">'."\n";
echo '<form action="thanks.php" method="post">'."\n";
echo '<input type="hidden" name="name" value="'.$name.'">';
echo '<input type="hidden" name="email" value="'.$email.'">';
echo '<input type="hidden" name="message" value="'.$message.'">';
echo '<input type="button" onClick="history.back()" value="戻る">'."\n";
echo '<input type="submit" value="送信">'."\n";
echo '</form>'."\n";
echo '</div>'."\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">
<?php
$dsn = 'mysql:dbname=contactus;host=localhost';
$user = 'root';
$password = 'root';
$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);

echo $name.'様<br>'."\n";
echo 'お問い合わせ、ありがとうございました。<br>'."\n";
echo 'お問い合わせ内容『'.$message.'』を<br>'."\n";
echo $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 inquiry(name,email,message)VALUES("'.$name.'","'.$email.'","'.$message.'")';
$stmt = $dbh -> prepare($sql);
$stmt -> execute();

$dbh = null;
?>
<ul>
<li><a href="index.php">トップページに戻る</a></li>
</ul>
</div>
</body>
</html>
スタイルシート(style.css
@charset "UTF-8";

body {
	background-color:#eee;
	font-size:1.0em;
	font-family:
		"ヒラギノ角ゴ Pro W3", 
		"Hiragino Kaku Gothic Pro", 
		"メイリオ", 
		Meiryo, Osaka, 
		"MS Pゴシック", 
		"MS PGothic", 
		sans-serif;
	line-height:1.5;
	color:#333;
}
#inquiry {
	margin:10px 10px 50px;
	background-color:#fff;
	width:450px;
	padding:10px 20px 10px 20px;
	border-left:6px solid #03C;
	box-shadow:0 0 3px #333;
}
.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 {
	border:1px solid #333;
	border-collapse:collapse;
}
tr {
	height:40px;
}
td, th {
	border:1px solid #333;
	padding:10px;
}
th {
	background-color:#8FAEED;
}


ul {
	list-style:none;
	margin:10px 0;
	padding:10px 10px 10px 20px;
	background-color:#eee;
	border-radius:8px;
}
管理メニュートップページ(menu.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>管理メニュー</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<div id="inquiry">
<h3>管理メニュー</h3>
<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="inquiry">
<?php
$dsn = 'mysql:dbname=contactus;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></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['email'].'</td>';
	echo '<td>'.$rec['message'].'</td>';
	echo '</tr>';
}
echo '</table>'."\n";
echo '<ul>'."\n";
echo '<li><a href="menu.html">メニューに戻る</a></li>'."\n";
echo '</ul>'."\n";

$dbh = null;
?>
</div>
</body>
</html>
お問い合わせ内容検索入力画面(search.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>検索</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<div id="inquiry">
<form action="search.php" method="post" id="search">
<input type="text" name="code" size="20" id="code">
<br>
<input type="submit" value="検索">
</form>
<ul>
<li><a href="menu.html">メニューに戻る</a></li>
</ul>
</div>
</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="inquiry">
<?php
$code = $_POST['code'];

$dsn = 'mysql:dbname=contactus;host=localhost';
$user = 'root';
$password = 'root';

$dbh = new PDO($dsn,$user,$password);

$dbh -> query('SET NAMES utf8');



$sql = 'SELECT * FROM inquiry WHERE code='.$code;

$stmt = $dbh -> prepare($sql);

$stmt -> execute();


echo '<table>'."\n";
echo '<tr><th>No</th><th>お名前</th><th>メールアドレス</th><th>お問い合わせ内容</th></tr>'."\n";
while(1){

	$rec = $stmt ->fetch(PDO::FETCH_ASSOC);

	if($rec == false){

		break;

	}
	echo '<tr>';
	echo '<td>'.$rec['code'].'</td>';
	echo '<td>'.$rec['name'].'</td>';
	echo '<td>'.$rec['email'].'</td>';
	echo '<td>'.$rec['message'].'</td>';
	echo '</tr>';

}
echo '</table>'."\n";
echo '<ul>'."\n";
echo '<li><a href="search.html">検索画面に戻る</a></li>'."\n";
echo '</ul>'."\n";

$dbh = null;
?>
</div>
</body>
</html>