外部ウェブサイト上でHubSpotのフォームを使用して既存のフォームを置換する方法

更新日時 June 29, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise

HubSpotの利用者の中には、HubSpotでウェブサイトをホストしていないけれども、HubSpotを使ってリード情報をキャプチャし保存する機能を求めている方もいるでしょう。HubSpotでは2つのオプション、つまり、 Forms APIと埋め込みコードを使用できます。埋め込みコードを使用すると、HubSpotトラッキングコードをインストールした外部サイト上で、コンタクトデータベースインテグレーション、スマートフィールド、プログレッシブプロファイリング(Professional版とEnterprise版のアカウント)などのHubSpotフォームの全機能にアクセスできます。HubSpotのフォーム機能のすべてを活用するには、フォームの埋め込みコードを追加する前に、公開済みの各ウェブページにトラッキングコードをインストールする必要があります。

別のフォーム機能が必要でも、引き続きキャプチャしたコンタクトデータをHubSpotに送信する場合は、独自のフォームをコード化し、サーバー側のフォームアクションスクリプトでForms APIを使用してそのデータをHubSpotに送信できます。Forms APIを使用するにはサーバー側の開発者が必要ですが、基本的な概念の一部を以下に説明します。Forms APIの詳細については、開発者向けドキュメントを参照してください。

埋め込みコードにはJavaScriptが含まれているため、まず、ページのコンテンツ領域におけるJavaScriptの使用が他のCMSで許可されていることを確認する必要があります。

HubSpotフォームを外部ウェブサイトに(トラッキングコードを使用して)配置すると、HubSpotページでの場合と同様に機能します。コンタクトのアクセス元を確認したり、コンタクトが送信したデータおよび送信元のページを確認したり、閲覧/送信率を分析してフォームがどの程度利用されているのかを把握し、このデータを基にリストを作成したり、フォームの送信に基づいてワークフローを実行したりするなど、多くの機能を実行できます。HubSpotフォームをHubSpotランディングページとサイトページで使用すると、すべてのコンテンツを一か所に維持し、各ページのパフォーマンスを作成、共有、分析しやすくできる一方で、これらのフォームを外部で容易に使用することができます。

手順

HubSpotフォームの埋め込みコードをコピーするには、以下の手順に従います。

1.フォームを開く

[Contacts(コンタクト)] > [Forms(フォーム)]の順に選択して、既存のフォームを開くか、新しいフォームを作成します。

2.[Embed(埋め込み)]を選択する

フォームを準備して保存したら、[Embed(埋め込み)]ボタンを選択します。

3.リダイレクトURLまたはインラインサンキューメッセージを挿入する

リダイレクトURLを1行目に入力するか貼り付けます。

HubSpotフォームを外部で使用するには、フォーム送信によってリードをサンキューページにリダイレクトするか、インラインサンキューメッセージを設定する必要があります。 

または、フォームが入力されると表示される独自のインラインサンキューメッセージを挿入することもできます。

Salesforceと統合している場合、アクティブなSalesforceキャンペーンを選択することで、フォーム送信時にコンタクトをそのキャンペーンに含めることができます。コンタクトがフォームを送信し、Salesforceと同期すると、コンタクトは選択したキャンペーンの一部になります。選択リストにはアクティブなキャンペーンだけが表示されます。

HubSpotアプリ内でフォームを変更すると、ほとんどの場合埋め込みフォームは自動的に更新されますが、Salesforceキャンペーンを変更する場合は、埋め込みコードを置き換える必要があります。フォームを埋め込んだ後、キャンペーンを変更する場合は、次の操作を実行します。

  • フォームに戻る。
  • 新しいキャンペーンを選択する。
  • 新しいフォームコードを外部ウェブサイトに埋め込む。

新しい送信は(埋め込みコードのIDに基づいて)新しいキャンペーンに結び付けられます。過去の送信は、Salesforceの新しいキャンペーンに移動する必要があります。

4.埋め込みコードをコピーする

ウィンドウに表示された埋め込みコードをコピーします。リード情報を適切にキャプチャしてHubSpotに送信するには、コードのすべてをコピーする必要があります。

フォームに新しいプロパティを追加するか、既存のプロパティオプションを編集する場合、これらは新しいフィールドオプションが設定された外部ページに表示されます。

5.フォームを保存する

最後に、フォームに関連付けられた新しいオプションがあるため、フォームを保存します。

6.HubSpotフォームを外部ページに埋め込む

このステップでは、フォームの埋め込みコード(ステップ4でコピーしたコード)を外部ページに貼り付けます。このためには、対象の外部ページのHTMLコードにアクセスする必要があります。フォームの埋め込みコードを外部ページのHTML内のどこに挿入したらいいのか分からない場合は、ウェブサイト管理者に相談して、フォームを所定の位置に適切に埋め込むことをお勧めします。

埋め込みコードの変更(上級)

埋め込みコードを変更して、表示や他のフォームオプションをさらにカスタマイズすることもできます。たとえば、埋め込んだHubSpotフォームによって一部のスタイルが自動的に読み込まれるので、フォームはすべてのページで(そのページのCSSに関係なく)適切に表示されます。しかし、上級ユーザーであれば、埋め込みコードを変更してフォームの表示をカスタマイズしようと考えるかもしれませんフォーム埋め込みのカスタマイズオプションの完全なリストについては、こちらをご覧ください

前の記事

次の記事