HubSpotフォーム
Marketing Hub
- Starter or Enterprise
Sales Hub
- Starter, Professional, or Enterprise
Service Hub
- Starter, Professional, or Enterprise
CMS Hub
- Professional or Enterprise
HubSpotフォームを使用して、HubSpot全体でアクセスできる情報をユーザーから取得します。取得されたフォームデータは、スマートコンテンツ、リスト、ワークフロー、コンテンツのパーソナライズなどのアセットで使用できます。
フォームはHubSpotの中核となる要素であり、どのサブスクリプションレベルのHubSpotアカウントでも作成できます。フォームへのリンクをユーザーと直接共有し、APIを介してフォームデータを送信して、CMSを使用してウェブサイトページに埋め込むことができます。
このガイドでは、CMSを使用してウェブサイトにフォームを組み込む方法について詳しく説明します。HubSpotでフォームを作成する方法については、HubSpotのナレッジベースをご覧ください。
作成したHubSpotフォームは、テンプレートやページに追加できます。フォームをテンプレートに追加するための方法は複数用意されているため、どの方法を選ぶかは用途に応じて異なります。次の方法を使用してテンプレートにフォームを追加する方法について以下で説明します。
フォームモジュールを使用する
既定のフォームモジュールを使用した場合、コンテンツ作成者はフォームを選択し、ページエディター内でフォームオプションを構成できます。これを有効にするには、テンプレートのドラッグ&ドロップエリアにフォームモジュールを追加します。
コードテンプレートでドラッグ&ドロップエリアを使用していない場合は、次の構文を使用してフォームモジュールを生成できます。このタグを使用して、特定のフォームやリダイレクトオプションを設定するなど、フォームの詳細を指定することもできます。フォームHubLタグを使用する方法については、以下のセクションをご覧ください。
画像やテキストブロックなどのコンテンツと共にフォームを組み込んだカスタムモジュールを作成することもできます。これを行うには、フォームフィールドを使用するか、既存のフォームモジュールを複製し、それを基準に新しいモジュールを作成します。
フォームフィールドはフォームモジュールの簡易版で、次のような基本的なフォーム機能があります。
オプション | 説明 |
---|---|
フォーム選択ドロップダウン | コンテンツ作成者が既存のフォームを選択するためのドロップダウンメニュー。 |
フォーム送信リダイレクト | フォーム送信時に、フォームを送信したユーザーをリダイレクトするか、インラインのサンキューメッセージを表示するかを選択するオプション。 |
リダイレクトリンク | 送信したユーザーをリダイレクトする場合は、ユーザーのリダイレクト先となるページのURLを入力します。 |
サンキューメッセージ | インラインのサンキューメッセージを表示する場合は、ここにメッセージを入力できます。 |
フォームフィールドをデザインマネージャーのモジュールに追加するには、[フィールドの追加]>[セレクター]>[フォーム]オプションの順に選択します。
次に、フォームフィールドのスニペットをコピーしてカスタムモジュールに追加できます。エディターのフィールドの上で、[アクション]>[スニペットをコピー]の順に選択します。
既定のフォームモジュールを複製した場合、上記のフォームフィールドにある次のような全ての機能を利用できます。
オプション | 説明 |
---|---|
タイトル | レンダリングされたフォームの上に表示するタイトルを追加します。 |
Eメール通知の変更 | フォーム通知用の既定のEメールアドレスを変更するかどうかの切り替え。オンに切り替えると、新しいEメールアドレスを追加するテキストフィールドが表示されます。 |
ワークフローに追加 | 送信を、指定のワークフローに登録するかどうかの切り替え。オンに切り替えると、ワークフローを選択するドロップダウンが表示されます。 |
フォローアップEメール | フォームが送信された後にフォローアップEメールを送るかどうかの切り替え。オンに切り替えると、フォローアップEメールを選択するドロップダウンが表示されます。既存のものがない場合は、新規作成のオプションが表示されます。 |
Salesforceキャンペーン | フォームを送信したコンタクトを登録するSalesforceキャンペーンを指定します。Salesforceとの連携がインストールされている場合にのみ使用できます。 |
GoToWebinarリンク | フォームを送信したコンタクトを登録するGoToWebinarウェビナーを指定します。GoToWebinarとの連携がインストールされている場合にのみ使用できます。 |
既定のフォームモジュールと併せて使用できる追加のオプションにより、さらにフォームを作成できます。<section>
タグに囲まれ、セクションに背景色を追加するための色フィールドが追加で指定されている、複製された既定モジュールの例を以下に示します。
前述のようにスニペットをコピーすると、モジュール フォーム フィールドにHubLフォームタグが生成されます。HubLタグには、設定可能なさまざまなパラメーターがあります。デザインマネージャーでの作業時に、スニペットのコピー機能を使用するのが最も簡単です。ローカルで作業する場合は、使用可能な全てのパラメーターを詳しく説明したHubLタグドキュメントを参照してください。
モジュールやHubLタグを使用するのが理想的ではないページ(外部ページなど)に、JavaScript埋め込みコードを使用してフォームを追加することができます。この方法では、詳細オプションを使用してフォームの機能を拡張することもできます。以下に、機能拡張を含むフォーム埋め込みコードのサンプルを示します。
HubSpotにはグローバル設定のフォームスタイルとフォーム固有の設定がありますが、フォームをどのようにCMSページに追加するかに応じてフォームのスタイルを設定することもできます。
注意:CMS Hub上に生成された全てのフォーム(フォーム埋め込みコードを使用した場合を除く)では、グローバルフォーム設定またはフォーム固有の設定に指定された全てのスタイルが無視されます。
HubSpotページに追加されたHubSpotフォームのスタイルを設定するには、ウェブサイトのCSSを使用します。HubSpotには、生成されるフォームにさまざまなクラスと属性が用意されていて、スタイルを適用できます。出発点として、HubSpotボイラープレートのフォームCSSを参照してください。フォームのスタイル設定に関するベストプラクティスが示されています。
カスタムモジュール内のフォームのスタイルを設定するには、デザインマネージャー内のモジュールのCSSペインでCSSを使用します。CSSをモジュールに適用したままにすることで、モジュールがページに追加された場合には必ず、スタイル設定も伴うようになります。フォームにラッパーを追加し、そのラッパーをCSSの最上位のセレクターとして使用することをお勧めします。その結果、ウェブサイトのメインのスタイルシートに定義されている追加のスタイルによって、カスタムモジュールのフォームスタイルが上書きされることを防止できます。以下に、上記のカスタムモジュールのスクリーンショットを示します。フォームスタイル設定がCSSペインに追加されています。
フォーム埋め込みコードを使って追加したフォームのスタイルを設定する
フォーム埋め込みコードを使用する場合は、グローバル フォーム スタイル設定またはウェブサイトのCSSを使用してフォームのスタイルを設定できます。
グローバル フォーム スタイル設定を使用すると、アカウント内の全てのフォームの既定の設定を構成できます。フォームエディター内の個別のフォームに対し、これらのスタイルを上書きすることもできます。
ウェブサイトのCSSを使用してフォームのスタイルを設定する場合は、まずフォームエディター内で[未加工のHTMLフォームとして設定]オプションをオンにする必要があります。こうすると、フォームをiframeではなく、HTMLとしてページに表示できるようになるため、スタイル設定が容易になります。ナレッジベースで埋め込みフォームのスタイル設定に関する詳細をご確認ください。
貴重なご意見をありがとうございました。