Webflowでフォームが送信されたら、HubSpotでコンタクトを作成する
試してみる
■概要
Webflowのフォームから問い合わせや資料請求があった際、その情報をHubSpotに手作業で登録していませんか?この定型業務は入力漏れや対応の遅延に繋がるだけでなく、本来注力すべきコア業務を圧迫する一因にもなります。このワークフローを活用すればWebflowでフォームが送信されたら自動でHubSpotにコンタクトを作成することが可能になり、手作業によるデータ転記の手間を解消できます。
■このテンプレートをおすすめする方
・Webflowのフォーム情報をHubSpotへ手入力しており、作業を効率化したい方
・フォームからのリード情報を迅速にHubSpotへ反映させたいマーケティング担当者の方
・データの転記ミスを防ぎ、顧客情報管理の精度を高めたいと考えている方
■注意事項
・Webflow、HubSpotのそれぞれとYoomを連携してください。
・Webflowの内容を取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443
Webflowで作成したサイトのフォームから問い合わせや申し込みが入るたびに、その内容を確認して手作業で顧客管理システムに情報を転記したり、関係者にチャットで通知したりといった対応に追われていませんか?
これらの定型的ながらも重要な作業は、時間がかかるだけでなく、入力ミスなどのヒューマンエラーを引き起こす原因にもなりがちです。
もし、Webflowのフォーム送信をきっかけに、HubSpotなどのCRMツールへのコンタクト情報登録や、Discordといったチャットツールへの通知、さらにはZoomミーティングの設定までを自動化できる仕組みがあれば、こうした日々の煩わしい作業から解放されます。より戦略的なマーケティング活動や顧客対応といったコア業務に集中するための貴重な時間を確保できます。
今回ご紹介する自動化の設定は、プログラミングの知識がなくても簡単に設定可能です。
ぜひこの機会に導入して、Webサイト運用に関わる業務をさらに効率化しましょう!
とにかく早く試したい方へ
YoomにはWebflowと様々なアプリを連携して業務を自動化する様々な方法が用意されています。「まずは試してみたい!」という方は、以下のバナーをクリックして、テンプレートを体験してみましょう!
Webflowでフォームが送信されたら、HubSpotでコンタクトを作成する
試してみる
■概要
Webflowのフォームから問い合わせや資料請求があった際、その情報をHubSpotに手作業で登録していませんか?この定型業務は入力漏れや対応の遅延に繋がるだけでなく、本来注力すべきコア業務を圧迫する一因にもなります。このワークフローを活用すればWebflowでフォームが送信されたら自動でHubSpotにコンタクトを作成することが可能になり、手作業によるデータ転記の手間を解消できます。
■このテンプレートをおすすめする方
・Webflowのフォーム情報をHubSpotへ手入力しており、作業を効率化したい方
・フォームからのリード情報を迅速にHubSpotへ反映させたいマーケティング担当者の方
・データの転記ミスを防ぎ、顧客情報管理の精度を高めたいと考えている方
■注意事項
・Webflow、HubSpotのそれぞれとYoomを連携してください。
・Webflowの内容を取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443
Webflowと他アプリを連携して業務を自動化する方法
Webflowのフォームが送信された際に、様々なアプリケーションと連携して後続の業務を自動化する方法を、具体的なテンプレートを交えてご紹介します。
Webサイトからのリード獲得後のアクションを効率化し、対応スピードを向上させることが可能です。
気になる内容があれば、ぜひクリックしてみてください!
データベース/CRMサービスにデータを自動登録する
Webflowのフォームから送信された情報を、HubSpotなどのCRMサービスにコンタクト情報として自動で登録することができます。手作業によるデータ入力の手間をなくし、入力ミスを防ぎながらリード情報を一元管理できるので、営業活動へのスムーズな連携が実現します。
Webflowでフォームが送信されたら、HubSpotでコンタクトを作成する
試してみる
■概要
Webflowのフォームから問い合わせや資料請求があった際、その情報をHubSpotに手作業で登録していませんか?この定型業務は入力漏れや対応の遅延に繋がるだけでなく、本来注力すべきコア業務を圧迫する一因にもなります。このワークフローを活用すればWebflowでフォームが送信されたら自動でHubSpotにコンタクトを作成することが可能になり、手作業によるデータ転記の手間を解消できます。
■このテンプレートをおすすめする方
・Webflowのフォーム情報をHubSpotへ手入力しており、作業を効率化したい方
・フォームからのリード情報を迅速にHubSpotへ反映させたいマーケティング担当者の方
・データの転記ミスを防ぎ、顧客情報管理の精度を高めたいと考えている方
■注意事項
・Webflow、HubSpotのそれぞれとYoomを連携してください。
・Webflowの内容を取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443
ミーティングツールで予定を自動作成する
Webflowのフォームからデモや相談の申し込みがあった際に、Zoomミーティングを自動で作成し、参加用URLを発行することができます。日程調整の手間を削減し、リードに対して迅速なアクションを取ることが可能になります。
Webflowでフォームが送信されたら、Zoomでミーティングを作成する
試してみる
■概要
Webflowで作成したフォームから問い合わせやデモの予約が入るたびに、手動でZoomミーティングを作成していませんか?
この作業は時間がかかるだけでなく、URLの送り忘れや日時の設定ミスといったヒューマンエラーの原因にもなり得ます。
このワークフローを活用することで、Webflowのフォームが送信されたタイミングをトリガーに自動でZoomミーティングを作成しスムーズな顧客対応をサポートします。
■このテンプレートをおすすめする方
・Webflowのフォームを活用した問い合わせ対応を自動化し、業務を効率化したい方
・手動によるZoomミーティングの設定に手間を感じており、ミスを減らしたいと考えている方
・webflow automationを導入し、リードへの迅速なアプローチを実現したいマーケティング・営業担当の方
■注意事項
・Webflow、Zoom(OAtuth)のそれぞれとYoomを連携してください。
・Webflowの内容を取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443
チャットツールに自動で通知する
Webflowのフォームが送信された際に、その内容をDiscordなどのチャットツールに素早く通知する設定です。担当者がスピーディーにリードの発生を把握し、迅速な初期対応を開始できるため、顧客満足度の向上にも繋がります。
Webflowでフォームが送信されたら、Discordで通知する
試してみる
■概要
Webflowで作成したWebサイトのフォームから問い合わせがあった際、気づくのが遅れて対応が後手になってしまうことはありませんか?
手動での確認作業は手間がかかる上に、機会損失にも繋がりかねません。
このワークフローを活用すれば、Webflowのフォーム送信をトリガーに、指定のDiscordチャンネルへ即時通知を自動で送信できます。Webflowを活用した業務のオートメーションに関心のある方にとって、迅速な顧客対応を実現する第一歩となるでしょう。
■このテンプレートをおすすめする方
・Webflowで獲得したリードへの対応速度を上げたいマーケティングや営業担当者の方
・社内のコミュニケーションツールとしてDiscordを利用しており、情報集約を効率化したい方
・WebflowとDiscordの連携を検討しており、ノーコードで手軽に通知の仕組みを構築したい方
■注意事項
・Webflow、DiscordのそれぞれとYoomを連携してください。
・Webflowの内容を取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443
Webflowのフォーム送信をトリガーにHubSpotへコンタクトを自動登録するフローを作ってみよう
それではここからWebflowと様々なアプリを連携して業務を自動化する方法を紹介します。
今回はより具体的な業務例として、Webflowでフォームが送信された際に、その情報を基にHubSpotにコンタクト情報を自動で登録するフローを解説していきます!
ここではYoomを使用してノーコードで設定をしていくので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
※今回連携するアプリの公式サイト:Webflow/HubSpot
[Yoomとは]
フローの作成方法
今回は大きく分けて以下のプロセスで作成します。
- WebflowとHubSpotのマイアプリ連携
- テンプレートをコピー
- Webflowのトリガー設定とHubSpotのアクション設定
- トリガーをONにし、フローが起動するかを確認
Webflowでフォームが送信されたら、HubSpotでコンタクトを作成する
試してみる
■概要
Webflowのフォームから問い合わせや資料請求があった際、その情報をHubSpotに手作業で登録していませんか?この定型業務は入力漏れや対応の遅延に繋がるだけでなく、本来注力すべきコア業務を圧迫する一因にもなります。このワークフローを活用すればWebflowでフォームが送信されたら自動でHubSpotにコンタクトを作成することが可能になり、手作業によるデータ転記の手間を解消できます。
■このテンプレートをおすすめする方
・Webflowのフォーム情報をHubSpotへ手入力しており、作業を効率化したい方
・フォームからのリード情報を迅速にHubSpotへ反映させたいマーケティング担当者の方
・データの転記ミスを防ぎ、顧客情報管理の精度を高めたいと考えている方
■注意事項
・Webflow、HubSpotのそれぞれとYoomを連携してください。
・Webflowの内容を取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443
ステップ1:WebflowとHubSpotをマイアプリ連携
ここでは、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のマイアプリ登録が完了です。
HubSpotのマイアプリ連携
以下の手順をご参照ください。
ステップ2:テンプレートをコピーする
続いてYoomのテンプレートをコピーします。
テンプレートは自動化の大枠があらかじめ作成されており、それに沿って設定するだけでフローが完成するため、初心者の方にもおすすめです!
以下バナーの「試してみる」をクリックしましょう。
Webflowでフォームが送信されたら、HubSpotでコンタクトを作成する
試してみる
■概要
Webflowのフォームから問い合わせや資料請求があった際、その情報をHubSpotに手作業で登録していませんか?この定型業務は入力漏れや対応の遅延に繋がるだけでなく、本来注力すべきコア業務を圧迫する一因にもなります。このワークフローを活用すればWebflowでフォームが送信されたら自動でHubSpotにコンタクトを作成することが可能になり、手作業によるデータ転記の手間を解消できます。
■このテンプレートをおすすめする方
・Webflowのフォーム情報をHubSpotへ手入力しており、作業を効率化したい方
・フォームからのリード情報を迅速にHubSpotへ反映させたいマーケティング担当者の方
・データの転記ミスを防ぎ、顧客情報管理の精度を高めたいと考えている方
■注意事項
・Webflow、HubSpotのそれぞれとYoomを連携してください。
・Webflowの内容を取得する方法は下記を参照ください。
https://intercom.help/yoom/ja/articles/5404443
以下の画像のような画面が表示されたらテンプレートのコピーは完了です。

