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

Webサイトに設置したフォームは、問い合わせやリード情報など様々な情報収集に便利です。フォームから得た情報を有効活用するため、データベースに転記している場合が多いでしょう。

しかし、取得する情報量が多いほど、転記には長い作業時間がかかってしまいます。
この作業を自動化できれば、業務を効率化できるのではないでしょうか？

そんな時はWebflowとAirtableの連携することで、フォームの回答を自動で同期することができますよ！
転記の手間を省き、一貫した問い合わせやリードの情報を基に、スムーズに業務を進めましょう。

この記事では、連携のメリットと、Webflowのフォーム回答をAirtableに自動追加する方法について詳しく解説します。

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

YoomにはWebflowとAirtableを連携するためのテンプレートが用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう！

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

試してみる

---

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

詳細を見る 試してみる

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

メリット1: 作業効率の向上とデータの一貫性

連携によって、Webflowのフォームの回答が送信された際に、Airtableにデータが自動的に追加されます。
手動での入力が不要になるため、フォーム情報の管理にかかる作業時間が短縮され、担当者は他の重要な業務に集中できます。
また、手動入力によるエラーやデータの不整合が起こるリスクが減少するため、情報が一貫して正確に管理されます。

例えば、カスタマーサポートチームはこまめにメールやWebflowのダッシュボードを確認しなくても、Airtable上で問い合わせ内容をチェックすることができます。
転記を行っていた時間を問い合わせ対応に充てられるため、回答までの時間の短縮や対応可能な件数の増加が見込めます。

メリット2: 情報共有の迅速化

自動化により、Webflowのフォーム回答が送信された後、速やかにAirtableにデータが追加されます。
これにより、最新の情報に基づいた情報分析やフォローアップを行うことが可能です。

例えば、営業チームは、Airtableに同期されたリード情報を基に、見込み顧客に対するアプローチをすぐ開始できます。自社の商品やサービスへの興味が深まっている内に適切なフォローアップを行えれば、顧客化できる可能性の高まりが期待できます。

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

WebflowとAirtableのAPIを連携させることで、サイトの更新やデータ管理を自動化できます。
これまで手動で行っていたコンテンツの登録や修正作業を効率化し、データの整合性を保ちながら運用のスピードを高めることが可能です。

 ここでは、具体的な自動化の活用例をいくつかご紹介します。アカウント登録（30秒で完了）後、「試してみる」ボタンをクリックするだけでテンプレートをすぐに体験できるので、気になる内容があればぜひお試しください。

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

Webflowでフォームが送信されたタイミングで、その内容を自動で取得し、Airtableにレコードとして追加するフローです。
この仕組みにより、フォーム入力内容を自動でデータベースに反映でき、顧客情報や問い合わせ内容の管理を効率化できます。
手動でのデータ転記が不要になるため、作業ミスを防ぎながら運用負担を減らすことが可能です。

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

試してみる

---

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

詳細を見る 試してみる

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

Webflowで新しいコレクションアイテムが作成されたタイミングで、その情報を自動で取得し、Airtableにレコードとして追加するフローです。
この仕組みにより、Webサイト上の更新内容を自動でデータベースに反映でき、コンテンツや商品情報の管理をスムーズに行えます。
手動でのデータ登録作業が不要になるため、更新漏れや入力ミスを防ぎ、運用の効率を高められます。

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

試してみる

---

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

詳細を見る 試してみる

WebflowとAirtableの連携フローを作ってみよう

それでは、WebflowとAirtableの連携と業務フローの自動化設定を行ってみましょう。
テンプレートを使って、「Webflowのフォームが送信されたらAirtableに追加する」業務フローの作成手順を紹介します。

今回はYoomというノーコード連携ツールを使用して、プログラミング不要で誰でも簡単に設定を進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。

※今回連携するアプリの公式サイト：Webflow／Airtable

[Yoomとは]

はじめる前に

1. Webflowの回答用のフォームと、Airtableの回答内容を送信するデータベースを、それぞれ作成しておいてください。
2. Yoomにログインしてください。

ステップ1: WebflowとAirtableのマイアプリ連携

※アプリ連携がお済みの場合は、ステップ2へ進んでください。

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

Webflowのマイアプリ登録

アプリ一覧の検索窓から、Webflowを検索し、クリックします。

