フォームクリエイターの入力確認画面を自作HTMLで作ろう

【追記】
「フォームクリエイター」は、2020年6月末日にサービスを終了させていただくため、新規お申込みは受け付けておりません。kintoneに接続するwebフォームであれば、後継版サービスの「フォームブリッジ」を是非ご検討ください！ こちらでご紹介している、フォームの”入力確認画面”の表示に関しましては、フォームブリッジでは標準機能の”確認画面あり”にチェックを入れるだけで、”入力確認画面”の表示が可能です。フォームブリッジは、こちらから30日間の無償トライアルも可能ですよ～！

こんにちは。武井です。

今回は、弊社のkintone連携アプリ「フォームクリエイター」について、
入力確認画面を自作HTMLで表示できるようにするサンプルをご用意しました。

前回のフォームクリエイターカスタマイズ記事はこちら→武井がフォームクリエイターを半日いじるとここまで良くなる

目次

今回やること

  • フォームクリエイターに情報入力
  • 「確認する」ボタンを押下
  • 自動で新規タブでkintoneに遷移
  • kintoneのカスタマイズビューを確認画面として使用する
  • カスタマイズビュー内の「閉じる」ボタンで確認画面を閉じる
  • 「送信する」ボタンを押すと、情報の送信が完了

自社サーバーに自前のHTMLを確認画面として置きたい場合、
上記の「kintone（カスタマイズビュー）」の部分を「自社サーバーHTML」に置き換えて考えてもらえればOKです。

前準備

以下のように、フォームクリエイターの「フォーム設定」にて、
「確認画面を表示しない」の設定にしてください。

kakuningamen

今回、例として使用するのは、以前の記事でも使用した下記のフォームです。

form

JavaScriptカスタマイズ（フォームクリエイター編）

フォームクリエイターに以下のJavaScriptカスタマイズファイルをアップします。
処理内容は丁寧にコメントしておりますので、ご覧ください。

特に、文字列、ラジオボタン、チェックボックスで処理が少々異なる点などには注意です。
「#questions_******」の部分は、それぞれの環境のフィールドによって異なりますので、
要素を解析した上で、要書き換えです。
（要素の解析方法等についても以前の記事をご覧ください。）

(function () {
	"use strict";
	// フォムクリでDOM操作するにはload後である必要がある
	$(window).load(function () {
		// 「送信する」ボタンを「確認する」ボタンに看板かけ替え
		$("#btn_layout[value='送信する']").attr("value", "確認する");
		// ↑のボタンの上に見えない膜を張って送信させないようにする
		$("#btn_layout[value='確認する']").after("<div id='divId' style='height: 40px;width: 110px;position: absolute;'></div>");
		// ↑の見えない膜をクリックした時の動作
		$('#divId').on('click', function () {
			// 「確認する」ボタンを「送信する」ボタンに戻す
			$("#btn_layout[value='確認する']").attr("value", "送信する");
			// 「お名前」を変数に格納
			var name = $("#questions_317549").val();
			// 「パスワード」を"********"のように変換して変数に格納
			var pw = "";
			for (var i = 0; i < $("#questions_317628").val().length; i++) {
				pw += "*";
			}
			// 「郵便番号」を変数に格納
			var post = $("#questions_317551").val();
			// 「住所」を変数に格納
			var address = $("#questions_317552").val();
			// 「性別」を変数に格納
			var sex = $("[name='questions[317550]']:checked").next().children().text();
			// 「身分」を変数に格納
			var mibun = "";
			for (var i = 0; i < $("[name='questions[317553][]']:checked").length; i++) {
				mibun += $("[name='questions[317553][]']:checked").eq(i).next().children().text() + "　";
			}
			// 「持ち家ですか？」を変数に格納
			var house = $("[name='questions[317554]']:checked").next().children().text();
			// 「城名」を変数に格納
			var castle = $("#questions_317598").val();
			// URLの日本語になり得る部分をエンコード
			var url = "name=" + encodeURIComponent(name) + "&pw=" + pw + "&post=" + post + "&address=" + encodeURIComponent(address) + "&sex=" + encodeURIComponent(sex) + "&mibun=" + encodeURIComponent(mibun) + "&house=" + encodeURIComponent(house) + "&castle=" + encodeURIComponent(castle);
			// 新規タブで開く
			window.open("https://*****.cybozu.com/k/75/?" + url);
			// 見えない膜を消す
			$('#divId').remove();
		});
	});
	// ロード時とウィンドウリサイズ時の動作
	$(window).on('load resize', function () {
		moveDiv();
	});
	// 見えない膜を常にあの場所に被せておくための関数
	function moveDiv() {
		if ($("#btn_layout[value='確認する']")) {
			var btnOffset = $("#btn_layout[value='確認する']").offset();
			$("#divId").offset({top: btnOffset.top, left: btnOffset.left});
		}
	}
})();

