外部サイト上にHubSpotフォームを埋め込み、スタイルを設定する
更新日時 2021年 1月 21日
対象製品
すべての製品とプラン |
フォームツールを使用すると、ウェブサイトへの訪問者から情報を収集できるため、自社とやり取りを行った訪問者に対するマーケティング、販売、サービス提供が可能になります。HubSpot上でフォームを作成したら、それをHubSpotページに追加したり、HubSpotの外部で作成したページに追加したりできます。フォームはHubSpot以外でホスティングされた外部サイトに対しても、次の2つの方法で共有できます。1つはフォームコードを既存のページに埋め込む方法、もう1つはリンク可能なスタンドアロン フォーム ページを作成する方法です。
どちらの方法でも、HubSpotフォームツールでフォームに加えた変更が外部サイトで公開中のフォームに自動的に反映されます。
WordPressを使用している場合は、フォームをWordPressの記事またはページに挿入する方法をご覧ください。
フォーム埋め込みコードを追加する
注:Salesforceキャンペーンをフォームに関連付けると、フォームの埋め込みコードが変更されます。この場合、外部サイトに埋め込みコードを再追加する必要があります。
- HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。
- 新しいフォームを作成するか、または既存のフォームにカーソルを置いて[アクション]ドロップダウンメニューをクリックし、[フォームを編集]を選択します。
- [オプション]タブをクリックし、訪問者がフォームを送信した後の処理を選択します。訪問者がフォームを送信したときに、訪問者をサンキューページにリダイレクトするか、インラインのサンキューメッセージを表示するかを選択できます。