ステップ3:Webflowのトリガー設定
ここからはフローボットの設定を進めていきます。
Yoomのフローボットを動かす引き金となるアクションのことを「アプリトリガー」と呼びます。まずはこのトリガーの設定を行いましょう。
「フォームが送信されたら」をクリックしてください。

クリックすると以下の画面に切り替わります。
Webflowと連携するアカウントに間違いがないかを確認し、「次へ」をクリックしましょう。

アプリトリガーのAPI接続設定を行います。
「サイトID」は、入力欄をクリックして表示される候補から選択してください。候補は、連携しているアカウントに紐づいて表示されます。
ここまで設定が完了したら連携テストを行います。テストボタンをクリックしましょう。

テストに成功したら「次へ」をクリックしてください。

次のページに進んだらWebflowへ移動し、トリガーとなるイベント(フォームを受信)を実行してみましょう。
テスト送信するフォームの内容は、架空の情報(「山田テスト」や「テスト株式会社」など)でOKです。

送信が完了したらYoomに戻り、再びテストを実行しましょう。

テストが成功するとテスト成功画面と取得した値が表示され、Webflowのデータが確認できます。
「保存する」をクリックして完了です!
なお、ここで表示されている取得した値をそのままHubSpotへ自動登録可能です。
詳しく知りたい方は以下のリンク先をご覧ください。