「アカウント名」と「アクセストークン」を設定します。
「アカウント名」は、任意で管理用名称を設定してください。

「アクセストークン」は、Webflowにログインして取得します。
Webflowにログインし、Site Settings から「Apps & Integrations」 を選択してください。

 API accessで「Generate API token」をクリックし、APIキーを発行しましょう。

名前は任意で設定可能です。
また、「CMS」「Forms」「Sites」の「Read and Write」権限を設定してください。

設定が完了したら「Generate token」で発行します。

発行されたAPIキーをコピーしましょう。

Yoomに戻り、コピーしたAPIキーを「アクセストークン」に貼り付けてください。
最後に「追加」をクリックします。

これでWebflowのマイアプリ登録が完了です。

Airtableのマイアプリ登録

以下をご確認ください。

ここまで終わったらマイアプリ登録は完了です。

ステップ2:テンプレートをコピー

次は、マイプロジェクトにテンプレートコピーして、フローボットを作成していきます。
コピーがまだの場合は、フローボットテンプレートを下記よりコピーしてください。

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

試してみる

---

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

詳細を見る 試してみる

‍ステップ3: Webflowのトリガーの設定

1. コピーしたテンプレートを開きます。
※下図の赤枠部分から、任意のタイトルに変更できます。

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

3. 連携アカウントとアクションを選択します。
必要に応じてタイトルを変更し、「次へ」をクリックします。

4. アプリトリガーのAPI接続設定を行います。
サイトIDを候補から選んでください。

5. テストが成功したら、「次へ」をクリックします。

6. テスト値を入力してフォームを送信し、「テスト」をクリックします。

7. テストが成功したら、こちらの記事を参考にAirtableに同期したい取得した値を追加してください。
※取得した値とは？

トリガーやオペレーション設定時に、「テスト」を実行して取得した値のことを指します。
後続のオペレーション設定時の値として利用でき、フローボットを起動する度に変動した値となります。

8. 「保存する」をクリックしてください。

ステップ4: Airtableのレコードを作成するアクションの設定

1. フローボットの「アプリと連携する：レコードを作成」をクリックします。

2. 連携アカウントとアクションを選択します。
必要に応じてタイトルを変更し、「次へ」をクリックします。

3. API接続設定を行います。

• 「ベースID」、「テーブルIDまたは名前」：欄下部の注記を参考に入力してください。

  ※下図は、AirtableのURLの参照位置の一例です。

• フィールド情報「フィールド名」：情報を同期する列のタイトルを入力してください。
• フィールド情報「値」：フィールド名に対応するフォーム回答のアウトプットを参照してください。

※複数の情報を同期する場合、：「+ フィールド情報を追加」をクリックして項目を追加してください。
※下図は一例です。

 ※下図はアウトプット(取得した値)の参照例です。

4. テストが成功したら、「保存する」をクリックしてください。
最後に、保存したフローのトリガーを「ON」に切り替えると起動します。

以上で、「Webflowのフォームが送信されたらAirtableに追加する」フローの完成です。

WebflowやAirtableを使ったその他の自動化例

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

Webflowの自動化例

フォーム送信やコレクションの更新をトリガーに、Airtableやスプレッドシートへデータを自動で登録したり、チャットツールに通知を送ることが可能です。
手動での更新作業を減らし、正確でスピーディーなWeb運用を実現できます。

Chargebeeで顧客が作成されたら、Intercomでコンタクトを作成する

試してみる

---

■概要
Chargebeeで新しい顧客が作成されるたびに、手動でIntercomへコンタクト情報を転記する作業は手間がかかるだけでなく、入力ミスも起こりがちです。このワークフローを活用すれば、ChargebeeとIntercomをスムーズに連携させ、顧客作成からコンタクト登録までを自動化できるため、こうした定型業務の負担を解消し、より重要な業務に集中できる環境を構築できます。

■このテンプレートをおすすめする方
・ChargebeeとIntercomの両方を利用し、顧客情報の手入力に課題を感じている方
・サブスクリプション管理と顧客対応の連携を効率化したいと考えている担当者の方
・顧客オンボーディングのプロセスを自動化し、迅速化したいと考えているチームの方

■注意事項
・Chargebee、IntercomのそれぞれとYoomを連携してください。
・Webflowの内容を取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443

