ホーム » ブログ » 画面遷移せずに確認ページ表示できるお問合せフォーム
このエントリーをはてなブックマークに追加
@2016/12/06

スポンサーリンク
会社Pマーク取得の際に、お問合せページがHTTPS及びお問合せ確認画面が設けるのが必要と指摘された。
確かに現在のお問合せ画面では入力画面入力したら、確認画面がなくて直接完了ページに遷移する流れになっている。
それは当時にコスト・開発時間削減の目的で確認画面を開発してなかった。
なお、どうしてもPマークを取得しなきゃいけないので、確認画面の開発作業が依頼された。

では、ここではページリロード無しで確認ページ表示できる方法を紹介させていただく。
（所謂ページ遷移せず、お問合せ入力フォームと確認ページが同じページに表示する）

JS・Jqueryの経験を持っていれば、１時間程度で理解できると思います。
分からなくても、コピペーで使えるものなので、実用にも問題がありません。
point：
①入力フォーム
<div id="v1" class="ItemContent"><!-- 入力画面 -->
②確認エリア
<div id="v2" class="ItemContent" style="display:none;"><!-- 確認画面 -->
※入力⇔確認の切替は v1,v2の表示・非表示で実現。
③入力テキスト変わったら、確認のv2でのテキストにも同じ値を設定。 
HTMLコード
  jqueryでclass=ChangeConfirmの要素のchangeイベントで監視・実現
  data-confirm="c_userName"のように、v2確認画面のid=c_userNameの要素に同じ値を設定。
  data-rule="required"のように、バリデーションチェック種類を設定し、JS側でチェックを実施。複数チェックルールがある場合、カンマ[,]で区切り。
  <input type="text" name="user_name" class="IText ChangeConfirm ImeModeActive IO" data-rule="required" data-confirm="c_userName" title="お名前">
  
Javascript・Jqueryソース
  	$('#v1 table tr td .ChangeConfirm').change(function() {
	    relationId = $(this).data('confirm');
	    $("#"+relationId).html($(this).val().replace(/\n/g,"<br>\n"));
	});
④画面バリデーションチェックして、OKでしたら、v1→v2に切替表示。 

    checkFlag = valiCheck('contactForm');//バリデーションチェックメソッド
		//チェックOKなら、確認表示へ切替
		if(checkFlag){
			$("#v1").hide();
			$("#v2").show(100);
		}

下記、画面遷移せずに入力と確認ページが表示できるお問合せフォームサンプルコードです。
１、HTMLソース 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>お問い合わせ | 便利ジャパン</title>
<meta name="keywords" content="便利ジャパンお問い合わせ,WEBお問い合わせ">
<meta name="description" content="便利ジャパンへご連絡したいお客様は当ページの情報をご参考ください。">
<meta name="author" content="馬　德印">
<link rel="shortcut icon" type="image/x-icon" href="http://www.benri.jp/favicon.ico">
<!--[if lt IE 9]>
<script>alert('IE8及び以下のブラウザに対応いたしかねますので、ご了承ください。');</script>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="./contact.css">
</head>
<body>
<header>
	ヘッダーエリア
