メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

HubSpotページのフォームをセットアップしてスタイル設定

更新日時 2025年10月7日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

HubSpotで フォームを作成すると 、ウェブページやランディングページで任意のフォームモジュール に追加できるようになります。各ページでは、 フォーム送信後の動作を設定したり、送信ボタンやフォームフィールドなどフォームの要素のスタイルをカスタマイズすることもできます。

始める前に

HubSpotページでフォームを設定する前に、次のことに注意してください。 

  • 設定やスタイルの変更は、選択されたページ内のフォームモジュールにのみ適用されます。つまり、あるページで設定やスタイルを変更しても、その他のページ上にあるフォームは変更されません
  • フォームの要素(フォームフィールドなど)を更新した場合は、埋め込みフォームのあるページやスタンドアロン フォーム ページを含む、全てのページでフォームが更新されます。 

HubSpotページでフォームをセットアップ

  1. 目的のコンテンツに移動します。

    • ウェブサイトページ:HubSpotアカウントにて、[コンテンツ]>[ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[コンテンツ]>[ランディングページ]の順に進みます。
  2. ページ の名前をクリックします
  3. コンテンツエディターでフォーム モジュールをクリックします。現在ページにフォームモジュールがない場合は、ページにモジュールを 追加する方法をご確認ください
  4. サイドバーエディターの[コンテンツ]タブで、このページのフォームの設定をカスタマイズします。
    • [フォームタイトル]:フォームの名前を入力します。
    • フォーム: このページの フォーム を選択します。
      • 既存のフォームを使用する場合はドロップダウンメニューをクリックし、フォームを選択します。 
      • 新しいフォームを作成して使用するには、[アクション]をクリックします。次に、[新しいフォームを作成]を選択します。フォームの設定について詳細をご確認ください。
      • このフォームの送信を表示するには、[アクション]をクリックします。次に、[フォーム送信を表示]を選択します。
      • フォームエディターでフォームを編集するには、[アクション]をクリックします。次に、[フォームエディターに移動]を選択します。 

コンテンツエディター内のフォームモジュールのスクリーンショット。[アクション]ドロップダウンメニューが開き、[フォーム送信を表示]、[フォームエディターに移動]、[新規フォームを作成]のオプションが表示されます。


フォームの自動化を設定する

フォローアップ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キャンペーンに関連付ける方法について詳しくは、こちらをご覧ください。

[指定されたEメールアドレスにフォーム通知を送信]とドロップダウンメニューの[Salesforceキャンペーン]のチェックボックスが選択されているフォームモジュールのサイドバーエディターのスクリーンショット。

HubSpotページ上のフォームをスタイル設定する

フォーム全体のスタイルをカスタマイズしたり、送信ボタンやフォームフィールドの特定のスタイルを変更したりできます。フォームのスタイルをカスタマイズするには、次の手順に従います。

  1. 目的のコンテンツに移動します。
    • ウェブサイトページ:HubSpotアカウントにて、[コンテンツ]>[ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[コンテンツ]>[ランディングページ]の順に進みます。
  2. ページ の名前をクリックします
  3. コンテンツエディターでフォーム モジュールをクリックします。現在ページにフォームモジュールがない場合は、ページにモジュールを 追加する方法をご確認ください
  4. サイドバーエディターの上部にある[ スタイル ]タブをクリックします。
  5. [ モジュール]、[フィールド]、または[ボタン]タブをクリックして、スタイルを設定するフォームの要素を選択します。
  6. 以下のテキストとアラインメントオプションを使用して、フォームの選択された要素をカスタマイズします。
  7. 右上の [公開]または[更新]をクリックして、変更内容を公開します。

注:フォームのスタイルはページごとに設定できます。外部ウェブサイトへの埋め込みフォーム 、または スタンドアロン フォーム ページの スタイルを設定したい場合、 フォームエディター 、もしくは外部スタイルシートの CSSを使用する必要があります


フォームモジュールのサイドバーエディターで、[スタイル]タブが選択され、[表示]、[位置合わせと間隔]、[タイポグラフィー]、[背景]の各セクションが表示されているスクリーンショット。

 

この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。