column

jQuery Mobile-お問合せフォーム完成

CATEGORY Android Apple Google iPhone iPad jQuery PC & Web お勉強 スマートフォン TAG, , ,

投稿日：2013年5月2日 更新日：

執筆者：

jQuery Mobileでお問い合わせフォームを作成

問い合わせフォーム用のphpとデータベースデータを閲覧する管理画面用phpの作成です。

index.html

001


<div data-role="page" id="contact">
<div data-role="header">
<h1>TQS Contact</h1>
</div>
<div data-role="content">
<h2>jQuery Mobileのフォーム</h2>
<form id="Contents" action="php/form.php" method="post">

<div data-role="fieldcontain">
<label for="name">お名前：</label>
<input type="text" name="name" id="name" value="" placeholder="お名前を入力">
</div>

<div data-role="fieldcontain">
<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email" placeholder="メールアドレスを入力">
</div>

<div  data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>お問い合わせ種類を選んで下さい。</legend>
<input type="checkbox" name="checkbox[]" id="check1" value="web" data-theme="d">
<label for="check1">Web製作</label>
<input type="checkbox" name="checkbox[]" id="check2" value="music" data-theme="d">
<label for="check2">音楽製作</label>
<input type="checkbox" name="checkbox[]" id="check3" value="question" data-theme="d">
<label for="check3">ご質問</label>
</fieldset>
</div>

<div data-role="fieldcontain">
<label for="textarea-a">お問い合わせ内容:</label>
<textarea name="message" id="message"></textarea>
</div>

<div data-role="fieldcontain">
<label for="gender">性別：</label>
<select name="gender" id="gender" data-role="slider" data-theme="b">
<option value="男性">男性</option>
<option value="女性">女性</option>
</select>
</div>

<div data-role="fieldcontain">
<label for="select-choice">オプション：</label>
<select name="shipper" id="shipper">
<option>選択してください</option>
<option value="プロフェッショナル">プロフェッショナル</option>
<option value="スタンダード">スタンダード</option>
<option value="エンタープライズ">エンタープライズ</option>
</select>
</div>

<div data-role="fieldcontain">
<label for="slider">満足度:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="5" data-theme="d" data-track-theme="d">
</div>

<div class="ui-grid-a">
<div class="ui-block-a">
<input type="reset" id="reset" data-theme="c" value="リセット">
</div>
<div class="ui-block-b">
<input type="submit" id="submit" data-theme="b" value="送信">
</div>
</div>

</form>
</div><!--content-->

form.php

002


<?php
$name = $_POST['name'];
$email = $_POST['email'];
$checkbox = implode(", ", $_POST['checkbox']);
$message = $_POST['message'];
$gender = $_POST['gender'];
$shipper = $_POST['shipper'];
$slider = $_POST['slider'];
$name = htmlspecialchars($name);
$email = htmlspecialchars($email);
$checkbox = htmlspecialchars($checkbox);
$message = htmlspecialchars($message);
$gender = htmlspecialchars($gender);
$shipper = htmlspecialchars($shipper);
$slider = htmlspecialchars($slider);
?>
<!DOCTYPE html>
<html>
<head>
<title>入力確認画面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
	$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script src="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>

<div data-role="page" data-add-back-btn="true" data-back-btn-text="戻る">

<div data-role="header" data-position="inline">
<h1>確認画面</h1>
</div><!-- /header -->

