HubSpotフォーム

Last updated:
APPLICABLE PRODUCTS
  • 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フォームは、テンプレートやページに追加できます。フォームをテンプレートに追加するための方法は複数用意されているため、どの方法を選ぶかは用途に応じて異なります。次の方法を使用してテンプレートにフォームを追加する方法について以下で説明します。

フォームモジュールを使用する

既定のフォームモジュールを使用した場合、コンテンツ作成者はフォームを選択し、ページエディター内でフォームオプションを構成できます。これを有効にするには、テンプレートのドラッグ＆ドロップエリアにフォームモジュールを追加します。   

{% dnd_area "dnd_area" class='body-container body-container__landing', label='Main section' %} {% dnd_section vertical_alignment='MIDDLE' %} {% dnd_column width=6, offset=6 %} {% dnd_row %} <!-- Form module tag for use in templates --> {% dnd_module path='@hubspot/form' %} {% end_dnd_module %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_section %} {% end_dnd_area %}

コードテンプレートでドラッグ＆ドロップエリアを使用していない場合は、次の構文を使用してフォームモジュールを生成できます。このタグを使用して、特定のフォームやリダイレクトオプションを設定するなど、フォームの詳細を指定することもできます。フォームHubLタグを使用する方法については、以下のセクションをご覧ください。

{% module "form" path="@hubspot/form" %}

カスタムモジュールを使用する

画像やテキストブロックなどのコンテンツと共にフォームを組み込んだカスタムモジュールを作成することもできます。これを行うには、フォームフィールドを使用するか、既存のフォームモジュールを複製し、それを基準に新しいモジュールを作成します。 

フォームフィールドはフォームモジュールの簡易版で、次のような基本的なフォーム機能があります。

オプション 説明
フォーム選択ドロップダウン コンテンツ作成者が既存のフォームを選択するためのドロップダウンメニュー。 
フォーム送信リダイレクト フォーム送信時に、フォームを送信したユーザーをリダイレクトするか、インラインのサンキューメッセージを表示するかを選択するオプション。
リダイレクトリンク 送信したユーザーをリダイレクトする場合は、ユーザーのリダイレクト先となるページのURLを入力します。
サンキューメッセージ インラインのサンキューメッセージを表示する場合は、ここにメッセージを入力できます。

フォームフィールドをデザインマネージャーのモジュールに追加するには、［フィールドの追加］＞［セレクター］＞［フォーム］オプションの順に選択します。

フォームフィールドをモジュールに追加する

次に、フォームフィールドのスニペットをコピーしてカスタムモジュールに追加できます。エディターのフィールドの上で、［アクション］＞［スニペットをコピー］の順に選択します。

フィールドのフォームスニペットをコピーする

既定のフォームモジュールを複製した場合、上記のフォームフィールドにある次のような全ての機能を利用できます。

オプション 説明
タイトル レンダリングされたフォームの上に表示するタイトルを追加します。
Eメール通知の変更 フォーム通知用の既定のEメールアドレスを変更するかどうかの切り替え。オンに切り替えると、新しいEメールアドレスを追加するテキストフィールドが表示されます。
ワークフローに追加 送信を、指定のワークフローに登録するかどうかの切り替え。オンに切り替えると、ワークフローを選択するドロップダウンが表示されます。
フォローアップEメール フォームが送信された後にフォローアップEメールを送るかどうかの切り替え。オンに切り替えると、フォローアップEメールを選択するドロップダウンが表示されます。既存のものがない場合は、新規作成のオプションが表示されます。
Salesforceキャンペーン フォームを送信したコンタクトを登録するSalesforceキャンペーンを指定します。Salesforceとの連携がインストールされている場合にのみ使用できます。
GoToWebinarリンク フォームを送信したコンタクトを登録するGoToWebinarウェビナーを指定します。GoToWebinarとの連携がインストールされている場合にのみ使用できます。

