HubSpotページのフォームをセットアップしてスタイル設定
更新日時 2025年7月30日
以下の 製品でご利用いただけます(別途記載されている場合を除きます)。
|
HubSpotでフォームを作成すると、HubSpotページで任意のフォームモジュールにそのフォームを追加できるようになります。各ページで、フォームが送信された後のアクションを設定することや、送信ボタンやフォームフィールドといったフォームの要素のスタイルをカスタマイズすることもできます。
始める前に
HubSpotページでフォームの設定を始める前に、以下の点にご注意ください。
- 設定やスタイルの変更は、選択されたページ内のフォームモジュールにのみ適用されます。つまり、あるページで設定やスタイルを変更しても、その他のページ上にあるフォームは変更されません。
- フォームの要素(フォームフィールドなど)を更新した場合は、埋め込みフォームのあるページやスタンドアロン フォーム ページを含む、全てのページでフォームが更新されます。
フォームをセットアップする
HubSpotページでフォームを設定するには、次の手順に従います。
-
コンテンツに移動します。
- ウェブサイトページ:HubSpotアカウントにて、[コンテンツ]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[コンテンツ]>[ランディングページ]の順に進みます。
- ページの名前をクリックします。
- コンテンツエディターでフォームモジュールをクリックします。現在ページにフォームモジュールが追加されていない場合は、ページにモジュールを追加する方法をご確認ください。
- 左側のパネルの[コンテンツ]タブで、このページにおけるフォームの設定をカスタマイズします。
- [フォームタイトル]:フォームの名前を入力します。
- フォームを選択:このページに追加するフォームを選択します。
- 既存のフォームを使用する場合はドロップダウンメニューをクリックし、フォームを選択します。
- 新しいフォームを作成して使用するには、[アクション]をクリックします。続けて、[新規フォームを作成]を選択します。フォームの設定について詳細をご確認ください。
- このフォームの送信を表示するには、[アクション]をクリックします。次に、[フォーム送信を表示]を選択します。
-
-
- フォームエディターでフォームを編集するには、[アクション]をクリックします。次に、[フォームエディターへ]を選択します。
- フォームエディターでフォームを編集するには、[アクション]をクリックします。次に、[フォームエディターへ]を選択します。
-
フォームの自動化を設定する
フォローアップEメールやフォームに関連付けられているワークフローなど、フォームの自動化を管理できます。登録トリガーは、以下の動作の対象となります。
- フォームモジュールの自動化設定でワークフローを追加すると、対応するフォーム送信の登録トリガーがワークフローに追加されます。
- フォームモジュールの自動化設定からワークフローを削除すると、ワークフローの登録トリガーからも削除されます。
- ワークフローで使用されるフォーム登録トリガーでページが指定されていない場合、トリガーをページから削除することはできないため、ワークフローからトリガーを削除する必要があります。
フォームの自動化設定を行うには、左パネルで[フォームの自動化]セクションをクリックして展開し、以下の自動化オプションを確認します。
- Eメールを使用してフォローアップ:フォームを送信した全ての訪問者にフォローアップEメールを送信します。フォローアップEメールは、マーケティングコンタクトにのみ送信できます。
- フォローアップEメールを追加するには、次の手順に従います。
- [Eメールを選択+]をクリックします。
- ダイアログボックスで、[Eメールを選択]ドロップダウンメニューをクリックし、既存の自動Eメールを選択するか、[新規Eメールを作成]をクリックし、新規自動Eメールを作成します。
- [保存]をクリックします。選択したフォローアップEメールが左パネルに表示されます。
- フォローアップEメールの設定が完了したら、右上の[公開]または[更新]をクリックし、変更を公開します。なお、変更が公開されるまで、フォローアップEメールは送信されません。
- フォローアップEメールを追加するには、次の手順に従います。
-
- 使用するフォローアップEメールを変更するには、Eメールにカーソルを合わせ、Eメールの横にある鉛筆アイコンをクリックします。
- フォローアップメールを削除するには、Eメールにカーソルを合わせ、Eメールの横にあるXアイコンをクリックします。これで、Eメールは表示されなくなります。
- 接続済みワークフロー:フォームを登録トリガーとして使用しているワークフローとシンプルワークフローが全て表示されます。フォームで自動化を使用する方法について詳細をご確認ください。
- ワークフローのトリガーとしてフォームを使用するには、[フォームをワークフローに追加]または[フォームを別のワークフローに追加]をクリックします。
- [フォームをワークフローに追加]をクリックします。
- 既存のワークフローを選択するか、[新規ワークフローを作成]をクリックして新しいワークフローを作成します。新しいワークフローを作成する場合は、ワークフローの編集画面でワークフローを作成してから、ランディングページまたはウェブサイトページ上のフォームモジュールに戻ります。
- 別のワークフローを追加するには、[フォームを別のワークフローに追加]をクリックして、既存のワークフローを選択するか、[新規ワークフローを作成]をクリックします。
- ワークフローのトリガーとしてのフォームを削除するには、ワークフローにカーソルを合わせ、ワークフローの横にある削除アイコンをクリックします。
- ワークフローのトリガーとしてフォームを使用するには、[フォームをワークフローに追加]または[フォームを別のワークフローに追加]をクリックします。
注:
- ワークフローがフォームモジュールに関連付けられると、ページがまだ公開または更新されていない場合でも、ワークフローの登録トリガーが直ちに更新されます。
- ワークフローにコンタクトを登録するように設定されたフォームが含まれるHubSpotページを複製する場合、複製される新しいページ上のフォーム送信は、ワークフローに新しい登録トリガーとして追加されません。
追加のフォームオプションを設定する
フォーム通知の受信者を選択するなどの追加設定も行うことができます。また、HubSpotとSalesforceとの連携をインストールしている場合、フォームを有効なSalesforceキャンペーンに関連付けることもできます。
左のパネルの一番下までスクロールすると、以下のフォームの追加オプションを設定できます。
- フォームのデフォルト設定ではなく、指定されたEメールアドレスにフォーム通知を送信:デフォルトで、フォーム送信通知は、フォームの[オプション]タブに追加された全ての受信者に送信されます。フォームのデフォルトの受信者を上書きし、このページのフォーム送信通知の受信者を選択するには、次のようにします。
- [フォームのデフォルト設定ではなく、指定されたEメールアドレスにフォーム通知を送信]チェックボックスをオンにします。
- [Eメールアドレス]ドロップダウンメニューをクリックし、受信者を選択します。フォーム通知の受信者として選択できるのは、HubSpotユーザーのみです。
- 受信者を削除するには、受信者のEメールアドレスの横にあるXアイコンをクリックします。
- Salesforceキャンペーン:Salesforceとの連携が有効になっている場合、ドロップダウンメニューをクリックしてキャンペーンを選択することで、有効なSalesforceキャンペーンにフォームを関連付けることができます。フォームをSalesforceキャンペーンに関連付ける方法をご確認ください。
HubSpotページ上のフォームをスタイル設定する
フォーム全体のスタイルをカスタマイズしたり、送信ボタンやフォームフィールドの特定のスタイルを変更したりできます。フォームのスタイルをカスタマイズするには、次の手順に従います。
- コンテンツに移動します。
- ウェブサイトページ:HubSpotアカウントにて、[コンテンツ]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[コンテンツ]>[ランディングページ]の順に進みます。
- ページの名前をクリックします。
- コンテンツエディターでフォームモジュールをクリックします。現在ページにフォームモジュールが追加されていない場合は、ページにモジュールを追加する方法をご確認ください。
- 左側パネルの上部で、[スタイル]タブをクリックします。
- [モジュール]、[フィールド]、[ボタン]のいずれかのタブをクリックし、スタイルを設定するフォームの要素を選択します。
- 以下のテキストとアラインメントオプションを使用して、フォームの選択された要素をカスタマイズします。
- [公開]または[更新]をクリックして、変更内容を公開します。
注:フォームのスタイルはページごとに設定できます。外部ページの埋め込みフォームまたはスタンドアロン フォーム ページのスタイルを設定するには、フォームエディターまたは外部スタイルシートのCSSを使用する必要があります。