「フォームブリッジ」条件分岐とステップフォームの使い方

前回に引き続き、「フォームブリッジ」の使い方を紹介していこう。今回は、状況に応じて設問（フィールド）の表示／非表示を変更できる「条件分岐」、ならびにWebフォームを複数のページに分割できる「ステップフォーム」の使い方を紹介していこう。

条件分岐とステップフォーム

kintoneの連携サービス「フォームブリッジ」には、Webフォームの動作をカスタマイズできる機能も用意されている。この機能を上手に活用すると、使い勝手のよいWebフォームを作成できるようになる。その具体的な例として、今回は「条件分岐」と「ステップフォーム」の使い方を紹介する。

• 

  「フォームブリッジ」条件分岐とステップフォームの使い方

まずは、「条件分岐」を利用したWebフォームの例から紹介しよう。以下の図は、「お問い合わせ」のWebフォームをフォームブリッジで作成した例だ。お問い合わせの分類には、「ご質問」や「ご要望」だけでなく、「資料請求」といった選択肢も用意されている。

• 

  条件分岐を利用したWebフォーム（1）

この設問で「資料請求」を選択すると、「資料が必要なサービス」や「提供方法」といったフィールドが新たに追加表示される。

• 

  条件分岐を利用したWebフォーム（2）

さらに、提供方法に「郵送」を選択すると、「郵便番号」「お届け先住所」「電話番号」を入力するためのフィールドが追加表示される。

• 

  条件分岐を利用したWebフォーム（3）

このように、利用者が選択した内容に応じて「表示するフィールド」を変更できる機能が「条件分岐」となる。必要な設問だけを表示するように工夫すれば、より使い勝手のよいWebフォームに仕上げられるだろう。

続いては、「ステップフォーム」を利用したWebフォームの例を紹介していこう。以下の図は、オンラインセミナーの申込を受け付けるWebフォームだ。最初のページには「開催日」と「時間」を選択するフィールドが表示されている。

• 

  ステップフォームを利用したWebフォーム（1ページ目）

「次へ」ボタンをクリックすると、画面が2ページ目に切り替わり、「氏名」や「メールアドレス」「電話番号」を入力するフィールドが表示される。

• 

  ステップフォームを利用したWebフォーム（2ページ目）

さらに「次へ」ボタンをクリックすると、画面が3ページ目に切り替わり、簡単なアンケートが表示される。

• 

  ステップフォームを利用したWebフォーム（3ページ目）

このようにWebフォームを複数のページに分割して、利用者が情報を入力しやすくする機能が「ステップフォーム」となる。

条件分岐を利用したWebフォーム

それでは、先ほど示したWebフォームを例に、具体的な設定手順を解説しよう。まずは「条件分岐」の設定方法を解説する。

Webフォームの作成方法は、前回や前々回に紹介した手順と同じ。とりあえずは、条件に関係なく、必要なフィールドをすべて配置していけばよい。フィールドを配置・設定できたら「メニューを表示」をクリックする。

• 

  Webフォームに必要なフィールドを配置

左側の領域がメニュー表示に切り替わるので、「条件分岐」を選択する。続いて、「条件分岐を利用する」をONにし、「条件分岐の追加」ボタンをクリックする。

• 

  条件分岐の設定開始

以下の図のような画面が表示されるので、最初に「分岐させる条件を指定するフィールド」を指定する。今回の例では「お問い合わせの分類」に応じて表示するフィールドを変化させるので、このフィールドには「お問い合わせの分類」を選択すればよい。

• 

  条件にするフィールドの指定

ちなみに、条件を指定できるフィールドは、ラジオボタン、チェックボックス、複数選択、ドロップダウン、階層選択の5種類となっている。

続いて、「表示を制御するフィールド」を指定する。ここには「最初は非表示にしておくフィールド」を指定すればよい。今回の例の場合、以下の5つのフィールドを指定することになる。

・資料が必要なサービス
・提供方法
・郵便番号
・お届け先住所
・電話番号

• 

  表示を制御するフィールドの指定

それぞれのフィールドを正しく指定できたら、「追加」ボタンをクリックする。

• 

  フィールドの指定を保存

