HubSpotフォームをスタイル設定して外部サイトに埋め込む

外部ウェブサイトで HubSpotフォーム を使用してリードを獲得し、コンタクトデータをHubSpotアカウントに自動的に同期します。HubSpotでフォームのスタイルを設定し、フォーム埋め込みコードを使用してサイトに追加できます。また、共有リンクを使用して、スタンドアロンフォームをオーディエンスに送信します。 

フォームを埋め込むと、送信内容がHubSpotアカウントに直接同期され、コンタクト管理、自動化のトリガー、パフォーマンスの分析を行うことができます。例えば、自社ウェブサイトの製品ページにHubSpotフォームを追加して、デモのリクエストを取得し、自動送信Eメールでフォローアップすることができます。 

旧バージョンのフォームエディターで作成したフォームの場合は、 外部サイトで旧形式のフォームを設定してスタイルを設定する方法をご確認ください。

始める前に

この機能を使用する前に、外部サイトでフォームを使用する場合の技術的な要件と考慮事項を確認してください。

要件

• 外部サイトにHubSpotフォームを埋め込む場合、 サイトドメインをトラッキング設定に追加する必要があります。追加されていないドメインからのフォーム送信はスパム(迷惑)と分類されます。
• 埋め込みフォームのアナリティクスをトラッキングするには、外部ページに HubSpotトラッキングコード をインストールする必要があります。
  

制限と考慮事項

• フォームを未加工のHTMLフォームとして 設定することはできませんが 、 更新されたフォームエディターでは使用できません。未加工のHTMLとして設定できるのは、 旧バージョンのフォームエディター を使用して作成されたフォームのみです。
• フォームの埋め込みコードをカスタマイズするには、JavaScriptに精通した開発者による支援が必要になります。さらに高度なカスタマイズには、カスタムビルドのフォームとHubSpotフォームAPIを使用することが可能です。

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

フォームとフォームステップのテキスト、入力フィールド、ボタン、背景をカスタマイズします。フォームスタイルのカスタマイズは、すべてのフォームステップに適用されます。個別のフォームステップのスタイルを設定することはできません。 

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

スタンドアロン フォーム ページを共有 

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

共有リンクをコピーするには、次の手順に従います。

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

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

フォームの埋め込みコードをコピーして外部ページに貼り付けることにより、フォームを外部ページに埋め込みます。埋め込みフォームのアナリティクスを追跡するには、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変数は、こちらの記事に記載されています。
   • グローバルスタイルは、全ての埋め込みフォームの最上位のスタイル設定よりも優先されます。フォーム要素の行、送信ボタン、フォームの見出しなど、フォームの個々の要素を対象にすることもできます。