「フォームブリッジ」で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アプリに「新しいフィールド」を自動作成できる。

• 

  kintoneアプリの保存先フィールドの指定

以上でフィールドの設定は完了。フィールドの選択を解除してから「保存」ボタンをクリックすると、以下のような画面が表示される。これを確認してから「kintoneアプリにフィールドを同期して保存」ボタンをクリックする。

• 

  同期の実行

フィールドの同期が実行され、kintoneアプリにも「電話番号」のフィールドが自動追加される。念のため、kintoneでアプリを開いた様子を紹介しておこう。自動追加されたフィールドは画面の一番下に配置されているので、この時点で位置やサイズを調整しておくとよいだろう。

• 

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

なお、「Webフォーム」→「kintoneアプリ」の同期を実行するには、APIトークンの設定で「アプリ管理」のアクセス権をONにしておく必要がある。

• 

  APIトークンの設定

このアクセス権がOFFになっているとエラーが発生し、同期が失敗してしまう。Webフォーム側から同期するときは、この点について事前に確認しておく必要がある。

そのほか、「ラジオボタン」や「ドロップダウン」などの選択肢、「数値」フィールドの最小値／最大値など、各フィールドの設定を同期させることも可能となっている。

このように、フォームブリッジには「Webフォームのカスタマイズ」や「kintoneアプリとの同期」に関連する機能がひととおり用意されている。さらに、Webフォームの動作を指定できる設定項目も用意されている。ということで、次回は「条件分岐」や「ステップフォーム」の使い方を紹介していこう。