メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Forms

外部サイト上にHubSpotフォームを埋め込み、スタイルを設定する

更新日時 2022年 9月 15日

対象製品

すべての製品とプラン

 HubSpotでフォームを作成した後、HubSpotページまたはHubSpot外で作成したページに追加できます。フォームは、次のいずれかの方法で外部の非HubSpotホスト型サイトで共有できます。

  • フォームコードを既存のページに埋め込む。
  • リンクできるスタンドアロンのフォームページを作成します。

いずれの方法でも、HubSpotのフォームツールのフォームに加えられた変更は、外部サイトのライブフォームに自動的に反映されます。フォームを追加した後、フォームエディターの外部ページに埋め込まれたHubSpotフォームを追加したり、外部スタイルシートのCSSを使用したりすることができます。

WordPressを使用している場合は、フォームをWordPressの記事またはページに挿入する方法をご覧ください

フォーム埋め込みコードを追加する

フォームのembedコードにアクセスするには: 
  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。
  • フォームにカーソルを合わせ、[操作] > [共有]をクリックします。 
  • フォームを送信したコンタクトをSalesforceキャンペーンに追加する場合は、ダイアログボックスで、[コンタクトをSalesforceキャンペーンに追加]ドロップダウンメニューをクリックし、キャンペーンを選択します。Salesforceキャンペーンをフォームに関連付けると、フォームのembedコードが変更されます。この場合、外部サイトに埋め込みコードを再追加する必要があります。
  • [コピー]をクリックします。
  • 埋め込みコードを外部ページのHTMLモジュールに貼り付けます。フォームの分析情報を追跡するには、HubSpotのフォームを配置する外部ページに、HubSpotトラッキングコードがインストールされている必要があります。 


スタンドアロン フォーム ページを作成する 

[共有]リンクからフォームを共有することもできます。共有リンクでは、フォームは独自のURLのスタンドアロンページに表示されます。この共有リンクは非表示または非公開にすることはできません。共有リンクを知っている人は誰でもフォームにアクセスできます。   

  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。 
  • フォームにカーソルを合わせ、[操作] > [共有]をクリックします。 
  • ダイアログボックスで[リンクを共有]タブをクリックします。 
  • [コピー]をクリックして、フォームページのURLをクリップボードにコピーします。 
  • ブラウザーで、新しいウィンドウまたはタブを開き、フォームページのURLをアドレスバーに貼り付けて読み込みます。フォームページのURLを他のユーザーと直接共有して、フォームへのアクセスを許可することもできます。

フォームエディターで埋め込みフォームをスタイル設定する

HubSpotフォームエディタを使用して埋め込みフォームをスタイル設定する場合は、テーマを使用するか、独自のカスタムスタイルを適用できます。 

注:フォームエディタで設定されたテーマとスタイルは、埋め込みフォームまたはスタンドアロンフォームページにのみ適用されます。HubSpotページのフォームは、コンテンツエディターのフォームモジュールのスタイルオプションでのみスタイル設定できます。

テーマでフォームをスタイル設定する

カスタムコードを記述せずにフォームにスタイルを設定する場合は、埋め込みフォームまたはスタンドアロン フォーム ページにプリセットテーマを適用できます。これらのテーマは、すべてのグローバルフォームスタイル設定に加えて、フォームにカスタマイズオプションを追加します。

テーマでフォームをスタイル設定するには: 

  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。
  • フォームにカーソルを合わせ、[編集]をクリックします。 
  • フォームエディターで[スタイルとプレビュー]タブをクリックします。
  • 従来のフォームを編集する場合は、左側のペインで[古いテーマを 保持] チェックボックスをオフにします。これにより、このフォームに適用された以前のデフォルトのHubSpotスタイルが削除されます。フォームに追加したカスタムCSSまたはJavaScriptは機能しなくなります。このチェックボックスは、アカウントで作成された新しいフォームには適用されません。 
  • テーマを選択します。
  • 右上の[ 公開] または[ 更新]をクリックします。

 

カスタムスタイルを使用

HubSpotアカウントでマーケティングハブ スターター プロフェッショナル、またはエンタープライズのサブスクリプションをお持ちの場合は、埋め込みフォームをより細かいレベルでスタイル設定することもできます。

カスタムスタイルを適用するには: 

  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。
  • フォームにカーソルを合わせ、[編集]をクリックします。 
  • フォームエディターで[スタイルとプレビュー]タブをクリックします。
  • 左側のペインで、[ スタイル] セクションをクリックします。ここでは、フォームフィールドの幅、フォントファミリ、フォントサイズ、フォントの色、フォームボタンを設定できます。これらのスタイルは個々のフォームベースで設定され、グローバルフォームのスタイル設定が上書きされます
  • フォームをカスタマイズした後、右上にある[ 公開] または[ 更新]をクリックします。



外部スタイルシート内の CSS で、埋め込みフォームをスタイル設定する 

HubSpotアカウントでマーケティングハブまたはCMSハブ プロフェッショナルまたはエンタープライズサブスクリプションをお持ちの場合は、フォームを生のHTMLフォームとして埋め込み、外部スタイルシートにCSSを含むこの埋め込みフォームをスタイル設定できます。 

埋め込みフォームをCSSでスタイル設定するには: 

  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。
  • フォームにカーソルを合わせ、[編集]をクリックします。 
  • フォームエディターで[スタイルとプレビュー]タブをクリックします。
  • [未加工のHTMLフォームとして設定]スイッチをクリックしてオンに切り替えます。フォームは、iFrame内ではなく、外部ページ上の未加工のHTML要素として表示され、フォームに適用されていた既定のHubSpotスタイルはすべて削除されます。
  • 右上の[公開]または[更新]をクリックします。
  • 外部ページに、フォームの埋め込みコードを追加します。埋め込み済みのフォームがある場合は、既存の埋め込みコードをこのスタイル未設定のバージョンで置き換える必要があります。フォームを埋め込んだ後:
    • CSSを使用して、外部スタイルシートのフォームをスタイル設定できます。
    • フォームの埋め込みコードを 変更して、追加のフォームカスタマイズ を行うこともできます。 HubSpotフォームはHTMLではなくJavaScriptで構築されているため、フォームの埋め込みコードをカスタマイズするには、JavaScriptの操作方法を知っている開発者の助けが 必要です

 

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.