詳細を見る 試してみる

Brevoでコンタクトが作成されたら、Webflowにアイテムを追加する

試してみる

---

■概要
Brevoで管理しているコンタクト情報を、Webflowで作成したWebサイトのCMSに手作業で登録する業務に手間を感じていませんか？この繰り返し作業は時間がかかるだけでなく、コピー＆ペーストによる入力ミスも起こりがちです。
このワークフローは、そうした課題を解決するために設計されており、Brevoで新しいコンタクトが作成されると、その情報を自動でWebflowのコレクションにアイテムとして追加します。BrevoとWebflow間のデータ連携を自動化し、手作業の手間を省きます。

■このテンプレートをおすすめする方
・Brevoで獲得したコンタクトをWebflowサイトに手動で反映させているウェブ担当者の方
・BrevoとWebflow間の連携作業を自動化し、入力ミスをなくしたいマーケティングチームの方
・ノーコードでBrevoとWebflowを連携させ、業務の効率化を目指すビジネスパーソンの方

■注意事項
・Brevo、WebflowのそれぞれとYoomを連携してください。
・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
・プランによって最短の起動間隔が異なりますので、ご注意ください。

詳細を見る 試してみる

フォームが送信されたら、OpenAIで内容を要約してWebflowにアイテムを追加する

試してみる

---

■概要
Webサイトのフォームから届くお問い合わせや資料請求。その内容を確認し、手作業で管理ツールに入力するのは手間がかかる作業ではないでしょうか。このワークフローは、フォームが送信されたタイミングで、その内容をOpenAIが自動で要約し、WebflowのCMSにアイテムとして追加します。WebflowとOpenAIを連携させることで、こうした定型業務を自動化し、入力の手間や転記ミスをなくし、本来注力すべき業務に集中できる環境を整えます。

■このテンプレートをおすすめする方
・Webflowで構築したサイトのフォーム運用を、より効率化したいと考えているWeb担当者の方
・WebflowとOpenAIを連携させ、手作業でのテキスト要約やデータ入力を自動化したい方
・ノーコードでフォームからのリード情報をスムーズにWebflowのCMSで管理したいと考えている方

■注意事項
・OpenAI、WebflowのそれぞれとYoomを連携してください。
・ChatGPT（OpenAI）のアクションを実行するには、OpenAIのAPI有料プランの契約が必要です。（APIが使用されたときに支払いができる状態）
https://openai.com/ja-JP/api/pricing/
・ChatGPTのAPI利用はOpenAI社が有料で提供しており、API疎通時のトークンにより従量課金される仕組みとなっています。そのため、API使用時にお支払いが行える状況でない場合エラーが発生しますのでご注意ください。

詳細を見る 試してみる

Webflowのフォームが送信されたらHubSpotにチケットを作成する

試してみる

---

Webflowのフォームが送信されたらHubSpotにチケットを作成するフローです。

詳細を見る 試してみる

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

試してみる

---

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

詳細を見る 試してみる

Webflowでフォームが送信されたら、OpenAIで内容を要約してメールで通知する

試してみる

---

■概要
Webflowで構築したサイトのフォームから届く長文のお問い合わせについて、内容を把握するために都度全文を確認する作業に手間を感じていませんか。このワークフローは、Webflowのフォームが送信されると、その内容をOpenAIが自動で要約し、指定のメールアドレスへ通知するものです。WebflowとOpenAIを連携させることで、問い合わせ内容の迅速な把握と、スピーディーな一次対応の実現を支援します。

■このテンプレートをおすすめする方
・Webflowで作成したフォームからの問い合わせ対応に時間がかかっているWebサイト担当者の方
・WebflowとOpenAIを連携させ、問い合わせ対応の初動を早めたいと考えている方
・フォームから送られる内容の確認と担当者への共有を手作業で行っているチームのリーダーの方

■注意事項
・Webflow、OpenAIのそれぞれとYoomを連携してください。
・Webflowから送信されたフォームの内容を取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443
・ChatGPT（OpenAI）のアクションを実行するには、OpenAIのAPI有料プランの契約が必要です。（APIが使用されたときに支払いができる状態）
https://openai.com/ja-JP/api/pricing/
・ChatGPTのAPI利用はOpenAI社が有料で提供しており、API疎通時のトークンにより従量課金される仕組みとなっています。そのため、API使用時にお支払いが行える状況でない場合エラーが発生しますのでご注意ください。

