WebflowとNotionを連携してWebflowのフォームが送信されたらNotionに追加する方法
WebflowとNotionを連携してWebflowのフォームが送信されたらNotionに追加する方法
Yoomを詳しくみる
WebflowとNotionを連携してWebflowのフォームが送信されたらNotionに追加する方法
アプリ同士の連携方法

2025-03-26

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

Tomomi Aizawa
Tomomi Aizawa

WebflowとNotionを連携することで業務の効率化が進むでしょう。
例えば、Webflowのフォームから得たデータを自動でNotionに追加できるため、手動入力の手間が省け、チーム全体で最新情報を共有できます。この連携によりタスク管理の簡略化や情報共有のスムーズ化も実現し、作業効率向上が期待できます。
手動作業を削減し、より重要な業務に集中できる環境を整えたい方に役立つでしょう。

この記事では、この連携で得られるメリットと連携方法を画像を含めて紹介します。

とにかく早く試したい方へ

YoomにはWebflowとNotionを連携するためのテンプレートが用意されています。

今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう!


Webflowのフォームが送信されたらNotionに追加するフローです。

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

メリット1: 入力作業を削減

WebflowとNotionを連携することで、手動での入力作業が削減されることが期待できます。
Webflowで受け取ったフォームデータを自動的にNotionに反映させることで、二重入力やヒューマンエラーのリスクを減らし、正確なデータ管理が可能となるでしょう。これにより時間を効率的に使い、より重要なタスクに集中することができるでしょう。
特に、データ入力に多くの時間を費やしている事務員の方におすすめです。

メリット2: タスク管理の効率化

WebflowとNotionを連携させることで、Webflow上で得たデータに基づき自動的にタスクを生成することができます。たとえば、フォームの送信内容に応じてNotion内でプロジェクトやタスクが自動作成され、追跡しやすくなります。これにより、担当者が見逃すことなく業務の進行を管理できるため、作業の効率化につながります。特に、プロジェクト管理を効率化したいチームや、複数のタスクを同時に管理する必要があるプロジェクトマネージャーにとって有益となるでしょう。

WebflowとNotionを連携してできること

WebflowとNotionのAPIを連携すれば、WebflowのデータをNotionに自動的に連携することが可能です。
たとえば、下記のようなデータ連携を自動的に実施することもできちゃいます!

Webflowのフォームが送信されたらNotionに追加する

Webflowから送信されたフォーム内容をNotionに自動で追加することが可能です。
Webflowへのログインの手間を省きつつ、転記作業も不要となるため業務の効率化を図ることができます。


Webflowのフォームが送信されたらNotionに追加するフローです。

Webflowでコレクションのアイテムが作成されたらNotionに追加する

Webflowでコレクションのアイテムが作成されると、Notionにも自動で反映させることができるフローです。
例えば、マーケティング部がWebflowでキャンペーンページを作成し、アイテムを追加するとその情報がNotionの「プロジェクト管理」ページに反映されます。
その結果、営業部などは最新のキャンペーン情報をNotionを通してスピーディーに確認できるため、素早いクライアント対応も可能になります。


Webflowでコレクションのアイテムが作成されたらNotionに追加するフローです。

Webflowで注文が発生したらNotionに追加する

Webflowで注文が発生したらNotionにも自動的に追加されます。
Notionでデータの一元管理や数値分析を実施している場合、自動化することで転記漏れや転記ミスが減るので、分析精度の向上も期待できます。


Webflowで注文が発生したらNotionに追加するフローです。

Webflowのフォーム情報をNotionに自動連携するフローを作ってみよう

それではここから代表的な例として「Webflowのフォームが送信されたらNotionに追加する」フローを解説していきます!

今回はYoomを使用してノーコードで設定をしていくので、もしまだYoomのアカウントをお持ちでない場合は、無料登録フォームからアカウントを発行しておきましょう。

Yoomの基本的な操作は初めてのYoomをご確認ください。

※今回連携するアプリの公式サイト:WebflowNotion

[Yoomとは]

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

それでは、実際にテンプレートを使用して「Webflowのフォームが送信されたらNotionに追加する」フローを一緒に作っていきましょう!
連携フローは大きく分けて以下のプロセスで作成を進めます。

  • WebflowとNotionをマイアプリ登録
  • テンプレートをコピー
  • フローの起点となるWebflowのトリガー設定とNotionのオペレーション設定
  • トリガーボタンをONにしてWebflowとNotionの連携動作を確認

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


Webflowのフォームが送信されたらNotionに追加するフローです。

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

ステップ1:WebflowとNotionをマイアプリ連携

ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
まずは基本的な設定方法を解説しているナビをご覧ください!

この後、今回のフローで使用するアプリのマイアプリ登録方法を解説します。

Webflowのマイアプリ登録

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

(2)マイアプリの新規接続一覧の中から、Webflowをクリックします。
(3)赤枠部分を確認しながら「Webflowの新規登録」画面から「アカウント名、アクセストークン」を入力して「追加」をクリックしたら完了です!

Notionのマイアプリ登録

Notionの連携方法は、以下の手順をご参照ください。

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

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

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


Webflowのフォームが送信されたらNotionに追加するフローです。

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

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

(3)「アプリトリガーのAPI接続設定」画面から、サイトIDを候補から選択し、「テスト」をクリックします。
エラーが発生せずにテストに成功したら、フォームの回答内容を取得します。
詳しくは「取得した値:アウトプット」を追加する方法をご確認ください!
フォームの回答内容を取得できたら「次へ」をクリックします。

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