【kintone×フォームブリッジ】お土産発送をWebで完結しよう！
こんにちは！インターン生のみねぎしです！
今回もフォームブリッジとkintoneの連携の活用例を解説していきます。
少し発展した内容となっていますので、フォームブリッジの便利さを体感できると思います！
特にお土産業界で働いている皆さんは必見です！
それでは、本題に入りましょう！
目次
お届け物の発送手続きをWeb上で完結！
kintoneユーザの皆様、お客様のお土産配送伝票をわざわざkintoneに転記していませんか？
フォームブリッジを連携させれば、Webフォームでお客様に配送情報を記入いただき、自動でkintoneに追加できます！
お店側は配送伝票からkintoneに転記する必要もなくなるし、お客様も（複数の配送先に届ける際）何枚も配送伝票を書く手間もいらなくなります！
こんなにWin-Winな機能、試してみなきゃ損ですね…
早速、発送Webフォームの作成に取り掛かりましょう！
フォームブリッジで発送フォームを作っていきましょう！
Webフォーム作成に使うフォームリッジの機能は合計４つです。
- ステップフォーム
→複数ページのフォーム作成が可能！ - 条件分岐
→ユーザーの選択内容によって、項目を出し分けることが可能！ - 自動採番
→フォームに回答後、投稿に自動で番号を付与！ - 回答後自動処理設定
→回答後の処理方法を事前に設定できる！
少し多めですが、マスター出来れば、フォームブリッジを使いこなせること間違いなしです！
イメージがしやすいように、先に完成したWebフォームをお見せします！
１ページ目
２ページ目
回答後の画面
作成手順は、以下７つ！
- アプリ作成〜フォームブリッジと連携※
- フォームブリッジのフィールド設定
- 条件分岐の設定
- ステップフォームの設定
- 回答後の自動処理設定
- 自動採番の設定
- フォームの公開※〜回答結果確認
では、順番に解説していきます！
※「フォームブリッジの連携方法」と、「フォームのプレビュー確認〜公開」の操作手順はこちらをご覧ください。
1. アプリ作成〜フォームブリッジと連携
まず、kintoneでアプリを作成していきます。サンプルアプリは使いません！
①アプリストアで「はじめから作成」をクリック
②アプリのフィールドを以下のように設定
これでアプリの作成は完了！
③作成したアプリをフォームブリッジと連携
※操作方法はこちらをご覧ください。
2. フォームブリッジのフィールド設定
「フォームブリッジの自動採番」と「総合計」はお客様に見られたくないフィールドですね。
これらをフォームに表示しない設定をしていきます。
①「フォームのデザイン」から発送フォーム画面を表示して、「フォームブリッジ自動採番」のフィールドをクリックする。
②「フィールドの表示」の設定で、「非表示にする」にチェックを入れる。すると「フォームブリッジ自動採番」のフィールドが非表示になる。
「総合計」も同様に、「フィールドを表示しない」にチェックを入れる。
③名前とフリガナを入力する項目を必須にするため、名前を入力するすべてのフィールドをクリックし、「フィールドの表示」の設定で「必須項目にする」をチェックする。（フィールドが必須項目になったことを確認する。）
④最後に「フォームのデザイン」に戻って下部の「保存」をクリックする。
※画像の挿入は「ラベル」フィールドから可能です！
3. 条件分岐の設定
ここからは、フォームブリッジの超便利機能を設定していきます！
まずは、「条件分岐」です。
「条件分岐」の設定で、フィールド項目の「注文者と同じ」が選択されたときに、「お名前１」「フリガナ（お名前１）」「電話番号１」「お届け先郵便番号１」「お届け先住所１」のフィールドが表示されないようにします！
そのため、「注文者と同じ」というチェックボックスに条件分岐を設定していきます。
①基本設定メニューの「条件分岐」をクリック
②分岐させる条件となる項目をクリックする。
今回は「注文者と同じ」がチェックされたときに、「お名前１」「フリガナ（お名前１）」「電話番号１」「お届け先郵便番号１」「お届け先住所１」を非表示にするため、「お届け先チェック1：注文者と同じ」のチェックボックスをクリック。
条件分岐一覧にフィールド名が反映されたら、「条件分岐を作成」をクリック。
③「条件を追加」をクリックし、次の画面で条件の設定をする。
④先に「条件名」を入力する。設定画面では「〇〇したいとき、該当するフォームを表示する」設定しかできないため、非表示にしたい場合は、分岐の条件を『「注文者と同じ」を含まない』に変更する（「注文者と同じ」のチェックが外れている時のみ、注文者情報の入力フォームを表示するため）。
⑤「注文者と同じ」項目にチェックがないときに表示にする項目を、すべてクリックする。
今回は「お名前１」「フリガナ（お名前１）」「電話番号１」「お届け先郵便番号１」「お届け先住所１」をクリックし、表示するフィールドに反映されていたら「保存して戻る」をクリック。
【プレビュー画面でフォームの表示非表示を比較】
| 「注文者と同じ」にチェックがない場合→表示 | 「注文者と同じ」にチェックがある場合→非表示 |
 |
 |
