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

HubSpot上で作成したフォームは、HubSpotページに追加 したり、HubSpotの外部で作成したページに追加したりできます。コンテンツがHubSpotの外部でホストされている場合、次の方法でフォームを追加できます。

• 埋め込みコードをコピーして外部ページに追加することにより、フォームを埋め込みます。
• フォーム共有リンクを使用すると、フォーム用の単体ウェブページが提供され、リンクできます。

どちらの方法でも、フォームに加えられた変更は外部サイトで公開中のフォームで自動的に更新されます。フォームエディター内で、または外部スタイルシート内のCSSを使用して、埋め込まれたHubSpotフォームのスタイルを設定できます。

始める前に

• フォームを未加工のHTMLフォームとして設定する場合、このオプションは更新されたフォームエディターでは使用できません。未加工のHTMLとして設定できるのは、旧バージョンのフォームエディターを使用して作成されたフォームのみです。
• HubSpotフォームを外部ページに埋め込む場合、アナリティクスを追跡するにはHubSpotトラッキングコードをインストールする必要があります。HubSpotトラッキングコードのインストール方法をご確認ください。

フォームのスタイルを設定する 

フォームおよびフォームステップのテキスト、入力フィールド、ボタン、背景をカスタマイズできます。［グローバルスタイル設定］タブで設定されたスタイルオプションは、全てのフォームステップに適用されます。個別のフォームステップのスタイルを設定することはできません。 

1. HubSpotアカウントにて、［マーケティング］＞［フォーム］の順に進みます。
2. 新しいフォームを作成するか、または既存のフォームにマウスポインターを置き、[編集]をクリックします。
3. 左のサイドバーメニューで styles スタイル設定アイコンをクリックします。
4. 以下のフォームコンポーネントのスタイルはカスタマイズできます。
   • フィールド：背景や境界線など、フィールドをカスタマイズします。さらにラベルのフォント、フォントサイズ、色をカスタマイズしたり、ヘルプテキスト、プレースホルダー（仮挿入）、エラーテキストの色をカスタマイズしたりできます。 
   • ボタン：ボタンの高さ、角の丸み、背景、グラデーションをカスタマイズし、ボタンにドロップシャドウを追加します。また、ボタンテキストのフォント、フォントサイズ、色をカスタマイズすることもできます。 
   • 段落（リッチテキスト）：本文テキストのフォント、フォントサイズ、色をカスタマイズします。 
   • 見出し：見出しのフォントとテキストの色をカスタマイズします。ヘッダーテキストにドロップシャドウを追加することもできます。 
   • 背景：フォームとフォームステップの背景をカスタマイズします。背景色を設定したり、背景に画像を使用したりすることもできます。 AIアシスタント を使用して画像を生成できます。またフォームの境界線を設定することもできます。
   • 進捗バー：フォームの進捗バーをカスタマイズします（進捗ラインの色や進捗バーのフォントなど）。 

フォームの埋め込みコードをコピーする

HubSpotフォームを外部ページに埋め込むには、フォームの埋め込みコードをコピーして外部ページに貼り付けます。埋め込みフォームのアナリティクスを追跡するには、HubSpotフォームを埋め込む外部ページに、HubSpot トラッキングコード がインストールされている必要があります。

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

1. HubSpotアカウントにて、［マーケティング］＞［フォーム］の順に進みます。
2. フォームの上にマウスポインターを置き、[ 編集]をクリックします。 
3. 右上で、［確認と更新］をクリックします。
4. 右側のパネルの下部にある[ 更新]をクリックします。
5. ダイアログボックスで、[ 埋め込みコードを取得]をクリックします。
6. [埋め込みコード ]タブで、[ コピー]をクリックします。
7. 埋め込みコードを外部ページのHTMLモジュールに貼り付けます。

共有リンクを使用して単体 フォーム ページを共有します 

共有リンクを使用してフォームを共有すると、単体のウェブページ上にフォームが表示されます。この共有リンクは非表示にしたり、非公開したりすることはできません。共有リンクがあれば、誰でもフォームにアクセスできます。 

共有リンクにアクセスするには、次の手順に従います。

1. HubSpotアカウントにて、［マーケティング］＞［フォーム］の順に進みます。
2. フォームの上にマウスポインターを置き、[ 編集]をクリックします 。
3. 右上で、［確認と更新］をクリックします。
4. 右側のパネルの下部にある[ 更新]をクリックします。
5. ダイアログボックスで、[ 共有リンクをコピー]をクリックします。
6. 下部にある[ コピー]をクリックします。これにより、フォームページのウェブアドレスがクリップボードにコピーされます。
7. ブラウザーで、新しいウィンドウまたはタブを開き、フォームページのURLをアドレスバーに貼り付けて読み込みます。またフォームページURLを他の人に直接共有して、フォームにアクセスしてもらうこともできます。

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

Marketing HubまたはContent HubのProfessionalまたはEnterpriseアカウントのユーザーは、フォームを埋め込み、外部スタイルシートにCSSを使用してスタイル設定できます。 このメソッドを使用すると、デフォルトのスタイルを変更したり、特定のフォーム要素にきめ細かいスタイルを適用したり、埋め込みフォーム間でスタイルに一貫性を持たせるためのグローバルルールを設定したりできます。CSSを使用して埋め込みフォームのカスタムスタイルを定義する方法の詳細をご覧ください。 

開発者コードにアクセスするには、次の手順に従います。 

1. HubSpotアカウントにて、［マーケティング］＞［フォーム］の順に進みます。
2. フォームの上にマウスポインターを置き、[ 編集]をクリックします。 
3. 右上で、［確認と更新］をクリックします。
4. 右側のパネルの下部にある[ 更新]をクリックします。
5. ダイアログボックスで、[ 埋め込みコードを取得]をクリックします。
6. [デベロッパーコード(詳細)] タブをクリックします。
7. CSSまたはJavaScriptの外部で行われた変更によってフォームが破損するリスクを受け入れるには 、[リスクを理解し、コードを表示] チェックボックスをオンにします。
8. 下部にある[ コピー]をクリックします。
9. 外部ページに、フォームの埋め込みコードを追加します。フォームを埋め込んだ後、外部スタイルシート内のフォームのスタイルをCSSで設定できます。
   • 上書きできるCSS変数は、こちらの記事に記載されています。
   • グローバルスタイルは、全ての埋め込みフォームの最上位のスタイル設定よりも優先されます。フォーム要素の行、送信ボタン、フォームの見出しなど、フォームの個々の要素を対象にすることもできます。