既定のフォームモジュールと併せて使用できる追加のオプションにより、さらにフォームを作成できます。<section>タグに囲まれ、セクションに背景色を追加するための色フィールドが追加で指定されている、複製された既定モジュールの例を以下に示します。

複製したフォームモジュールへの追加

フォームHubLタグを使用する

前述のようにスニペットをコピーすると、モジュール フォーム フィールドにHubLフォームタグが生成されます。HubLタグには、設定可能なさまざまなパラメーターがあります。デザインマネージャーでの作業時に、スニペットのコピー機能を使用するのが最も簡単です。ローカルで作業する場合は、使用可能な全てのパラメーターを詳しく説明したHubLタグドキュメントを参照してください。

{% module "form" path="@hubspot/form" form={ "form_id": "9e633e9f-0634-498e-917c-f01e355e83c6", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" } %}

フォーム埋め込みコードを使用する

モジュールやHubLタグを使用するのが理想的ではないページ（外部ページなど）に、JavaScript埋め込みコードを使用してフォームを追加することができます。この方法では、詳細オプションを使用してフォームの機能を拡張することもできます。以下に、機能拡張を含むフォーム埋め込みコードのサンプルを示します。 

<!--[if lte IE 8]> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script> <![endif]--> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> <script> hbspt.forms.create({ portalId: "[YourPortalIdHere]", formId: "00000000-0000-0000-0000-000000000000", cssClass: "class-applied-to-form", submitButtonClass: "class-applied-to-submit-button", onFormSubmit: function($form) { // YOUR SCRIPT HERE } }); </script>

フォームのスタイル設定

HubSpotにはグローバル設定のフォームスタイルとフォーム固有の設定がありますが、フォームをどのようにCMSページに追加するかに応じてフォームのスタイルを設定することもできます。

注意：CMS Hub上に生成された全てのフォーム（フォーム埋め込みコードを使用した場合を除く）では、グローバルフォーム設定またはフォーム固有の設定に指定された全てのスタイルが無視されます。 

既定のフォームモジュールまたはHubLタグを使ってフォームのスタイルを設定する

HubSpotページに追加されたHubSpotフォームのスタイルを設定するには、ウェブサイトのCSSを使用します。HubSpotには、生成されるフォームにさまざまなクラスと属性が用意されていて、スタイルを適用できます。出発点として、HubSpotボイラープレートのフォームCSSを参照してください。フォームのスタイル設定に関するベストプラクティスが示されています。

カスタムモジュールを使ってフォームのスタイルを設定する

カスタムモジュール内のフォームのスタイルを設定するには、デザインマネージャー内のモジュールのCSSペインでCSSを使用します。CSSをモジュールに適用したままにすることで、モジュールがページに追加された場合には必ず、スタイル設定も伴うようになります。フォームにラッパーを追加し、そのラッパーをCSSの最上位のセレクターとして使用することをお勧めします。その結果、ウェブサイトのメインのスタイルシートに定義されている追加のスタイルによって、カスタムモジュールのフォームスタイルが上書きされることを防止できます。以下に、上記のカスタムモジュールのスクリーンショットを示します。フォームスタイル設定がCSSペインに追加されています。

CSSを使用したカスタムモジュール

フォーム埋め込みコードを使って追加したフォームのスタイルを設定する

フォーム埋め込みコードを使用する場合は、グローバル フォーム スタイル設定またはウェブサイトのCSSを使用してフォームのスタイルを設定できます。

グローバル フォーム スタイル設定を使用すると、アカウント内の全てのフォームの既定の設定を構成できます。フォームエディター内の個別のフォームに対し、これらのスタイルを上書きすることもできます。

グローバル フォーム スタイル

ウェブサイトのCSSを使用してフォームのスタイルを設定する場合は、まずフォームエディター内で［未加工のHTMLフォームとして設定］オプションをオンにする必要があります。こうすると、フォームをiframeではなく、HTMLとしてページに表示できるようになるため、スタイル設定が容易になります。ナレッジベースで埋め込みフォームのスタイル設定に関する詳細をご確認ください。

未加工のHTMLフォームとして設定する

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