【kintone×フォームブリッジ】お土産発送をWebで完結しよう!

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

トヨクモ編集部
kintoneを便利に活用する情報を発信|サポートチーム全員がkintone資格保有者|【クラウドで、もっと便利に。もっと簡単に。】をモットーに活動