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

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

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

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

始める前に

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

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

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

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

共有リンクをコピーして単体フォームページを共有する 

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

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

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

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

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

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

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

フォーム開発者コードをコピーする

フォームを埋め込み、CSSを使用して外部スタイルシートにスタイル設定できます。この方法を使用すると、デフォルトのスタイルを上書きしたり、特定のフォーム要素にきめ細かいスタイルを適用したり、埋め込みフォーム間でスタイルに一貫性を持たせるためのグローバルルールを設定したりできます。CSSを使用して埋め込みフォームのカスタムスタイルを定義する方法の詳細をご覧ください。 

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

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