</header>
<div id="container">
	<div id="contact" class="contents">
		<form name="contactForm" method="post" action="./contact.php" class="ContactForm">
			<!-- お問い合わせ内容-->
			<div id="contactInfos">
				<div id="v1" class="ItemContent"><!-- 入力画面 -->
					<h2 class="Ttl"><span>お問い合わせ入力</span></h2>
				      <table class="Tbl">
				        <tbody>
				          <tr>
				            <td class="TxtR">お名前<em>※</em></td>
				            <td><input type="text" name="user_name" class="IText ChangeConfirm ImeModeActive IO" data-rule="required" data-confirm="c_userName" title="お名前"></td>
				          </tr>
				          <tr>
				            <td class="TxtR">メールアドレス<em>※</em></td>
				            <td><input name="email" class="IText ChangeConfirm IO" type="email" size="32" maxlength="128" data-rule="required,email" data-confirm="c_email" title="メールアドレス"></td>
				          </tr>
				          <tr>
				            <td class="TxtR">電話番号</td>
				            <td><input name="tel" class="IText ChangeConfirm IO" type="tel" data-rule="tel" data-confirm="c_tel" title="電話番号" >
				              <small>(ハイフンなしでお願いします)</small>
				            </td>
				          </tr>
				          <tr>
				            <td class="TxtR">お問い合わせ内容<em>※</em></td>
				            <td><textarea name="contents" class="ITextArea ChangeConfirm ImeModeActive IO" cols="50" rows="6" maxlength="1000" data-rule="required" data-confirm="c_infos" title="お問い合わせ内容"></textarea></td>
				          </tr>
				        </tbody>
				      </table>
		      		<br>
		      		<input type="button" class="Btn" value=" 確認へ" id="goConfirm">
		      		<br>
		      	</div><!-- //入力画面 -->
		      	
		      	<div id="v2" class="ItemContent" style="display:none;"><!-- 確認画面 -->
					<h2 class="ttl"><span>お問い合わせ確認</span></h2>
				      <table class="Tbl">
				        <tbody>
				          <tr>
				            <td class="TxtR">お名前<em>※</em></td>
				            <td><span id="c_userName"></span></td>
				          </tr>
				          <tr>
				            <td class="TxtR">メールアドレス<em>※</em></td>
				            <td><span id="c_email"></span></td>
				          </tr>
				          <tr>
				            <td class="TxtR">電話番号</td>
				            <td><span id="c_tel"></span>
				            </td>
				          </tr>
				          <tr>
				            <td class="TxtR">お問い合わせ内容<em>※</em></td>
				            <td><span id="c_infos"></span></td>
				          </tr>
				        </tbody>
				      </table>
		      		<div style="margin:1rem;">
		      		<input type="button" class="Btn BackBtn" value=" 修正する " id="goBack">　<input type="submit" class="Btn" value=" 送信する ">
		      		</div>
		      	</div><!-- 確認画面 -->
		      	
		     </div><!-- お問い合わせ内容-->
		</form>
	</div><!-- //contact -->
</div><!-- //container -->

<footer>
	<!--
	<script type="text/javascript" src="./jquery-2.1.1.min.js"></script>
	-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="./contact.js"></script>
</footer>

</body>
</html>

２、JSファイル contact.js 
/*
 * 作成者： benri.jp
 * 作成日： 2016年12月6日.
 * http://www.zanmai.net/contact.php
 *
 */
$ (function(){ 
	
	// 入力テキストの値が変わったら、確認画面の項目に同期する
	$('#v1 table tr td .ChangeConfirm').change(function() {
	    relationId = $(this).data('confirm');
	    $("#"+relationId).html($(this).val().replace(/\n/g,"<br>\n"));
	});

	// 「確認へ」ボタン押下
	$("#goConfirm").click(function(){
		// Validationチェック
		checkFlag = valiCheck('contactForm');
		//チェックOKなら、確認表示へ切替
		if(checkFlag){
			$("#v1").hide();
			$("#v2").show(100);
		}
	});

	// 「修正する」ボタンを押下
	$("#goBack").click(function(){
	  	$("#v2").hide();
	    $("#v1").show(100);
	});
});

/*
 * Formのバリデーションチェック
 * formName string Form名前
 * return boolen true：OK false：NG
 */