以下の図のような設定画面が表示される。まずは「条件」から指定していこう。今回の例では、「お問い合わせの分類」が「資料請求」に等しい場合、という条件を指定すればよい。

• 

  条件の指定

続いて、条件を満たすときに追加表示するフィールドを指定する。今回の例では、「資料が必要なサービス」と「提供方法」のフィールドを指定すればよい。

• 

  条件を満たすときに表示するフィールド

以上で、1つ目の条件分岐の設定は完了となる。続いて、提供方法に「郵送」が選択された場合の条件分岐を設定していこう。「条件分岐の追加」ボタンをクリックする。

• 

  条件分岐の追加

2つ目の条件分岐も、基本的な設定手順は先ほどと同じだ。「条件」と「表示するフィールド」を以下のように指定する。

【条件】
・「提供方法」が「郵送」に等しい場合

【表示するフィールド】
・郵便番号
・お届け先住所
・電話番号

• 

  2番目の条件分岐の指定

最後に、画面の下部にある「保存」ボタンをクリックする。その後、画面右上にある「プレビュー」をクリックしてWebフォームの動作を確認する。今回の例の場合、「資料請求」や「郵送」を選択すると、フィールドが追加表示されるのを確認できるはずだ。

• 

  プレビューで動作を確認

動作を確認できたら、「公開」ボタンをクリックしてWebフォームをインターネットに公開する。すでに公開してある場合は「更新」ボタンをクリックして、今回の設定変更をWebフォームに反映すればよい。

以上が「条件分岐」の基本的な使い方になる。通常のWebフォームと比べると少しだけ手順が複雑になるが、特に難しい設定項目はないので、初心者の方でも十分に対応できるだろう。

なお、今回はそれぞれの「条件分岐」に条件を1つだけ指定したが、複数条件の指定にも対応している。この場合は、論理タイプに「全ての条件を満たした場合」または「1つ以上の条件を満たした場合」を選択して、複数条件の連結方法を指定すればよい。

ステップフォームを利用したWebフォーム

続いては、Webフォームを複数のページに分割できる「ステップフォーム」の使い方を解説していこう。この場合も、必要なフィールドをすべて配置したWebフォームを作成してから「メニューを表示」をクリックする。

• 

  Webフォームに必要なフィールドを配置

左側の領域がメニュー表示に切り替わるので、「ステップフォーム」を選択する。続いて「ステップフォームを利用する」をONにし、ステップ数（ページ数）を指定してから「＋」アイコンをクリックする。

• 

  ステップフォームの設定開始

すると、以下の図に示したような設定画面が表示される。ここで1ステップ目（1ページ目）の設定を行う。「ステップのタイトル」と「ステップの説明」を入力する。なお、「ステップの説明」は入力を省略しても構わない。

• 

  タイトルと説明文の指定（1ステップ目）

続いて、1ステップ目に表示するフィールドを指定する。指定できたら、設定画面の上部にある「＋」アイコンをクリックする。

• 

  表示するフィールドの指定（1ステップ目）

2ステップ目（2ページ目）の設定画面が表示されるので、先ほどと同様の手順で「タイトル」と「説明」を入力し、表示するフィールドを指定する。指定できたら「＋」アイコンをクリックする。

• 

  ステップ2の設定画面

• 

  2ステップ目の設定

同様の手順で3ステップ目（3ページ目）を設定する。設定できたら「保存」ボタンをクリックする。

• 

  3ステップ目の設定

その後、画面右上にある「プレビュー」をクリックしてWebフォームの動作を確認する。今回の例の場合、全体を3つのステップ（3ページ）に分割したWebフォームになっていることを確認できるはずだ。

• 

  プレビューで動作を確認

動作を確認できたら、「公開」ボタンをクリックしてWebフォームをインターネットに公開する。すでに公開している場合は「更新」ボタンをクリックして、今回の設定変更をWebフォームに反映する。

以上が「条件分岐」と「ステップフォーム」の使い方となる。わずかな手間でWebフォームの使い勝手を大幅に向上できるので、積極的に活用していくとよいだろう。これらのほかにも、フォームブリッジにはWebフォームを使いやすくするための機能が豊富に用意されている。次回は、フォームブリッジに用意されている「さまざまな機能」について紹介していこう。