kintoneをもっと便利に! プラグイン・連携サービスの活用術(6) 「フォームブリッジ」でWebフォームの編集、kintoneアプリとの同期

前回は、kintoneの連携サービスとなる「フォームブリッジ」の基本的な使い方を紹介した。今回は、Webフォームを編集したり、kintoneアプリと同期したりする方法を詳しく紹介していこう。

「フォームブリッジ」Webフォームの編集、kintoneアプリとの同期

Webフォームの編集画面の表示

「フォームブリッジ」は、Webフォームの画面をカスタマイズできる編集機能を提供する。前回は最低限の編集機能のみ紹介したが、それ以外の編集機能についても触れておこう。

ここでは、前回に作成した「問い合わせフォーム」を再編集する場合を例に、それぞれの設定項目について解説していく。

まずは、Webフォームの編集画面を表示するときの操作手順から解説していこう。「フォームブリッジ」の管理画面を開くと、これまでに作成したWebフォームが一覧形式で表示されているのを確認できる。現時点ではWebフォームを1個しか作成していないので、以下の図のような状態になっている。この画面の「フォーム管理名」の列にあるリンクをクリックすると……、

「フォームブリッジ」の管理画面

そのWebフォームの概要を表示できる。続いて、左側のメニューから「フォームのデザイン」を選択する。

フォームの概要

すると、以下に示したような編集画面が表示され、Webフォームを自由に編集できるようになる。

Webフォームの編集画面

それぞれの設定項目について詳しく見ていこう。

Webフォームの編集

まずは、Webフォームの「タイトル」を変更する方法だ。Webフォームを作成した直後は、連携したkintoneアプリの「アプリ名」がタイトルとして表示されている。とはいえ、このままではタイトルとして不適切なケースもあるだろう。

このような場合は「タイトル」の部分をクリックして選択し、左側の領域に「タイトルの文字」を入力しなおせばよい。これでタイトルを好きな文字に変更できる。

タイトルの編集

続いては、それぞれの「フィールド名」を変更する方法を紹介する。こちらもkintoneアプリの「フィールド名」がそのまま表示される仕組みになっているが、これが適切でないケースもある。この場合は、フィールドをクリックして選択し、左側の領域で「フィールド名」の文字を修正すればよい。

フィールドの選択

フィールド名の変更

Webフォームに「ラベル」を追加して、説明文や注釈などを配置することも可能だ。Webフォームの余白をクリックしてフィールドの選択を解除すると、左側に以下の図のようなパーツ群が表示される。ラベルを追加するときは、「ラベル」のパーツをWebフォーム内の好きな位置へドラッグ＆ドロップすればよい。

ラベルの追加

Webフォームに追加された「ラベル」をクリックして選択すると、左側の領域に以下の図のような設定画面が表示される。ここに表示したい文字を入力して書式を指定すると、Webフォーム内の好きな位置に文字（文章）を配置できる。

ラベルの編集

なお、各フィールドの入力方法などを説明するときは、「フィールドの補足」を利用してもよい。フィールドをクリックして選択し、左側の領域を下へスクロールしていくと、「フィールドの補足」という項目が見つかる。ここに入力した文字は、各フィールドの下に補足文として表示される仕組みになっている。

フィールドの補足

ヘッダーやフッターの表示／非表示を切り替えることも可能だ。初期設定では、ヘッダー部分に「FormBridge」のロゴ画像が表示されている。これが不要な場合は、「ヘッダーを表示する」をOFFにすればよい。

ヘッダーの表示／非表示

同様に、フッター部分に表示されているコピーライトが不要な場合は、「フッターを表示する」をOFFにすればよい。

フッターの表示／非表示

Webフォームの一番下に配置されている「回答」ボタンの文字も自由に変更できる。この場合は、「回答」ボタンをクリックして選択し、左側の領域で「ボタンの文字」を修正すればよい。

「回答」ボタンのカスタマイズ

そのほか、Webフォーム全体の背景色を変更する、ファビコンを変更する、ブラウザのタブに「FormBridge」の文字を表示しない（※）、といった設定項目も用意されている。

（※）お試し環境では「FormBridge」の文字を非表示できない。この設定項目は有償契約後に利用可能になる。

