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

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

更新日時 2021年 3月 9日

対象製品

すべての製品とプラン

フォームツールを使用すると、ウェブサイトへの訪問者から情報を収集できるため、自社とやり取りを行った訪問者に対するマーケティング、販売、サービス提供が可能になります。HubSpot上で作成したフォームは、HubSpotページに追加したり、HubSpotの外部で作成したページに追加したりできます。フォームはHubSpot以外でホスティングされた外部サイトに対しても、次の2つの方法で共有できます。1つはフォームコードを既存のページに埋め込む方法、もう1つはリンク可能なスタンドアロン フォーム ページを作成する方法です。

どちらの方法でも、HubSpotフォームツールでフォームに加えた変更が外部サイトで公開中のフォームに自動的に反映されます。

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

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

注:Salesforceキャンペーンをフォームに関連付けると、フォームの埋め込みコードが変更されます。この場合、外部サイトに埋め込みコードを再追加する必要があります。

  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。
  • 新しいフォームを作成するか、または既存のフォームにカーソルを置いて[アクション]ドロップダウンメニューをクリックし、[フォームを編集]を選択します。
  • [オプション]タブをクリックし、訪問者がフォームを送信した後の処理を選択します。訪問者がフォームを送信したときに、訪問者をサンキューページにリダイレクトするか、インラインのサンキューメッセージを表示するかを選択できます。
  • フォームエディターの右上にある[共有]をクリックします。
  • フォームを送信したコンタクトをSalesforceキャンペーンに追加する場合は、ダイアログボックスで、[コンタクトをSalesforceキャンペーンに追加]ドロップダウンメニューをクリックし、キャンペーンを選択します。
  • [コピー]をクリックします。
    forms-editor-share-form-copy-form-embed
  • 右上の[公開]をクリックします。 
  • 埋め込みコードを外部ページのHTMLモジュールに貼り付けます。フォームの分析情報を追跡するには、HubSpotのフォームを配置する外部ページに、HubSpotトラッキングコードがインストールされている必要があります。HubSpotでは、HubSpotトラッキングコードがインストールされていないフォームでもフォーム送信は収集されますが、そのフォームの分析情報は記録されません。 

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

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

フォームはフォームページを介して共有できます。つまりフォーム自体が専用のURL上のページとして存在できます。  

  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。 
  • 新しいフォームを作成するか、または既存のフォームにカーソルを置いて[アクション]ドロップダウンメニューをクリックし、[フォームを編集]を選択します。
  • 右上にある[共有]をクリックします。
  • ダイアログボックスで[リンクを共有]タブをクリックします。 
  • [コピー]をクリックして、フォームページのURLをクリップボードにコピーします。

share-form-own-page

  • 右上の[公開]をクリックします。
  • ブラウザーで、新しいウィンドウまたはタブを開き、フォームページのURLをアドレスバーに貼り付けて読み込みます。フォームページのURL自体を共有して、直接フォームにアクセスしてもらうこともできます。
WordPressサイトにフォームを埋め込んでいる場合にフォームをレスポンシブにするには、外部スタイルシート内に追加のCSS宣言が必要になる場合があります。

WordPressでフォームが機能していない場合、または公開ページを表示した際に埋め込みコードが変更されている場合は、フォームの挿入にプラグインを使用して埋め込みコードの変更を回避しなければならないことがあります。最新バージョンのGutenbergを使用している場合、インラインJavaScriptが削除されるため、Gutenberg用のインラインJSブロックプラグインを使用して、フォームとCTAをページに埋め込んでください。

外部ページ上の埋め込みフォームのスタイルを設定する

外部ページに埋め込まれたHubSpotフォームのスタイルを設定するには、フォームエディターを使用する方法と、外部スタイルシート内でCSSを使用する方法の2つがあります。

フォームエディターの場合

テーマ

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

  • HubSpotアカウントで、[マーケティング]>[リードの獲得]>[フォーム]の順に進みます。
  • フォームの名前をクリックします。
  • フォームエディターで[スタイルとプレビュー]タブをクリックします。
  • 左側ペインの[テーマ]セクションで、[以前のテーマをそのまま使用]チェックボックスをオフにします。

注:[以前のテーマをそのまま使用]チェックボックスをオフにすると、このフォームに適用されていた既定のHubSpotスタイル設定が削除されます。フォームに追加したカスタムCSSまたはJavaScriptは機能しなくなります。このチェックボックスは古いフォームの場合にのみ使用できます。アカウント上に新しく作成したフォームにはありません。 

  • 4つのテーマからいずれかを選択します。

 

スタイル(Marketing Hub StarterProfessionalEnterprise またはMarketing Hub Basic(旧製品)のみ

テーマに加えて、より詳細なレベルで埋め込みフォームをスタイル設定できます。

  • HubSpotアカウントで、[マーケティング]>[リードの獲得]>[フォーム]の順に進みます。
  • フォームの名前をクリックします。
  • フォームエディターで[スタイルとプレビュー]タブをクリックします。
  • 左側のペインで、[スタイル]セクションをクリックして展開します。ここでは、フォームフィールドの幅、フォントファミリー、フォントサイズ、フォントの色、フォームボタンをスタイル設定できます。

これらのスタイルは個別のフォームに設定され、グローバル フォーム スタイル設定よりも優先されます。

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

外部スタイルシート内のCSSによるフォームスタイル設定(Marketing HubおよびCMS Hub ProfessionalまたはEnterprise、またはMarketing Hub Basic(旧製品)のみ)

  • HubSpotアカウントで、[マーケティング]>[リードの獲得]>[フォーム]の順に進みます。
  • フォームの名前をクリックします。
  • フォームエディターで[スタイルとプレビュー]タブをクリックします。
  • [未加工のHTMLフォームとして設定]スイッチをクリックしてオンに切り替えます。フォームは、iFrame内ではなく、外部ページ上の未加工のHTML要素として表示され、フォームに適用されていた既定のHubSpotスタイルはすべて削除されます。

options-unstyled-form

  • 右上にある[共有]をクリックします。
  • ダイアログボックスで[コピー]をクリックしてフォームの埋め込みコードをコピーします。
  • 外部ページに、フォームの埋め込みコードを追加します。埋め込み済みのフォームがある場合は、既存のコードをこのスタイル未設定のバージョンで置き換える必要があります。
  • フォームの埋め込み後、外部スタイルシート内のCSSを使用してフォームのスタイルを設定できます。 
  • または、フォームの埋め込みコードを変更して、フォームをさらにカスタマイズすることもできます。HubSpotフォームはHTMLではなくJavaScriptを使用して作成されているため、フォームの埋め込みコードのカスタマイズには、JavaScriptに習熟した開発者との連携が必要になります。