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

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

更新日時 2025年 3月 3日

以下の製品でご利用いただけます（別途記載されている場合を除きます）。

HubSpot上で作成したフォームは、HubSpotページに追加したり、HubSpotの外部で作成したページに追加したりできます。フォームは、HubSpotがホスティングしていない外部のサイトで、次の方法で共有できます。

既存のページにフォームのコードを埋め込む。
リンク可能なスタンドアロンフォームページを作成する。

どちらの方法でも、HubSpotフォームツールでフォームに加えた変更が外部サイトで公開中のフォームに自動的に反映されます。フォームを追加した後、外部ページに埋め込まれたHubSpotフォームのスタイルを設定する方法として、フォームエディターを使用する方法と、外部スタイルシート内でCSSを使用する方法があります。

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

注：2024年5月16日以降、外部ページにフォームの埋め込みコードを追加する場合、そのページのドメインが信頼できるドメインとして扱われるには、そのドメインをサイトドメインとして追加する必要があります。そうでない場合、フォームに送信されたものもスパム送信としてフィルター処理されます。

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

フォーム埋め込みコードにアクセスするには、次の手順に従います。

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

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

［リンクを共有］からフォームを共有することもできます。［リンクを共有］では、専用のURL上のスタンドアロンページにフォームが表示されます。この共有リンクは、非表示や非公開にすることはできません。共有リンクがあれば、誰でもフォームにアクセスできます。

HubSpotアカウントにて、［マーケティング］＞［フォーム］の順に進みます。
フォームの上にマウスポインターを置き、［アクション］>［共有］の順にクリックします。
ダイアログボックスで［リンクを共有］タブをクリックします。
［コピー］をクリックして、フォームページのURLをクリップボードにコピーします。
ブラウザーで、新しいウィンドウまたはタブを開き、フォームページのURLをアドレスバーに貼り付けて読み込みます。フォームページのURL自体を共有して、直接フォームにアクセスしてもらうこともできます。

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

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

注：フォームエディターで設定されたテーマとスタイルは、組み込みフォームまたは単体フォームページにのみ適用されます。HubSpotページのフォームは、コンテンツエディターのフォームモジュールスタイルオプションを使って、スタイル設定することしかできません。

テーマ(旧)を使用してフォームのスタイルを設定する

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

テーマを使用してフォームのスタイルを設定するには、次の手順に従います。

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

カスタムスタイルを使用する

より詳細なレベルでフォームのスタイルを設定することもできます。

カスタムスタイルを適用するには、次の手順に従います。

HubSpotアカウントにて、［マーケティング］＞［フォーム］の順に進みます。
フォームの上にカーソルを重ねて［編集］をクリックします。
Marketing Hubの「Starter」、「Professional」、または「Enterprise」サブスクリプションを持っている旧フォームを編集している場合は、フォームエディターの[ スタイル & プレビュー]タブをクリックします。
- 左側のペインで［スタイル］セクションをクリックします。ここでは、フォームフィールドの幅、フォントファミリー、フォントサイズ、フォントの色、フォームボタンを設定できます。これらのスタイルは個々のフォームごとに設定され、グローバルフォームのスタイル設定を変更します。
- フォームをカスタマイズしたら、右上の［公開］または［更新］をクリックします。

更新されたフォームエディターを使用している場合は、左側にある [スタイル設定]アイコンをクリックします。
- テキスト、入力フィールド、ボタンをカスタマイズする際には、クイックフィールド入力スタイルを使用して、既存のスタイルから選択することができます。また、フォームの各コンポーネントのスタイルを手動でカスタマイズすることもできます：
  - フィールド: 背景や罫線など、フィールドをカスタマイズします。また、ラベルのフォント、文字サイズ、色、ヘルプテキスト、プレースホルダー、エラーテキストの色もカスタマイズできます。
  - ボタン: ボタンの高さ、角の丸み、背景、グラデーションをカスタマイズし、ボタンにドロップシャドウを追加します。また、ボタンテキストのフォント、文字サイズ、色をカスタマイズすることもできます。
  - 段落(リッチテキスト): 本文テキストのフォント、フォントサイズ、色をカスタマイズします。
  - 見出し:見出しのフォントとテキストの色をカスタマイズします。ヘッダーテキストにドロップシャドウを追加することを選択できます。
  - 背景:フォームとフォームステップの背景をカスタムできます。背景色を設定することも、背景に画像を使用することもできます。AIアシスタントを使って画像を生成することができる。フォームに枠線を設定することもできます。
  - 進捗バー:フォームの進捗バーをカスタマイズします(進捗ラインの色やフォントなど)。

フォームスタイル-2

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

HubSpotアカウントで Marketing Hub またはContent Hub ProfessionalまたはEnterpriseサブスクリプションをお持ちの場合、レガシーフォームを未加工のHTMLフォームとして埋め込み、外部スタイルシート内のCSSを使用してこの埋め込みフォームをスタイル設定できます。

注: レガシーフォームは未加工のHTMLとしてのみ設定できます。

埋め込みフォームをCSSでスタイル付けするには、次の手順に従います。

HubSpotアカウントにて、［マーケティング］＞［フォーム］の順に進みます。
フォームの上にカーソルを重ねて［編集］をクリックします。
フォームエディターで［スタイルとプレビュー］タブをクリックします。
［未加工のHTMLフォームとして設定］スイッチをクリックしてオンに切り替えます。フォームは、iFrame内ではなく、外部ページ上の未加工のHTML要素として表示され、フォームに適用されていたデフォルトのHubSpotスタイルは全て削除されます。
右上の［公開］または［更新］をクリックします。
フォーム埋め込みコードを外部ページに追加します。埋め込み済みのフォームがある場合は、既存の埋め込みコードをこのスタイル未設定のバージョンで置き換える必要があります。フォームの埋め込み後、次のことが可能になります。
- 外部スタイルシート内のCSSを使用したフォームのスタイル設定。
- フォームの埋め込みコードを変更して、フォームをさらにカスタマイズ。HubSpotフォームはHTMLではなくJavaScriptを使用して作成されているため、フォームの埋め込みコードのカスタマイズには、JavaScriptに習熟した開発者との連携が必要になります。

この記事はお役に立ちましたか？はいいいえ

こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。