1. 指定タグの人にはオリジナルフォームを表示しない

指定タグの人にはオリジナルフォームを表示しない

2023.03.06 更新
Text=kintsuba
指定のタグが付いているユーザーのオリジナルフォームを表示させない方法です。
フォームの回答に回数制限をつけたいときなどに有効です。

下記フォームサンプルページを元に説明します。
ファイルをダウンロードして内容をご確認ください。
フォームサンプルダウンロード>
フォームサンプルページ>

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U

※PCのブラウザで開いても正常に動作しません。


■処理の流れ
①ローディング表示
↓
②指定のタグがあるかチェック
↓
③指定のタグがある場合はフォームを閉じます


■編集ファイル:index.html

(1)ローディングの初期設定
フォームアクセス時に、指定タグの情報を問い合わせている間、ローディング画面を表示させる必要があります。
推奨のローディング設定をする場合は、既存のローディング設定を削除(コメントアウト)してください。
(※既存のローディング設定をそのまま使って組み込むことも可能です。)


例)
//loader
// $(window).on('load', function () {
// 	$("#loader").addClass('loaded');
// });
// $(function () {
// 	setTimeout(function () {
// 		$("#loader").fadeOut();
// 	}, 5000);
// });

<!-- <div id="loader">
	<div class="line-scale">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</div> -->
(2)ローディング用のスタイル追加
backgroundのURLにローディング用の画像パスを設定
<style>
	/* ローディング用 */
	header,
	.wrap,
	footer{
	display: none;
	}

	#nowLoading {
	display: table;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #fff;
	opacity: 0.8;
	}
	
	#innerMsg {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding-top: 140px;
	z-index:100;
	background: url("./images/loading_cl.svg") center center no-repeat;
	}
</style>
(3)ローディング画像の設定
<script>
	//ローディング画像表示
	function dispLoading(msg){
		// 引数なしの場合、メッセージは非表示。
		if(msg === undefined ) msg = "";
		
		// 画面表示メッセージを埋め込み
		var innerMsg = "<div id='innerMsg'>" + msg + "</div>";  
		
		// ローディング画像が非表示かどうかチェックし、非表示の場合のみ出力。
		if($("#nowLoading").length == 0){
			$("body").append("<div id='nowLoading'>" + innerMsg + "</div>");
		}
	}
	
	//ローディング画像非表示
	function removeLoading(){
		$("#nowLoading").fadeOut();
		$("header, .wrap, footer").show();
	}

	dispLoading();
</script>
(4)タグチェックの非同期処理の設置
※フォームアクセス時のテキストはこちらで変更可
//タグチェック
function CheckTagProc() {
	var uid = $("#useridfield").val();
	var fid = $("#fid").val();
	var tag = $("#check_tags").val();
	var botid = $("#bot_id").val();
	$.ajax({
		type: "POST",
		url: "/api/tag/chk",
		dataType: 'json',
		data: {
		"uid": uid,
		"fid": fid,
		"bot_id": botid,
		"tag_code": tag
		},
		success: function(j_data) { if (j_data['result'] == 'Granted'){alert("こちらのフォームは回答済みです。");liffclose();} },
		error: function(XMLHttpRequest, textStatus, errorThrown) {
		},
		complete: function() {removeLoading();}
	});
}
//■Response
//error_code 正常な場合は「200」、指定されたタグが存在しない・会員情報が存在しない等の場合は「500」
//result error_codeが500の場合は「ParamMissing」、指定タグコードが付与済みの場合は「Granted」、指定タグコードが未付与の場合は「NotGranted」
(5)非同期処理のコール処理を追加
(6)指定のタグを設置
valueにタグを指定、複数の場合は「,」で区切る
(7)指定のタグがあるユーザーがフォームを開くと、アラート表示後に閉じます。
ご希望通りのセッティングができましたか?

0人中0人がセッティングができたと言っています。

このマニュアルの作成者は kintsuba です。

こちらのマニュアルで希望のセッティングが出来なかった
際は、下記のどちらかでお問い合わせください。

フリープランの方はこちら
LINE公式アカウント機能拡張プラン、
オートコールセンタープランの方はこちら