Webflowとkintoneを連携してWebflowのフォームが送信されたらkintoneに追加する方法

Webflowとkintoneの連携により、業務の効率向上が期待できます。
例えば、Webflowで送信されたフォームデータを自動的にkintoneに反映させることで、手動入力の手間を省き、データ管理の精度向上が可能となるでしょう。
この記事では、手動入力の削減やフォームデータの一元管理といった具体的なメリットと連携方法について紹介します。
顧客管理やリード情報をkintoneで一元管理したい方におすすめです！

それでは、この連携で得られるメリットを詳しく紹介します。

Webflowとkintoneを連携するメリット

メリット1:手動入力の削減

Webflowとkintoneを連携することで、Webflowのフォームが送信された際に自動でkintoneに情報が追加されます。これにより、担当者はフォームデータをkintoneに手動で転記する手間を省き、ミスの発生率を減少させることができるでしょう。また、この連携は時間とリソースの節約にもつながり、全体的な作業効率向上が期待できます。データの自動入力によって、迅速で正確な情報管理が可能になり、チーム全体の生産性が高まるでしょう。
特に、営業チームやカスタマーサポートにとっては、顧客対応のスピードと質が向上するため、大きなメリットとなるでしょう。

メリット2:フォームデータの一元管理

Webflowとkintoneの連携により、異なるプラットフォームで発生するデータを一元管理でき、情報が散在する問題を解決できます。これにより、チーム全体で必要な情報にリアルタイムにアクセスでき、業務全体のスムーズな進行が期待できます。
例えば、マーケティングチームが複数のキャンペーンを同時に運用している場合でも、すべてのデータを一元管理することで、キャンペーンの効果測定や改善点の特定しやすくなるでしょう。これは、複数のフォームや案件を扱う企業にとって特に役立つでしょう。

[Yoomとは]

Webflowとkintoneの連携フローの作り方

それでは、実際にテンプレートを使用して「Webflowのフォームが送信されたらkintoneに追加する」フローを一緒に作っていきましょう！

今回使用するテンプレートは、下のバナーの「試してみる」をクリックするとコピーできます。

はじめる前に

Yoomのアカウントをお持ちでない方は、以下の「Yoomのアカウント発行ページ」からアカウントを発行してください。
Yoomの基本的な操作は「初めてのYoom」をご確認ください。‍

Yoomのアカウント発行ページ

初めてのYoom

それでは、始めましょう！

ステップ1：Webflowとkintoneをマイアプリ連携

(1)Yoomにログイン後、左欄にある「マイアプリ」を選択し「＋新規接続」をクリックします。

(2)マイアプリの新規接続一覧の中から、Webflowをクリックします。
(3)「Webflowの新規登録」画面から、アカウント名、アクセストークンを入力し、「追加」をクリックします。

(4)次はkintoneを登録します。同様にYoomの新規接続一覧の中からkintoneをクリックします。
(5)kintoneの新規登録画面が出るので、サブドメイン、クライアントID、クライアントシークレットの3箇所を入力し、追加をクリックします。
※サブドメイン、クライアントID、クライアントシークレットの確認方法は下記のサイトをご確認ください。

kintoneマイアプリ登録方法

kintoneのマイアプリ登録ができない主な原因と対応方法について

(6)以下の内容が出るので、確認して問題なければ許可をクリックしましょう。

連携が完了するとYoomのマイアプリにWebflowとkintoneが登録されます。
これで、マイアプリ登録が完了しました。
次に、テンプレートを使用してトリガーの設定をしましょう！

ステップ2：フォーム送信されたら起動するトリガーを設定

(1)先程ご紹介した、テンプレートを使用していきます。下のバナーの「試してみる」をクリックします。

アプリトリガーの「フォームが送信されたら」をクリックします。

(2)Webflowの「連携アカウントとアクションを選択」画面から、Webflowと連携するアカウント情報に誤りがないかを確認し、トリガーアクションは「フォームが送信されたら」のままで「次へ」をクリックします。

(3)「アプリトリガーのAPI接続設定」画面から、サイトIDを候補から選択し、「テスト」をクリックします。エラーが発生しなければ、「次へ」をクリックします。
フォームの回答内容を取得する方法は下記のサイトをご参照ください。

「取得した値：アウトプット」を追加する方法

(4)以下の画像に移ったら、「テスト」をクリックし、エラーが発生しなければ、下部にある「保存する」をクリックします。

ステップ3:kintoneのデータベースの操作

(1)次に、kintoneのデータベースを操作します。
「レコードを追加する」をクリックします。

(2)kintoneの「データベースの連携」画面から、kintoneと連携するアカウント情報に誤りがないかを確認し、実行アクションは「レコードを追加する」のままにします。
アプリIDは候補から選択してください。
入力が完了したら、「次へ」をクリックします。

(3)「データベース操作の詳細設定」画面から、各項目のレコードの値をアウトプットから選択していきます。

入力が完了したら、下部にある、「テスト」をクリックし、エラーが発生しなければ、「保存する」をクリックします。
(4)最後に、「トリガーをON」をクリックします。

これで、「Webflowのフォームが送信されたらkintoneに追加する」フローボットの完成です。

Webflowとkintoneを使ったその他の自動化例

Yoomでは他にもWebflowとkintoneを使った自動化の例がたくさんありますので、いくつかご紹介します。

1.Webflowで注文が発生したらkintoneに追加する

Webflowで注文が入ると自動で注文情報がkintoneに反映されます。このフローを使うことで、kintoneへの入力を減らすことが期待できます。Webflowの注文情報を手動でkintoneに追加している方に役立つでしょう。

2.kintoneでコメントが投稿されたらMicrosoft Teamsに通知する

kintoneとMicrosoft Teamsを連携することで、kintoneにコメントが投稿された際、自動でMicrosoft Teamsに内容が通知されます。kintoneのコメントをスピーディーに把握したい方におすすめです。

3.kintoneに情報が登録されたら、Googleカレンダーに予定を作成する

kintoneとGoogleカレンダーを連携することで、kintoneの情報を登録すると、自動でGoogleカレンダーに予定を作成できます。このフローはスケジュールの登録漏れを防止することが期待できます。効率的にスケジュール管理されたい方におすすめです。

さらに、Webflowとkintoneを使ったテンプレートを確認したい方は、以下のサイトをご覧ください。

Webflowを使用したフローボットテンプレート一覧

kintoneを使用したフローボットテンプレート一覧

まとめ

Webflowとkintoneの連携により手動作業を大幅に削減し、データ管理やワークフローの効率化を実現できそうですね！
フォームデータの自動登録によって入力ミスのリスクが減少し、業務全体の精度向上が見込めます。
また、データの一元管理によりチーム全体での情報共有がスムーズになり、作業の見落としも防止されるでしょう。
興味のある方は、ぜひ今回の記事を参考に試してみてくださいね！