function valiCheck(formName) {
	checkFlag = true;
	var msg = "";
	$('form[name='+formName+'] .IO').each(function(i, elem) {
    	//console.log(i + ': ' + $(elem).val());
    	var rules = $(elem).data('rule').split(',');
    	for(var j=0; j<rules.length; j++) {
    		// 必須チェックと後続処理
    		if(checkFlag && rules[j] == 'required'){
    			checkFlag = checkRequired(elem);
    			if(!checkFlag) {
    				msg = '#ITEM#は必須です。';
    				break;
    			}
    		}
    		// 電話番号チェックと後続処理
    		if(checkFlag && rules[j] == 'tel') {
    			checkFlag = checkTel(elem);
    			if(!checkFlag) {
    				msg = '#ITEM#は不正です。';
    				break;
    			}
    		}
    		// メアドチェックと後続処理
    		if(checkFlag && rules[j] == 'email') {
    			checkFlag = checkEmail(elem);
    			if(!checkFlag) {
    				//alert($(elem).attr('title') +'は不正です。');
    				msg = '#ITEM#は不正です。'
    				break;
    			}
    		}
    	}
    	
    	if(checkFlag) {
    		$(elem).removeClass('ErrorIo');// if has
    	}else {
    		$(elem).addClass('ErrorIo');
    		alert(msg.replace(/#ITEM#/, $(elem).attr('title')));
    		return false;
    	}

	});
	
	return checkFlag;
}

/*
 * 必須チェック
 * elem document.element チェック対象
 * return boolen true：OK false：NG
 */
function checkRequired(elem) {
	if($(elem).val() == '') {
		return false;
	}
	return true;
	
}
/*
 * 電話番号チェック
 * elem document.element チェック対象
 * return boolen true：OK false：NG
 */
function checkTel(elem) {
	if($(elem).val() =='') {return true;}
	if(!$(elem).val().match(/^\d{2,5}\d{1,4}\d{4}$/)) {
		return false;
	}
	return true;
}

/*
 * メールアドレスチェック
 * elem document.element チェック対象
 * return boolen true：OK false：NG
 */
function checkEmail(elem) {
	if($(elem).val() =='') {return true;}
	if(!$(elem).val().match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
		return false;
	}
	return true;
}

３、contact.cssファイル 
@CHARSET "utf-8";
header,#container,footer {
	width: 960px;
	margin: 0 auto;
}

/* ======== base table style1 start ========== */
table.Tbl {
	border-collapse: collapse;
	border: 0;
	width: 100%;
}
table.Tbl td {
	border-bottom: dotted 1px #404040;
	text-align: left;
}
td.txtRight {
	text-align: right;
}
table.Tbl td:first-child {
	color: #266CB5;	
	padding: 10px 0 10px 5px;;
	width: 20%;
	font-weight: bold;
	font-size: 1.2em;
  	text-indent: 1em;
}
table.Tbl td:last-child {
	padding: 10px 0 10px 5px;;
	width: 75%;
}


td.TxtR {
	text-align: right;
}

/* ======== お問い合わせ枠CSS ========== */
.ITxt {
	min-width: 13em;
	background: #f4f4f4;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f4f4f4));
	background: -moz-linear-gradient(top, #fff, #f4f4f4);
	border: 2px solid #DADADA;
	padding: 5px 0;
	-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
	-moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
	box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
	-webkit-appearance: none;
	color: #403071;
	font-size: 150%;
	font-weight: bold;
	ime-mode: auto;
}
.ImeModeActive {
	ime-mode: active;   /* 全角モード */
}

.Btn {
    /* 文字サイズを1.2emに指定 */
    font-size: 1.2em;
    /* 文字の太さをboldに指定 */
    font-weight: bold;
    /* 縦方向に10px、
     * 横方向に30pxの余白を指定 */
    padding: 8px 10px 5px;
    /* 文字色を白色に指定 */
    color: #fff;
    /* ボーダーをなくす */
    border-style: none;
    /* ボタンの影の指定
	 */
    box-shadow: 2px 2px 3px 1px #666;
    -moz-box-shadow: 2px 2px 3px 1px #666;
    -webkit-box-shadow: 2px 2px 3px 1px #666;
    /* テキストの影の指定 */
    text-shadow: 1px 1px 2px #000;
    /* グラデーションの指定 */
    background: -moz-linear-gradient(bottom, #36d, #248 50%, #36d);
    background: -webkit-gradient(linear, left bottom, left top, from(#36d), color-stop(0.5, #248), to(#36d));
    /* 角丸の指定 */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    /* 透明度を10%に指定 */
    opacity: 0.9;
}

.Btn:hover {
    opacity: 1;
    cursor:pointer;
}


.Ttl {
	font-size: 16pt;
	font-weight: bolder;
	text-align: center;
}
em {
	color: red;
	font-size: 65%;
	font-weight: normal !important;
	font-style: normal; 
}

.ErrorIo {
	/* Firefox */
	background: -moz-linear-gradient(top center, pink 0%, pink 100%);
	/* Chrom と Safari */
	background: -webkit-gradient(linear, center top, center bottom, from(pink), to(pink));
	/* 共通 */
	background: linear-gradient(top center, pink 0%, pink 100%);
	background-color: pink;
}

以上、お問合せフォームを画面遷移せずに入力と確認ページが表示できました。
技術的な質問があれば、http://www.zanmai.net/contact.phpにお問合せ下さい。
最後、僕の新サイト便利ジャパン 一番便利なサイトを目指してはただ今開発しています。近いうちに「一番便利なサイトを目指して」一般公開する予定です。
ぜひご覧ください。

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
3人
このエントリーをはてなブックマークに追加


★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。
閲覧履歴(直近10件)


◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/261.html

閉じる

※お名前：

 

※EMAIL：

 

URL：

 

※認証コード：

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ！

check