HubSpotとWebflowを連携する方法

Webサイトの構築とホスティングにWebflowを選んだものの、HubSpotのフォームを引き続き使い、両システムを連携させたい場合、どの方法が最適か迷うかもしれません。この記事では、両ツールを最大限に活用できるよう、WebflowとHubSpotを連携させるための最適な方法を紹介します。

オプション1:Webflow EnterpriseのHubSpot連携

残念ながら現時点では、HubSpotとの「公式」連携はWebflowのエンタープライズ版を購入した場合にのみ利用できます。連携は比較的簡単で、すぐに使えます。しかし、HubSpot連携のためだけにWebflow Enterpriseプランを契約したくない、あるいは必要ない場合はどうすればよいのでしょうか。

オプション2:HubSpot以外のフォームを使う

HubSpotには、HubSpotのトラッキングコードが設置されているWebサイト上のHubSpot以外のフォームからの送信を追跡できる設定があります。これを機能させるには、HubSpotの設定のフォームで、このオプションをオンにする必要があります。

これをオンにすると、フォームのあるサイトとページにHubSpotのトラッキングコードが設置されていれば、HubSpotがそのフォームの情報を収集します。この機能にはいくつかの注意点と制限があり、HubSpotのこちらの記事に記載されています。フォームの送信内容をHubSpotで収集するには、フォームが次の条件を満たしている必要があります。

• 静的なHTMLフォームであること。
• HTMLの<form>タグで囲まれていること。
• <iframe>内にないこと。
• メールアドレスの入力欄があること。

この点に自信がない場合は、開発者の助けが必要になるかもしれません。設定が完了すると、Webflowのフォームが送信された際に、HubSpotのフォームセクションに表示されます。なお、フォーム名はWebサイトのCSSコードから取得されるため、見慣れない名前が表示される場合があります。

このツールは、フォームのCSSセレクターをもとにWebサイト上のフォームを識別します。つまり、フォームのCSS IDが「gform_7.」の場合、フォームのダッシュボードには「#gform_7.」と表示されます。HubSpot以外のフォームツールにフォームが表示されたら、自分やチームが識別しやすいように名前を変更できます。

オプション2の利点は、Webflowのフォームビルダーを使って好きなスタイルでフォームを作成でき、見た目が異なり追加のJavascriptコードも必要になるHubspotフォームを埋め込まなくて済むことです。

このオプションのもう一つの欠点は、HubSpot以外のフォームをGoogle Adsのイベントトリガーとして使えないことです。必須ではありませんが、フォーム送信をHubSpotのイベントとして使い、Google Adsにフィードバックしたい場合は、HubSpotのフォームである必要があり、少々不便です。

オプション3:HubSpotフォームを埋め込む

3つ目の方法は、HubSpotフォームの通常の埋め込みオプションを使うことです。HubSpotのフォーム埋め込みコードをコピーし、WebflowのDesignerでページに貼り付けるだけなので簡単です。その際は、Webflowの埋め込み機能を使う必要があります。

こちらは、埋め込みコードについてのWebflowナレッジベースの動画です。Core、Growth、Agency、FreelancerのWorkspaceをお使いの場合、またはサイトで有効なSiteプランをご利用の場合は、Embed要素を使えます。

以下は、HubSpotでフォームをクリックして共有を選ぶと取得できる、Hubspotフォームの埋め込みコードの例です。

HubSpotフォームをWebflowに連携するこの方法で懸念されるのは、フォームのスタイルがWebflow上のフォームのスタイルと異なって見える可能性があることです。HubSpotでフォームの設定を変更してスタイルをすべて削除することもできますが、その場合、フォームの各要素にCSSスタイルを作成して適用し、Webflowのフォームに合わせる作業が少し面倒です。

まとめ

HubSpotとWebflowは、他のツールほど相性が良いとは言えませんが、設定は比較的簡単です。HubSpot以外のフォーム機能は、WebflowのフォームをHubSpotと連携させるのに役立ちますが、機能が少し制限されます。理想的なのは、Hubspotフォームを埋め込み、Webサイトのスタイルに合わせることですが、その場合はWeb開発者の助けが必要になるかもしれません。