🍋

kintone|FormBridgeの見た目をCSSカスタマイズする

2022/11/11に公開約5,100字

はじめに

この記事はサイボウズ社が提供するkintone、トヨクモ社が提供するフォームブリッジに関連する内容です。

フォームブリッジとはkintone連携フォームサービスです。フォームに回答すると、指定のkintoneアプリにレコードとして保存され、回答を受けた側はそのレコード情報をもとに業務フローを回すことができます。大変便利です。

背景

フォームブリッジはデザインが予め定まっているため、導入先のお客さんから、サイトブランドやマーケティング施策の観点によるCSSカスタマイズのご要望を度々お受けします。

お客さんから特にご相談をお受けしたのは、
「フォームの離脱率が高いので、入力画面をなるべくブラウザの一画面に収めてほしい」
「見た目を整頓してほしい」
「必須項目をわかりやすくしてほしい」
この3点でした。
また、広告の観点から、アイフレームへの埋め込みや完了画面のリダイレクトなど、動作に関するところも依頼をお受けしていました。

この際にフォームブリッジをどこまでカスタマイズできるか食べ尽くし調べたので記しておこうと思います。

記事の内容について

この記事では、個人的によく使うカスタマイズと引用・参照元のリンク、独自でちょっと取り組んだモノ、等々を記録しています。引用・参照元のリンクは、フォームブリッジ公式サイト、cybozu developer networkコミュニティが主となり、こちらにはカスタマイズに関するQ&Aが豊富ですので、ぜひご覧ください。

※今後のフォームブリッジの仕様変更によっては動作しなくなる可能性もあります。ご了承ください
※これは望ましくない、と思われるものはご指摘いただけますと幸いです。

この記事の対象者

kintoneとフォームブリッジを使用しており、フォームブリッジの見た目をカスタマイズしたい方

この記事に書いていないこと

フォームブリッジのサービス内容、使い方

カスタマイズTips

各カスタマイズについて、引用や参考にしたものがあった場合はリンク貼っています。
今回のカスタマイズの内容は、フォームブリッジの画面に応じてカテゴリ分けをしました。

  1. 共通
  2. 入力画面
  3. 確認画面
  4. 完了画面

「1.共通」については、入力画面〜完了画面で適用されるもの、とご認識ください。

1. 共通

フォームの幅を狭めたい

custom.css
.ui.container {
	max-width: XX% !important;
	/*もともと100%で指定してあるので、%の値を変更する*/
}

max-widthで指定してあげると大丈夫そうです。

ボタンの文言を変えたい

確認ボタンや送信ボタンの文言変更。カスタマイズで行うことも可能ですが、調べた結果、標準機能である「多言語機能」を使うと簡単にできます。
参考:ボタンの文言変更も!! ~フォームブリッジの「多言語化」~

ボタンのチェック/矢印アイコンを消したい

custom.css
/**アイコンを消す*/
i.icon {
	display: none;
}
/**アイコン分の余白を詰める*/
.ui.labeled.icon.button {
	padding-left: 1.5em !important;
}

確認、回答、戻るボタンのチェック/矢印アイコンを消します。シンプル。

ボタンの色を変えたい(※調査中..)

custom.css
/*通常時*/
.ui.teal.button,
.ui.teal.buttons,
.button {
	margin-left: 20px;
	background-color: #5b3318;
}
/*hover・active時*/
.ui.teal.button:hover,
.button:hover,
.ui.teal.button:active,
.button:active {
	background-color: #4b3114;
}

「ちょっとレトロな色に変えてみたい」
どうしても昔の喫茶店のような色にしてみたかったので変えてみました。
ただ、ボタン押下時に「必須項目未入力エラー」となった場合に、元の色に戻ってしまいました(可能なときに調査します..)

2. 入力画面

フィールド項目に必須のラベルを付けたい

custom.css
/*文字コード指定*/
@charset "UTF-8";

.ui.form .required.field > label:before {
	content: "必須" !important;
	/*ラベルデザインはお好みで*/
	color: #ffffff;
	background-color: #d30508;
	font-size: 0.8em;
	font-weight: normal;
	margin-right: 10px;
	padding: 2px 3px;
	border-radius: 5px;
	display: inline-block;
}