詳細を見る 試してみる

Webflowでフォームが送信されたら、テキストを抽出しBrevoでキャンペーンレポートを作成する

試してみる

---

■概要
Webflowのフォームから得た情報を、手作業でBrevoのキャンペーンに反映させる作業に時間を取られていませんか。このプロセスは手間がかかるだけでなく、転記ミスなどのヒューマンエラーを引き起こす可能性もあります。このワークフローを活用すれば、WebflowとBrevoの連携を自動化し、フォーム送信内容からテキストを抽出してキャンペーンレポートを自動で作成できるため、手作業をなくし、正確で迅速なマーケティング活動を支援します。

■このテンプレートをおすすめする方
・Webflowで収集した情報を基に、Brevoでマーケティング活動を行っている担当者の方
・WebflowとBrevo間の手作業によるデータ連携に、非効率さやミスを感じている方
・brevoとwebflowを活用したマーケティング施策の自動化に関心のある方

■注意事項
・Webflow、BrevoのそれぞれとYoomを連携してください。
・WebflowのDescriptionを取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443

詳細を見る 試してみる

Webflowでフォームが送信されたら、テキストを抽出しPipedriveの組織にノートを追加する

試してみる

---

■概要
Webflowで構築したサイトのフォームから得たリード情報を、顧客管理のためにPipedriveへ手作業で転記していませんか？この作業は手間がかかるだけでなく、コピー＆ペーストのミスで重要な顧客情報を誤って登録するリスクも伴います。このワークフローは、WebflowとPipedriveを連携させ、フォームが送信されるとPipedriveの組織情報に自動でノートを追加します。手入力の手間を削減し、迅速で正確な顧客アプローチを実現します。

■このテンプレートをおすすめする方
・Webflowで獲得したリードをPipedriveで管理し、営業活動を行っている方
・WebflowとPipedrive間の手動でのデータ入力をなくし、業務を効率化したいと考えている方
・フォームからの問い合わせに素早く対応し、営業機会の損失を防ぎたいマーケティング・営業担当者の方

■注意事項
・Webflow、PipedriveのそれぞれとYoomを連携してください。
・Webflowで送信されたフォーム内容を取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443

詳細を見る 試してみる

Webflowで注文が発生したらGoogleスプレッドシートに追加する

試してみる

---

Webflowで注文が発生したらGoogleスプレッドシートに追加するフローです。

詳細を見る 試してみる

メールが届いたらテキストを抽出し、OpenAIで内容を要約してWebflowにアイテムを追加する

試してみる

---

■概要
Webサイトのコンテンツ更新などで、メールで受け取った情報をWebflowに登録する作業は、定期的でありながら手間がかかる業務ではないでしょうか。特にOpenAIを活用して内容を要約する場合でも、手作業での転記はミスの原因にもなり得ます。このワークフローは、メール受信を起点にテキストを自動抽出し、OpenAIによる要約を経てWebflowへアイテムを自動で追加するため、このような手作業をなくし、コンテンツ制作の効率を高めます。

■このテンプレートをおすすめする方
・WebflowとOpenAIを連携させて、コンテンツ投稿の自動化に関心があるWeb担当者の方
・メールで受け取ったプレスリリースや記事ネタなどを、手作業でWebflowに転記している方
・生成AIを活用してWebサイトの運用を効率化したいと考えているマーケティング担当者の方

■注意事項
・OpenAI、WebflowのそれぞれとYoomを連携してください。
・ChatGPT（OpenAI）のアクションを実行するには、OpenAIのAPI有料プランの契約が必要です。（APIが使用されたときに支払いができる状態）
https://openai.com/ja-JP/api/pricing/
・ChatGPTのAPI利用はOpenAI社が有料で提供しており、API疎通時のトークンにより従量課金される仕組みとなっています。そのため、API使用時にお支払いが行える状況でない場合エラーが発生しますのでご注意ください。

詳細を見る 試してみる

新しいレコードの追加や更新をトリガーに、他のツールへ自動で情報を送信したり、通知を行うことができます。
たとえば、顧客データをもとにメールを自動配信したり、在庫情報をスプレッドシートやWebflowと同期させることも可能です。