⑥最後にプレビュー画面で、該当のフォームの挙動を確認する。
これで、条件分岐設定は完成です！意外とあっという間でしたね〜
4. ステップフォームの設定
続いて、「ステップフォーム」の設定に入ります！
①基本設定のメニューからステップフォームをクリック。
②「ステップフォームを利用する」にチェックを入れる。
③ステップ数（画面の数）を今回は「２」に設定し、「＋」をクリックして詳細を設定する。
④１ページ目の「タイトル」と「説明」を入力し、「フィールド構成」にある1枚目のフィールドに表示したい注文者情報のフィールドをクリックする。
⑤「＋」追加をクリックし、２ページ目では残りのフィールドをすべてクリックする。
⑥「保存」をクリックしてステップフォーム設定は完了。
あと残り２つを設定していきましょう！
5. 回答後の自動処理を設定
３つ目の追加する機能は「回答後の自動処理」です！
回答後の自動処理設定をする目的は、
「注文者と同じ」が選択された場合、kintoneアプリに「注文者情報」が自動的に「お届け先１」に追加されるようにするためです！
①「回答後の自動処理」から、kintoneアプリに保存の「編集」をクリック。
②自動処理の詳細を次のように設定。
※kintoneアプリのURLとAPIトークンの記入が必要。
③上記の「＋保存先フィールドの設定を追加」をクリック。
④kintoneアプリの保存先のフィールドを以下のように設定します。
⑤２つ目の自動処理の設定をしていきます。
1つ目と重なる部分が多いので、コピーして作成していきます。
⑥２つ目を以下のように詳細設定していきます。
赤線の部分は１つ目からの変更箇所です。
「回答後の自動処理」の画面が、以下のようになっているでしょうか？
＊「並び替え」をクリックしながらスライドすることで、順番は変更できます。
これで回答後の自動処理は完了です！
お届け先が「注文者と同じ」の場合に、注文者情報が自動的に「お届け先１」に追加されます！
6. 自動採番の設定
機能設定はこれで最後です！「自動採番」を追加していきましょう！
「自動採番」で、お客様の回答に自動的に番号が振り分けられます！
設定するのは「回答後の自動処理」と「回答完了画面」の２箇所です。
まず初めに、「回答後の自動処理」から設定していきます。
手順はカンタン３ステップ！
①「回答後の自動処理」から「＋回答後処理を追加する…」をクリック。
次のように回答処理を設定し、「＋回答後処理の追加」をクリック。
②自動採番処理の項目を一番最初に並び替えます。
③そして、「回答完了画面」を開きます。
回答完了後のメッセージの中に
{{__auto_increment__}}
を記入すると、その箇所に自動採番で生成された番号が記入されます。
以下のように設定してみましょう。
「保存」をクリックして、自動採番処理の設定は完了です！
「自動採番」について、詳しく知りたい方は操作ガイドをご覧ください。
以上で、フォームブリッジの機能の設定は終了です、お疲れ様でした！
7. フォームの公開〜回答結果確認
①フォームを公開しましょう！
Webフォームのプレビュー確認から公開までの手順はこちらの11以降をご覧ください！
※「編集内容中の設定をフォームに反映」を忘れずに！
②実際に完成したWebフォームに回答！
1ページ目
2ページ目 「注文者と同じ」にチェックを入れました！
回答後の完了画面
③kintoneのアプリ画面で追加されたレコードを確認！
「お届け情報1」に注文者と同じ情報が自動的に追加されていますね！
まとめ
作成お疲れ様でした！
今回はフォームブリッジの「条件分岐」「ステップフォーム」「回答後の自動処理」「自動採番」の4つの機能を使用していきましたが、いかがだったでしょうか！
4つの機能を一気に解説していきましたが、1つひとつの機能はシンプルでカンタンに設定できましたね。
これらの設定で、①Web上で発送の注文ができ、②kintoneへ転記する手間も省け、③お客様に快適な発送手続きを提供できます！
フォームブリッジでこんなに便利に！と感じていただけたら幸いです！
フォームブリッジについてもっと知りたい！という方は以下の関連サイトをご覧ください。
フォームブリッジ30日間の無料お試しはこちら