ちなみに、画面右側に表示されている編集結果は、「保存」ボタンをクリックした時点で確定される仕組みになっている。また、すでにWebフォームをインターネットに公開している場合は、「更新」ボタンもクリックして、公開中のWebフォームも更新しておく必要がある。忘れないように注意しておこう。

Webフォームの保存と更新

逆に考えると、「保存」ボタンをクリックしないでブラウザを閉じると、それまでの編集内容をキャンセルできることになる。即時保存ではないため、気軽にいろいろと試せることも好感が持てる仕様といえるだろう。

「Webフォーム」と「kintoneアプリ」の同期

Webフォームを作成（公開）した後に、「この項目も追加しておけば良かった……」などの改善点が見つかるケースもあるだろう。この場合、「Webフォーム」と「kintoneアプリ」の両方にフィールドを追加しなければならない。さらに、それぞれのフィールドをひもづける作業も必要となる。

こういった修正にも柔軟に対応できるように、フォームブリッジには「同期」という機能が用意されている。その基本的な使い方を紹介しておこう。

まずは、kintoneアプリにフィールドを追加した場合の例だ。例えば、Webフォームと連携しているkintoneアプリに「会社名」というフィールドを追加したとしよう。

kintoneアプリに追加したフィールド

現時点では、kintoneアプリだけに「会社名」のフィールドがある状態で、Webフォームには「会社名」のフィールドが存在していない。これを「同期」させてみよう。

kintoneアプリを更新してから「フォームブリッジ」の管理画面を開く。続いて、Webフォームの編集画面を表示し、「同期」ボタンをクリックする（※）。

（※）すでにWebフォームの編集画面を表示している場合は、ページを再読み込みしてから「同期」ボタンをクリックする。

同期の開始

すると、kintoneアプリに配置されているフィールドが再取得されるので、この中から「同期元のフィールド」を選択する。今回の例の場合、「会社名」をONにした状態で「次へ」ボタンをクリックすればよい。

同期元のフィールドを指定

続いて「同期先のフィールド」を指定する。ただし、現時点ではWebフォームに「会社名」のフィールドが存在していないため、選択すべき同期先がない状態になっている。このような場合は、同期先を「選択してください」にしたまま「次へ」ボタンをクリックすればよい。これで「新しいフィールド」を自動作成できる。

同期先のフィールドを指定

同期前と同期後の「差分」が表示される。今回の例の場合、各列に以下のような情報が表示される。

同期前：空白（フィールドが存在しない）
同期後：kintoneアプリから取得したフィールド情報

これを確認してから「保存」ボタンをクリックする。

差分の確認

すると、「会社名」のフィールドが同期され、Webフォームの一番下に「会社名」のフィールドが自動作成される。

Webフォームに追加されたフィールド

あとは、このフィールドの配置を調整してから「保存」ボタンと「更新」ボタンをクリックするだけ。これで一連の作業は完了となる。

前述した操作とは逆に、Webフォームに追加したフィールドをkintoneアプリに同期させることも可能となっている。今度は、Webフォームに「電話番号」のフィールドを追加する場合を例に解説を進めていこう。

Webフォームにフィールドを追加するときは、左側に並んでいるパーツを好きな位置へドラッグ＆ドロップすればよい。なお、フォームブリッジでは、「リンク」も「文字列（1行）」として扱わる仕組みになっている。よって、「文字列（1行）」のパーツをWebフォーム内へドラッグ＆ドロップする。

Webフォームにフィールドを追加する操作

続いて、追加したフィールドをクリックして選択し、「フィールド名」などの項目を設定していく。フィールドごとに表示される設定項目は変化するが、基本的な設定方法は「kintoneでフィールドを設定する場合と同じ」と考えて構わない。よって、kintoneに慣れている方なら、すぐに設定方法を理解できるだろう。

追加したフィールドの設定

続いて、左側の領域を一番下までスクロールし、「kintoneアプリの保存先フィールド」を指定する。ただし、現時点ではkintoneアプリに対応するフィールドが存在していない。このような場合は「kintoneにフィールドを作成して保存」を選択すると、kintoneアプリに「新しいフィールド」を自動作成できる。