参考:フォームブリッジの”必須”マークを任意の画像か文字列に変更する方法
「必須はやっぱり赤ラベル」
参考記事をもとに、必須のアスタリスクはそのままにして、フィールド名の手前に必須マークを置きました。
任意マークを置きたい場合は、クラスの指定を
.ui.form :not(.required.field) > label:before
とすれば、必須項目以外のフィールドを指定することができます。

フィールド項目の行間を狭めたい

custom.css
/*通常画面*/
.ui.grid > .row {
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 2px; /*お好み*/
}

/*レスポンシブ画面*/
.ui.stackable.grid > .row > .column {
	padding: 2px 1rem !important;
	margin-bottom: 2px;
}

良い感じに詰めることができます。
行間を詰めることで、フォームの長さをできる限り抑え、スクロールを減らすことができます。

縦並びチェックボックスの項目間隔を狭めたい

custom.css
.ui.grid .fields > .field {
	margin-bottom: 0 !important;
}

ここも少し詰めたい。選択肢の行間が上下にきゅっと狭まります。

横並びチェックボックスの選択肢を揃えたい

custom.css
.ui.grid .fields > .field {
	width: 200px; /*1選択項目の幅。お好みの幅にする*/
	vertical-align: top; /*選択肢を上揃えにする*/
}

横並びのときは、選択項目の文字数がばらばらだとチェックボックスが揃いません。
そんなチェックボックスの先頭をきれいに揃えたい、という強い思いを実現しました。

🐤 特定のチェックボックスだけに適用するには?

custom.css
.ui.grid [data-vv-name="{チェックボックスフィールドコード}"] > .field {
	margin-bottom: 0 !important;
	width: 200px;
	vertical-align: top;
}

属性data-vv-nameで、フィールドコードを指定します。

3. 確認画面

項目と入力値の表示幅を変更したい

custom.css
.ui.column.grid > [class*="two wide"].column,
.ui.grid > .column.row > [class*="two wide"].column,
.ui.grid > .row > [class*="two wide"].column,
.ui.grid > [class*="two wide"].column {
	width: 40% !important;
}
.ui.column.grid > [class*="fourteen wide"].column,
.ui.grid > .column.row > [class*="fourteen wide"].column,
.ui.grid > .row > [class*="fourteen wide"].column,
.ui.grid > [class*="fourteen wide"].column {
	width: 60% !important;
}

引用:フォームブリッジ 「確認画面」の表示幅のカスタマイズ
デフォルトの確認画面は、項目名の幅が極端に狭く、文字折返しによりスクロールが多くなってしまいます。
視認性向上のためにも設定することをおすすめします。

4. 完了画面

完了画面で別ページに飛びたい

(これだけJavaScriptのカスタマイズでした..🐤)

custom.js
(function () {
	"use strict";
	fb.events.finish.created = [
		function (state) {
			parent.location.href =
				"https://piyopiyo.com/thanks.html";
			return state;
		},
	];
})();

引用:フォームブリッジでコンバージョンページにリダイレクトするJS紹介

引用元の記事では、

※このJavaScriptは確認画面を挟んだ場合に動作するものとなりますので、
「完了画面」の設定にて“確認画面あり”を選択してください!

とあります。

ここで ”確認画面なし” にした場合にどうなるかを試してみました。
すると、フォーム入力画面で送信ボタン押下後、一瞬確認画面を表示したのちにコンバージョンページにリダイレクトします。

では発火のイベントを変えればいいのでは?とfb.events.form.submitイベント(フォームから完了画面に移動する前イベント)を試行したところ、
どうやら「回答後処理」の設定にある、kintoneへの保存、エラーメール送信、自動返信メールなどの内部的処理を実行する前にリダイレクトの処理が実行されてしまうようです。

そのため、確認画面をふむ流れの ”確認画面あり” に設定したほうがよさそうです。

Others

Coming Soon...
適宜更新いたします。

おわりに

いかがでしたでしょうか。
CSSカスタマイズだけでも見た目は様々変更できそうですね。

JavaScriptを用いたカスタマイズは、また別の記事で書きたいと思います。

Discussion

ログインするとコメントできます