ここまでで、「確認する」ボタンを押下することによって、
「window.open(“https://*****.cybozu.com/k/75/?” + url);」で指定したURLに新規タブで遷移することができます。

JavaScript＆CSSカスタマイズ（kintone編）

次に遷移先のkintoneをカスタマイズしていきます。

まず以下のHTMLを持つカスタマイズビュー「確認画面」を作成してください。

<p>
  <b>入力情報はこんな感じっす</b>
</p>
<div id="outer">
  <div id="label">
    <p>お名前：</p>
    <p>パスワード：</p>
    <p>郵便番号：</p>
    <p>住所：</p>
    <p>性別：</p>
    <p>身分：</p>
    <p>持ち家ですか？：</p>
    <p>城名：</p>
  </div>
  <div id="elm">
    <p id="name"></p>
    <p id="password"></p>
    <p id="post"></p>
    <p id="address"></p>
    <p id="sex"></p>
    <p id="mibun"></p>
    <p id="house"></p>
    <p id="castle"></p>
  </div>
</div>
<br>
<br>
<button id="close">閉じる</button>
<br>
<br>

次に、下記のJavaScriptをアップします。

(function () {
	"use strict";
	kintone.events.on('app.record.index.show', function (event) {
		if (event.viewName === "確認画面") {
			var param = getParameter();
			$("#name").text((param.name || ""));
			$("#password").text((param.pw || ""));
			$("#post").text((param.post || ""));
			$("#address").text((param.address || ""));
			$("#sex").text((param.sex || ""));
			$("#mibun").text((param.mibun || ""));
			$("#house").text((param.house || ""));
			$("#castle").text((param.castle || ""));
		}
		// 閉じるボタンクリック時の動作
		$('#close').on('click', function () {
			window.close();
			return false;
		});
		return event;
	});
	// パラメータ取得関数
	function getParameter() {
		var paramsArray = [];
		var url = decodeURIComponent(location.search);
		var parameters = url.split("?");
		if (parameters.length > 1) {
			var params = parameters[1].split("&");
			for (var i = 0; i < params.length; i++) {
				var paramItem = params[i].split("=");
				paramsArray[paramItem[0]] = paramItem[1];
			}
		}
		return paramsArray;
	};
})();

さらに下記のCSSで見た目を豪華にします。

#label{
	width: 160px;
}
#label,#elm{
	display: table-cell;
}

p{
	margin-left: 30px;
}

.box-inner-gaia{
	margin-left: 300px;
}

#outer{
	background-color: #edf0f3;
	width: 70%;
}

#close {
	width: 150px;
	left: 27%;
	background-color:#6fba26;
	padding:10px;
	position:relative;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
	box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
	border-radius: 5px;
}

#close:active {
	top:7px;
	background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
	box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
	color: #156785;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
	background: rgb(44,160,202);
}
#close::before {
	background-color:#072239;
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	padding-left:2px;
	padding-right:2px;
	padding-bottom:4px;
	left:-2px;
	top:5px;
	z-index:-1;
	border-radius: 6px;
	box-shadow: 0px 1px 0px #fff;
}

#close:active::before {
	top:-2px;
}

結果

フォームクリエイターに情報を入力します。

201609121600

すると、このようになります。

では、「確認する」ボタンを押します。

新規タブで下記画面が表示されます。

201609121602

kintoneがフォームクリエイターの確認画面になりました。

あとは、「閉じる」ボタンを押して、
フォームクリエイターの「送信する」ボタンを押せば、
データも送信されます。

実際のところ、kintoneを確認画面にする人はいないと思いますが、
自前のHTMLを使う場合もほとんど似たような手順なので問題ありません。

【免責事項】
上記プログラムは動作を保証するものではありません。
また、使用によるいかなる損失・損害も責を負いません。
個別の案件に対するサポートは行っておりません。

▼複数製品も同時に無料お試し！▼

拡張機能の最新記事4件