<div data-role="content" id="Contents">
<?php
		if ($name==''){
			print '<th>お名前</th><td>' . 'お名前が入力されていません。</td></tr><br>';
		} else {
			print '<th>お名前：</th><td>' . $name. ' 様。</td></tr><br>';
		}
		if ($email==''){
			print '<th>メールアドレス</th><td>メールアドレスが入力されていません。</td></tr><br>';
		} else {
			print '<th>メールアドレス：</th><td>' . $email . '</td></tr><br>' . "\n";
		}
		if ($checkbox==''){
			print '<th>種類</th><td>種類が入力されていません。</td></tr><br>';
		} else {
			print '<th>種類：</th><td>' . $checkbox . '</td></tr><br>' . "\n";
		}
		if ($message==''){
			print '<th>お問合せ内容</th><td>お問合せ内容が入力されていません。</td></tr>';
		} else {
			print '<th>お問合せ内容：</th><td>' . $message . '</td></tr><br>' . "\n";
		}
		if ($gender==''){
			print '<th>性別</th><td>性別が入力されていません。</td></tr>';
		} else {
			print '<th>性別：</th><td>' . $gender . '</td></tr><br>' . "\n";
		}
		if ($shipper==''){
			print '<th>オプション</th><td>オプションが入力されていません。</td></tr>';
		} else {
			print '<th>オプション：</th><td>' . $shipper . '</td></tr><br>' . "\n";
		}
		if ($slider==''){
			print '<th>満足度</th><td>満足度が入力されていません。</td></tr>';
		} else {
			print '<th>満足度：</th><td>' . $slider . '</td></tr><br>' . "\n";
		}
?>

<div data-role="fieldcontain">
<?php
if ($name=='' || $email=='' || $checkbox=='' || $message=='' || $gender=='' || $shipper=='' || $slider==''){
	print '<form>' . "\n";
	print '<input type="button" onClick="history.back()" value="戻る">';
	print '</form>' . "\n";
} else {
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="checkbox" value="' . $checkbox . '">';
print '<input type="hidden" name="message" value="' . $message . '">';
print '<input type="hidden" name="gender" value="' . $gender . '">';
print '<input type="hidden" name="shipper" value="' . $shipper . '">';
print '<input type="hidden" name="slider" value="' . $slider . '">';
print '<input type="button" onClick="history.back()" value="戻る">'."\n";
print '<input type="submit" value="送信">' . "\n";
print '</form>' . "\n";
}
?>

</div>
</div><!-- /content -->

<div data-role="footer" class="footer-docs ui-bar" id="footer" data-theme="c">
<div data-role="controlgroup" data-type="horizontal">
<a href="#about" data-role="button" data-icon="back" data-rel="back" data-direction="reverse">Back</a>
<a href="#portfolio" data-role="button" data-icon="star">portfolio</a>
<a href="#access" data-role="button" data-icon="home">access</a>
<a href="#contact" data-role="button" data-icon="check">contact</a>
</div><!--controlgroup-->
		<form method="get" action="/doc/jquery_mobile/" style="float:left;margin-left:5px;">
			<input type="search" name="q" value="" data-theme="d" placeholder="ドキュメント検索..." />
		</form>
		<div style="float:right; margin-top:10px; margin-right:10px;">
			<a href="http://twitter.com/TokiyoTQS"><img src="https://dev.screw-axis.com/img/twitter.gif" /></a>
			<a href="http://facebook.com/ttokiyo"><img src="https://dev.screw-axis.com/img/facebook.png" /></a>
			<a rel="author" href="https://plus.google.com/103040855988995841420/posts"><img src="https://www.google.com/images/icons/ui/gprofile_button-16.png" width="16" height="16"></a>
		</div>
</div><!--footer-->
</div><!-- /page -->

</body>
</html>

thanks.php

003004 005


<!DOCTYPE html>
<html>
<head>
<title>お問合せありがとうございました</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
	$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script src="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>

<div data-role="page" data-add-back-btn="true" data-back-btn-text="戻る">

<div data-role="header" data-position="inline">
<h1>ありがとうございました</h1>
</div><!-- /header -->

<div data-role="content" id="Contents">
<?php
 $dsn = 'mysql:dbname=_emailxxxxx;host=mysqlxxx.heteml.jp';
 $user = 'xxxxxxx';
 $password = 'xxxxxxxxx';
 $dbh = new PDO($dsn, $user, $password);
 $dbh -> query('SET NAMES UTF8');