また、Webflowをトリガーに設定した場合、テストが成功してもHubSpotへ連携したいデータが表示されない場合があります。
その場合は「+取得する値を追加」をクリックして情報を取得しましょう。
詳しい取得方法については、こちらの記事をご確認ください。

HubSpotへ連携したいデータの設定が完了したら「保存する」をクリックし、次へ進みます。

ステップ4:HubSpotのアクション設定
取得した情報を基に、HubSpotにコンタクトを自動作成する設定をしていきます。
「コンタクトの作成」を、クリックしてください。

クリックすると以下の画面に切り替わります。
HubSpotと連携するアカウントに間違いがないかを確認し、「次へ」をクリックしましょう。

作成するコンタクトの情報を設定していきます。
「会社名」は、取得した値を活用し設定しましょう。
取得した値を活用することで、固定値ではなく、トリガーが実行されるたびに最新の情報が反映されます。

その他の項目も、取得した値を活用し設定してください。
特に設定がいらない場合は、空白でも大丈夫です。

全ての設定が完了したら「テスト」を行いましょう。

テストに成功すると、以下の画面が表示されます。

また実際に、コンタクトが作成されるのでHubSpotを確認してみましょう。

確認できたら、Yoomに戻り「保存する」を押してください。

ステップ5:トリガーをONにして起動準備完了
これですべての設定が完了です。
設定が完了すると以下のようなメニューが表示されるので、トリガーをONにします。
作成したフローボットが正常に動作するか確認しておきましょう!お疲れさまでした。