- フォームエディターの右上にある[共有]をクリックします。
- ダイアログボックスで、フォームを送信したコンタクトをSalesforceキャンペーンに追加する場合は、[コンタクトをSalesforceキャンペーンに追加]ドロップダウンメニューをクリックし、キャンペーンを選択します。
- [コピー]をクリックします。
- 右上の[公開]をクリックします。
- 埋め込みコードを外部ページのHTMLモジュールに貼り付けます。フォームの分析情報を追跡するには、HubSpotのフォームを配置する外部ページに、HubSpotトラッキングコードがインストールされている必要があります。HubSpotでは、HubSpotトラッキングコードがインストールされていないフォームでもフォーム送信は収集されますが、そのフォームの分析情報は記録されません。
WordPressを使用している場合は、フォームをWordPressの記事またはページに挿入する方法をご覧ください。
スタンドアロン フォーム ページを作成する
フォームはフォームページを介して共有できます。つまりフォーム自体が専用のURL上のページとして存在できます。
- HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。
- 新しいフォームを作成するか、または既存のフォームにカーソルを置いて[アクション]ドロップダウンメニューをクリックし、[フォームを編集]を選択します。
- 右上にある[共有]をクリックします。
- ダイアログボックスで[リンクを共有]タブをクリックします。
- [コピー]をクリックして、フォームページのURLをクリップボードにコピーします。
- 右上の[公開]をクリックします。
- ブラウザーで、新しいウィンドウまたはタブを開き、フォームページのURLをアドレスバーに貼り付けて読み込みます。フォームページのURL自体を共有して、直接フォームにアクセスしてもらうこともできます。
WordPressでフォームが機能していない場合、または公開ページを表示した際に埋め込みコードが変更されている場合は、フォームの挿入にプラグインを使用して埋め込みコードの変更を回避しなければならないことがあります。最新バージョンのGutenbergを使用している場合、インラインJavaScriptが削除されるため、Gutenberg用のインラインJSブロックプラグインを使用して、フォームとCTAをページに埋め込んでください。
外部ページ上の埋め込みフォームのスタイルを設定する
外部ページに埋め込まれたHubSpotフォームのスタイルを設定するには、フォームエディターを使用する方法と、外部スタイルシート内でCSSを使用する方法の2つがあります。
フォームエディターの場合
テーマ
カスタムコードを記述せずにフォームにスタイルを設定する場合は、埋め込みフォームまたはスタンドアロン フォーム ページにプリセットテーマを適用できます。テーマにより、フォームにグローバル フォーム スタイル設定に加えて、カスタマイズオプションが追加されます。
- HubSpotアカウントで、[マーケティング]>[リードの獲得]>[フォーム]の順に進みます。
- フォームの名前をクリックします。
- フォームエディターで[スタイルとプレビュー]タブをクリックします。
- 左側ペインの[テーマ]セクションで、[以前のテーマをそのまま使用]チェックボックスをオフにします。
注:[以前のテーマをそのまま使用]チェックボックスをオフにすると、このフォームに適用されていた既定のHubSpotスタイル設定が削除されます。フォームに追加したカスタムCSSまたはJavaScriptは機能しなくなります。このチェックボックスは古いフォームの場合にのみ使用できます。アカウント上に新しく作成したフォームにはありません。
- 4つのテーマからいずれかを選択します。
スタイル(Marketing Hub Starter、Professional、Enterprise、 またはMarketing Hub Basic(旧製品)のみ)
テーマに加えて、より詳細なレベルで埋め込みフォームをスタイル設定できます。
- HubSpotアカウントで、[マーケティング]>[リードの獲得]>[フォーム]の順に進みます。
- フォームの名前をクリックします。
- フォームエディターで[スタイルとプレビュー]タブをクリックします。
- 左側のペインで、[スタイル]セクションをクリックして展開します。ここでは、フォームフィールドの幅、フォントファミリー、フォントサイズ、フォントの色、フォームボタンをスタイル設定できます。
これらのスタイルは個別のフォームに設定され、グローバル フォーム スタイル設定よりも優先されます。
注:フォームエディター上で設定するテーマとスタイルは、埋め込みフォームまたはスタンドアロン フォーム ページにのみ適用されます。HubSpotページ上のフォームのスタイルは、コンテンツエディターのフォーム モジュール スタイル オプションでのみ設定できます。
外部スタイルシート内のCSSによるフォームスタイル設定(Marketing HubおよびCMS Hub ProfessionalまたはEnterprise、またはMarketing Hub Basic(旧製品)のみ)
- HubSpotアカウントで、[マーケティング]>[リードの獲得]>[フォーム]の順に進みます。
- フォームの名前をクリックします。
- フォームエディターで[スタイルとプレビュー]タブをクリックします。
- [未加工のHTMLフォームとして設定]スイッチをクリックしてオンに切り替えます。フォームは、iFrame内ではなく、外部ページ上の未加工のHTML要素として表示され、フォームに適用されていた既定のHubSpotスタイルはすべて削除されます。
- 右上にある[共有]をクリックします。
- ダイアログボックスで[コピー]をクリックしてフォームの埋め込みコードをコピーします。
- 外部ページに、フォームの埋め込みコードを追加します。埋め込み済みのフォームがある場合は、既存のコードをこのスタイル未設定のバージョンで置き換える必要があります。
- フォームの埋め込み後、外部スタイルシート内のCSSを使用してフォームのスタイルを設定できます。
- または、フォームの埋め込みコードを変更して、フォームをさらにカスタマイズすることもできます。HubSpotフォームはHTMLではなくJavaScriptを使用して作成されているため、フォームの埋め込みコードのカスタマイズには、JavaScriptに習熟した開発者との連携が必要になります。
関連記事
-
ポップアップフォームを作成する
ポップアップフォームツールを利用すると、新しいリードを惹き付けるリード獲得フォームを簡単に作成できます。...
ナレッジベース -
HubSpotコンテンツに動画を追加する
HubSpot動画は、リッチ テキスト モジュール内のページ、ブログ記事、およびナレッジベース記事上のコンテンツに追加できます。HubSpot動画は、ドラッグ&ドロップ ページ エディターとドラッグ&ドロップ...
ナレッジベース -
HubSpot以外のフォームを使用する
HubSpot以外のフォームとは、外部サイト上に設置された、HubSpot上で作成されていないHTMLフォームです。外部ページにHubSpotのトラッキングコード...
ナレッジベース