$name = $_POST['name'];
$email = $_POST['email'];
$checkbox = $_POST['checkbox'];
$message = $_POST['message'];
$gender = $_POST['gender'];
$shipper = $_POST['shipper'];
$slider = $_POST['slider'];
$name = htmlspecialchars($name);
$email = htmlspecialchars($email);
$checkbox = htmlspecialchars($checkbox);
$message = htmlspecialchars($message);
$gender = htmlspecialchars($gender);
$shipper = htmlspecialchars($shipper);
$slider = htmlspecialchars($slider);

	print $name . '様<br>' . "\n";
	print 'お問合せありがとうございます。<br>' . "\n";
	print '種類「'.$checkbox.'」<br>' . "\n";
	print 'お問い合わせ内容「'.$message.'」<br>' . "\n";
	print '性別「'.$gender.'」<br>' . "\n";
	print 'オプション「'.$shipper.'」<br>' . "\n";
	print '満足度「'.$slider.'」を<br>' . "\n";
	print $email . 'にメールでお送り致しましたのでご確認下さい。' . "\n";

// メール本文の組み立て
mb_language("Ja");
mb_internal_encoding("UTF-8");

$mail_head = 'From:tokiyo@tqs.jp';
$subject = "お問い合せを受け付けました。";
$to = "tokiyo@tqs.jp, {$email}";
$title = "【メールフォームより】";
$body =  <<<EOM
--------------------------------------------------
【Tokyo Q Studio からのメール】
お問合せありがとうございました。

・お問合せ内容は
お名前：{$name}
メールアドレス：{$email}
種類：{$checkbox}
メッセージ：{$message}
性別：{$gender}
オプション：{$shipper}
満足度：{$slider}

です。
--------------------------------------------------
EOM;

// メール送信の実行
$rc = mb_send_mail($to, $title, $body, $mail_head);
 $sql = 'INSERT INTO email_temp(name, email, checkbox, message, gender, shipper, slider) VALUES("'.$name.'","'.$email.'","'.$checkbox.'","'.$message.'","'.$gender.'","'.$shipper.'","'.$slider.'")';
 $stmt = $dbh -> prepare($sql);
 $stmt -> execute();

 $dbh = null;
?>

</div><!-- /content -->

<div data-role="footer" class="footer-docs ui-bar" id="footer" data-theme="c">
<div data-role="controlgroup" data-type="horizontal">
<a href="#about" data-role="button" data-icon="back" data-rel="back" data-direction="reverse">Back</a>
<a href="#portfolio" data-role="button" data-icon="star">portfolio</a>
<a href="#access" data-role="button" data-icon="home">access</a>
<a href="#contact" data-role="button" data-icon="check">contact</a>
</div><!--controlgroup-->
		<form method="get" action="/doc/jquery_mobile/" style="float:left;margin-left:5px;">
			<input type="search" name="q" value="" data-theme="d" placeholder="ドキュメント検索..." />
		</form>
		<div style="float:right; margin-top:10px; margin-right:10px;">
			<a href="http://twitter.com/TokiyoTQS"><img src="https://dev.screw-axis.com/img/twitter.gif" /></a>
			<a href="http://facebook.com/ttokiyo"><img src="https://dev.screw-axis.com/img/facebook.png" /></a>
			<a rel="author" href="https://plus.google.com/103040855988995841420/posts"><img src="https://www.google.com/images/icons/ui/gprofile_button-16.png" width="16" height="16"></a>
		</div>
</div><!--footer-->
</div><!-- /page -->

</body>
</html>

コメントを残す

関連記事

PREV

jQuery Mobile　様々なリストと問合せフォーム

NEXT

jQuery Mobileカスタマイズ〜ThemeRoller

jQuery Mobile-お問合せフォーム完成

side bar

メニューはこちら

メニューはこちら