Webflowを使った自動化例
Webflowの自動化を導入することで、フォーム送信や注文情報の管理、通知業務を効率化できます。
例えば、Webflowのフォーム送信内容を他ツールに連携したり、注文情報を他システムに登録することで、管理業務をスムーズに進められます。
顧客対応や社内連絡も効率化できるため、ECサイト運営者や営業担当者に特に有効です!
Googleフォームの回答内容でWebflowのコレクションにアイテムを追加する
試してみる
■概要
「Googleフォームの回答内容でWebflowのコレクションにアイテムを追加する」ワークフローは、Webflow formを活用して収集したデータを自動的にWebflowのコレクションに登録します。
これにより、手動でのデータ入力作業を削減し、効率的なサイト運営をサポートします。
YoomのAPI連携機能を駆使し、スムーズなデータ移行を実現します。
■このテンプレートをおすすめする方
・Googleフォームを利用して顧客やユーザーからの情報を収集しているウェブサイト運営者
・Webflowを使ってサイトを構築し、コレクションを活用してコンテンツ管理を行っているデザイナーや開発者
・手動でのデータ入力に時間を取られず、業務を自動化したいと考えているビジネスオーナー
・Yoomを活用して複数のSaaSアプリ間の連携を効率化したい方
■注意事項
・WebflowとGoogleフォームのそれぞれとYoomを連携してください。
・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
・プランによって最短の起動間隔が異なりますので、ご注意ください。
・Googleフォームでのアウトプットの取得方法は下記を参考にしてください。
https://intercom.help/yoom/ja/articles/5505530
Jotformの回答内容でWebflowのコレクションにアイテムを追加する
試してみる
■概要
「Jotformの回答内容でWebflowのコレクションにアイテムを追加する」フローは、Webflow formから収集したデータを自動的にWebflowのコレクションに登録する業務ワークフローです。
これにより、手動でのデータ入力を減らし、ウェブサイトのコンテンツ管理を効率化します。
フォームの回答が即座に反映されるため、リアルタイムな更新も可能です。
■このテンプレートをおすすめする方
・Jotformを利用して顧客からの問い合わせやフィードバックを収集している方
・Webflowを用いてウェブサイトを運営し、コンテンツをダイナミックに管理したい方
・手動でのデータ入力に時間を取られ、業務の自動化を検討中のウェブ担当者
・フォームデータを迅速にウェブサイトに反映させたいマーケティングチームの方
・データの一貫性を保ちつつ、効率的なコンテンツ更新を目指すデザイナーや開発者
■注意事項
・JotformとWebflowのそれぞれとYoomを連携してください。
・JotformのWebhook設定方法については下記をご覧ください。
https://intercom.help/yoom/ja/articles/8105581
Mailchimpで購読者が追加されたら、Webflowにアイテムを追加する
試してみる
■概要
Mailchimpで獲得した新しい購読者情報を、手作業でWebflowのCMSに登録していませんか。この定型的な作業は、時間や手間がかかるだけでなく、転記ミスなどのヒューマンエラーを引き起こす可能性もあります。
このワークフローを活用することで、MailchimpとWebflowをスムーズに連携させ、購読者情報が追加された際に自動でWebflowへアイテムとして登録される仕組みを構築し、こうした課題を解消できます。
■このテンプレートをおすすめする方
・Mailchimpで集めたリード情報をWebflowで管理しているマーケティング担当者の方
・WebflowとMailchimp間のデータ連携を手作業で行い、非効率だと感じているWebサイト管理者の方
・2つのツールをよりシームレスに活用して、コンテンツ配信の質を高めたいと考えている方
■注意事項
・Mailchimp、WebflowのそれぞれとYoomを連携してください。
・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
・プランによって最短の起動間隔が異なりますので、ご注意ください。
Webflowのフォームが送信されたらGoogleスプレッドシートに追加する
試してみる
Webflowのフォームが送信されたらGoogleスプレッドシートに追加するフローです。
Webflowのフォームが送信されたらSalesforceに追加する
試してみる
Webflowのフォームが送信されたらSalesforceに追加するフローです。
Webflowのフォームが送信されたらkintoneに追加する
試してみる
Webflowのフォームが送信されたらkintoneに追加するフローです。
Webflowでアイテムが作成されたら、Slackに通知する
試してみる
■概要
Webflowで新しいブログ記事や制作実績などのアイテムを公開するたびに、手作業でSlackに共有するのは手間がかかるうえ、通知漏れも発生しがちです。
このような反復作業に時間を取られていませんか?
このワークフローを活用すれば、WebflowとSlackをスムーズに連携させ、アイテムの作成をトリガーに自動でSlackへ通知できます。
手作業による共有の手間をなくし、チーム内での迅速な情報共有を実現します。
■このテンプレートをおすすめする方
・Webflowで管理するサイトの更新情報を、手作業でSlackに通知しているWeb担当者の方
・WebflowとSlackを活用し、チームでのコンテンツ制作やレビューの連携を円滑にしたい方
・WebflowからSlackへの通知を自動化し、情報共有のスピードと確実性を高めたい方
■注意事項
・Webflow、SlackのそれぞれとYoomを連携してください。
Webflowで注文が発生したらAirtableに追加する
試してみる
Webflowで注文が発生したらAirtableに追加するフローです。
Webflowで注文が発生したらGoogleスプレッドシートに追加する
試してみる
Webflowで注文が発生したらGoogleスプレッドシートに追加するフローです。
まとめ
WebflowとHubSpotの連携を自動化することで、これまでWebサイトのフォームから問い合わせがあるたびに行っていた、手作業での顧客情報転記の手間を削減し、入力ミスといったヒューマンエラーも防ぐことができます。
これにより、マーケティングや営業の担当者はリード情報を素早く把握し、より迅速にアプローチを開始できるため、見込み顧客への対応スピードを向上させ、商談化率のアップに繋げることが可能です!
今回ご紹介したような業務自動化を実現できるノーコードツール「Yoom」は、プログラミングの知識がない方でも、画面の指示に従って操作するだけで直感的に業務フローを構築可能です。
もし自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomがもたらす業務効率化を体験してみてください!
よくあるご質問
Q:フォームの回答内容によって処理を分けることはできますか?
A:可能です。
ミニプラン以上でご利用いただける「分岐設定」を活用することで、回答内容に応じて処理を分けることができます。
例えば「職種」や「エリア」によって分けることも可能です。
Q:Webflowのカスタムフィールドのデータも連携できますか?
A:はい、連携可能です。
ブログ内でご紹介した「取得する値を追加する方法」を使えば、Webflow のカスタムフィールドも自由に選択して取得できます。
そのため、任意のカスタムデータを問題なく取得し、連携することができます。
Q:連携が失敗した場合、エラーに気づく仕組みはありますか?
A:自動化が失敗した場合、Yoomに登録したメールアドレスに通知が届きます。
また、Yoom画面上に「認証に失敗しました」「設定内容に誤りがある」などのエラーメッセージが表示されます。
エラーが起きた際の対応方法については下記のサイトをご参照ください。
ヘルプページで解決しない場合は、サポート窓口を利用することもできます。