手動でのデータ入力や転記を減らすことで、チームの作業効率とデータ管理の精度を高められます。

Airtableに情報が登録されたらSlackに通知する

試してみる

---

■概要
Airtableに情報が登録されたらSlackに通知するフローです。

■このテンプレートをおすすめする方
1.Airtableにおけるデータ入力を担当している方
・社内情報の蓄積でAirtableを活用している方
・入力データの分析や管理を行う方
‍
2.Slackで社内のメンバーとコミュニケーションを取る方
・社内通知を手動で行っている方
・Slackへの通知を自動化したい方

■注意事項
・AirtableとSlackのそれぞれとYoomを連携してください。
・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
・プランによって最短の起動間隔が異なりますので、ご注意ください。
・AirtableのアウトプットはJSONPathから取得可能です。取得方法は下記をご参照ください。
　https://intercom.help/yoom/ja/articles/9103858

詳細を見る 試してみる

AirtableからDocuSignで契約書を送信する

試してみる

---

DB系ツールからDocuSignで契約書を送信するフローです。

詳細を見る 試してみる

Airtableでステータスが更新されたらfreee請求書で請求書を作成する

試してみる

---

Airtableでステータスが更新されたらfreee請求書で請求書を作成するフローです。

詳細を見る 試してみる

Airtableでステータスが更新されたら、Notionにデータを追加する

試してみる

---

■概要
「Airtableでステータスが更新されたら、Notionにデータを追加する」ワークフローは、情報管理の効率化につながります。
Notionに直接アクセスすることなく、Airtable上のデータが反映されるため、作業の手間が削減されます。

■このテンプレートをおすすめする方
・Airtableを活用してデータ管理やプロジェクト運営を行っている方
・AirtableのデータをNotionに迅速に反映させたい方
・データの手動入力を減らし、業務効率を向上させたいと考えている方
・Notionを活用してチームで情報共有を行っている方
・Notionを日常的に使っていて、Airtableの最新データをスピーディに把握したい方
・プロジェクトマネージャーとしてチームメンバーに最新のデータを迅速に提供したい方

■注意事項
・AirtableとNotionのそれぞれとYoomを連携してください。
・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
・プランによって最短の起動間隔が異なりますので、ご注意ください。

詳細を見る 試してみる

Airtableで従業員情報が登録されたらカオナビにも登録する

試してみる

---

Airtableで従業員情報が登録されたらカオナビにも登録する

詳細を見る 試してみる

Airtableの商品情報をBASEに追加する

試してみる

---

Airtableの商品情報をBASEに追加するフローです。

詳細を見る 試してみる

Gmailで受信したお問い合わせ内容をAirtableに登録する

試してみる

---

Gmailで受信したお問い合わせ内容をAirtableに登録するフローです。

詳細を見る 試してみる

Google ビジネス プロフィールで口コミが投稿されたらAirtableに追加する

試してみる

---

Google ビジネス プロフィールで口コミが投稿されたらAirtableに追加するフローです。

詳細を見る 試してみる

SmartHRで従業員情報が更新されたらAirtableの従業員管理台帳を更新する

試してみる

---

SmartHRで従業員情報が更新されたらAirtableの従業員管理台帳を更新するフローです。

詳細を見る 試してみる

クラウドサインで契約が完了したらAirtableの情報を更新する

試してみる

---

クラウドサインで契約が完了したらAirtableの情報を更新するフローです。

詳細を見る 試してみる

Webflowのフォーム回答をAirtableに自動追加する方法についてお伝えしました。

2つのアプリの連携によってフォームの情報を自動的に同期することで、転記作業の手間を省き、データの一貫性を保つことができます。

正確な情報が速やかに共有されるため、データ分析やフォローアップもスムーズに行えるでしょう。
Yoomを利用すれば簡単に連携設定ができます。もし連携業務の自動化に少しでも興味を持っていただけたなら、ぜひこちらの登録フォームから無料登録して、Yoomがもたらす業務効率化を体験してみてください！

よくあるご質問

Q：フォーム送信でAirtableの既存レコードを更新できますか？

A：

はい、できます。
今回は新規レコードの「追加」ですが、「レコードを更新」を選択いただくことで更新可能ですので、お試しください。