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

ウェブページやランディングページにおけるフォームの設定とカスタマイズ

更新日時 2023年 12月 19日

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

すべての製品とプラン

HubSpotでフォームを作成した後、HubSpotページ上の任意のフォームモジュールに追加することができます。各ページで、フォームが送信された後のアクションを設定することや、送信ボタンやフォームフィールドといったフォームの要素のスタイルをカスタマイズすることも可能です。

設定を始める前に

ウェブページやランディングページでフォームの設定を始める前に、以下の点にご注意ください。 

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

フォームの設定

HubSpotのページでフォームを設定する手順は、以下の通りです。
  • HubSpotアカウントで、ランディングページまたはウェブサイトページに移動します。
  • フォームモジュールのある既存のページにマウスポインターを合わせ、編集、または新しいページを作成をクリックします。
  • ページの編集画面でフォームのモジュールをクリックします。ページにフォームのモジュールが追加されていない場合、共通モジュールを追加する方法をご覧ください。 
  • 左側のパネルの[コンテンツ]タブで、編集しているページにおけるフォームの設定をカスタマイズします。
    • [フォームタイトル]:このページでのフォームの名前を入力します。
    • [フォームを選択]:このページに追加するフォームを選択します。
      • 既存のフォームを使用する場合はドロップダウンメニューをクリックし、追加したいフォームを選択します。 
      • 新規フォームを作成して追加するには、[アクション]ドロップダウンメニューで[新規フォームを作成]をクリックします。セットアップフォームについて詳しくはこちら
      • フォームの送信状況を表示するには、[アクション]ドロップダウンメニューで[フォーム送信を表示]をクリックします。
      • フォームを複製するには、[アクション]ドロップダウンメニューで[フォームを複製]をクリックします。
      • 選択したフォームを使用している他のページを確認するには、、[アクション]ドロップダウンメニューで[このフォームを使用するページ]をクリックします。
      • フォームエディターでフォームを編集するには、[アクション]ドロップダウンメニューで[完全なフォームエディターへ]をクリックします。



フォーム内容のカスタマイズ

以下の手順で、フォームフィールド、ボタンテキスト、データのプライバシーと同意オプションを編集できます。

  • [フォームコンテンツ]の右横にある矢印をクリックするとセクションを展開します。
  • フォームの内容を設定します。 
    • フォームフィールド:フィールドをクリックしてドラッグすると、フォームに表示される順番を編集できます。ただし、複数列フォーム内のフィールド、またはカスタムモジュールの一部になっているフォームフィールドはドラッグ&ドロップすることはできません。フォームフィールドを追加するには、
      • [+別のフォームフィールドを追加]をクリックします。
      • [プロパティーを選択する]ドロップダウンメニューをクリックし、検索バーでフィールドを検索します。 
      • 希望するプロパティーをクリックして、フォームフィールドとして追加します。 
    • [ボタンテキスト]送信ボタンに表示するテキストを入力してください。
    • [データのプライバシーと同意のオプション]:ドロップダウンメニューで、フォームに表示する通知と同意情報を選択します。
    • [CAPTCHA(スパム防止)]:非表示のGoogle reCAPTCHAを表示する場合は、スイッチをクリックしてオンに切り替えます。

注:フォームコンテンツを更新すると、フォームが使用されているその他のページ(埋め込みフォームを使用したページやスタンドアロン フォーム ページを含む)も更新されます。



KB - ドラッグ・ドロップ・フィールド・フォーム HubSpot-1 

送信後のアクションの設定 

既定では、HubSpotのランディングページやウェブサイトページに追加されたフォームが送信されると、「フォームのご送信ありがとうございます。」というメッセージがインラインで表示されるように設定されており、フォームエディターで設定された送信後のアクションは、実行されません

この設定を変更したい場合、ページの編集画面で送信後のアクションをカスタマイズできます。以下の手順に従って、フォーム送信後の動作を設定します。

  • [サンキュー]の右横にある矢印をクリックして、セクションを展開します。
  • [フォーム送信後に訪問者に何を表示しますか?]で、以下のいずれかを選択します。 
    • [別のページにリダイレクト]:フォーム送信後に訪問者を別のページにリダイレクトします。
      • [別のページにリダイレクト]を選択します。
      • [リダイレクトリンク]ドロップダウンメニューをクリックし、既存のHubSpotページを選択するか、外部リンクのURLを入力します。
    • [メッセージをインラインで表示する]:訪問者がフォームを送信した後にメッセージを表示します。[サンキューメッセージ]テキストボックスで、お礼のメッセージを編集できます。

 

フォーム自動化の設定

フォームの自動化(コンタクト作成、マーケティングEメールオプション、フォームに関連付けされているワークフローなど)を管理できます。登録トリガーは、以下の動作の対象となります。

  • フォームモジュールの自動化設定でフォームをワークフローを追加すると、フォーム送信の登録トリガーがワークフローにも追加されます。
  • フォームモジュールの自動化設定でフォームをワークフローから削除すると、ワークフローの登録トリガーからも削除されます。
  • 使用されるフォーム登録トリガーでページが指定されていない場合、トリガーをページから削除することはできません。この場合は、ワークフローからトリガーを削除する必要があります。

フォームの自動化設定を行うには、左パネルでフォームの自動化セクションをクリックして展開し、以下の自動化オプションを確認します。

フォームモジュール内の新フォームの自動化セクション

  • [新しいEメールアドレスで常にコンタクトを作成]:フォーム送信のユーザートークンが既存のコンタクトと一致(英語)しても、新しいコンタクトレコードを作成します。 
  • [作成されたコンタクトをマーケティングコンタクトに設定]:フォームで作成されたコンタクトをマーケティングコンタクトとして設定します。
  • [Eメールを使用してフォローアップする]:フォームを送信した全ての訪問者にEメールを自動的に送信します。フォローアップEメールを送信できるのは、マーケティングコンタクトのみです。 
    • フォローアップEメールの追加
      • [Eメールを選択+]をクリックします。
      • ダイアログボックスで、[自動配信Eメールを選択]ドロップダウンメニューをクリックし、既存の自動メールを選択するか、[新規Eメールを作成]をクリックし、新しい自動配信Eメールを作成します。
      • [保存]をクリックします。選択したEメールは左のパネルに表示されます。 
      • フォローアップEメールの設定が完了したら、右上の[公開]または[更新]をクリックし、変更を公開します。なお、変更が公開されるまで、フォローアップEメールは送信されません。 
    • 使用するフォローアップメールを変更するには、Eメールにマウスポインターを合わせ、Eメールの横にある鉛筆のアイコンをクリックします。 
    • フォローアップメールを削除するには、Eメールにマウスポインターを合わせ、Eメールの横にあるXアイコンをクリックします。これで、Eメールは表示されなくなります。 
    • フォームが以前に旧バージョンのフォローアップEメールに関連付けされていた場合、「このフォームでは旧バージョンのフォローアップEメールが使用されています。」という警告が表示されます。旧バージョンのフォローアップEメールは編集できませんが、過去に送信されたEメールであれば、自動送信Eメールとして更新することによって編集できるようになります。 
      • 以前に送信した旧バージョンのフォローアップメールを編集可能な自動送信メールに更新するには、[Eメールを更新]をクリックして、[更新]ボタンをクリックします。Eメールが以前に送信されていない場合、このオプションは表示されません。 
      • 送信済み、または未送信の旧バージョンのフォローアップEメールを削除するには、[削除]をクリックして、[保存]ボタンをクリックします。 
  • [接続済みワークフロー]:任意のワークフローと、フォームを登録トリガーとして使用するシンプルなワークフローが表示されます。フォームで自動化を使用する方法に関して、詳しくはこちらのナレッジベース記事をご覧ください。 
    • ワークフローのトリガーとしてフォームを使用したい場合、以下のいずれかの手順で設定します。 
      • [フォームをワークフローに追加]をクリックします。
      • 既存のワークフローを選択するか、[新規ワークフローを作成]をクリックして新しいワークフローを作成します。新しいワークフローを作成する場合は、ワークフローを設定した後、ランディングページや「ウェブ」サイトのページでフォームモジュールに戻ります。 
    • 別のワークフローを追加するには、[フォームを別のワークフローに追加]をクリックし、既存のワークフローを選択するか、[新規ワークフローを作成]をクリックします。
    • ワークフローのトリガーからフォームを削除するには、ワークフローにカーソルを合わせ、ワークフローの横にある削除アイコンをクリックします。 

注:







フォームの追加オプションの設定

フォーム通知の受信者を選択するなどの追加設定を行えます。また、HubSpotとSalesforceの連携をインストールした場合、フォームを有効なSalesforceキャンペーンに関連付けることもできます。

左のパネルの一番下までスクロールすると、以下のフォームの追加オプションを設定できます。

  • [フォームの既定設定ではなく、指定されたEメールアドレスにフォーム通知を送信]:既定では、フォーム送信通知は、フォームの[オプション]タブに追加された全ての受信者に送信されます。を上書きするにはフォームのデフォルトの受信者と、このページで送信の通知先を選択します:
    • [フォームの既定設定ではなく、指定されたEメールアドレスにフォーム通知を送信]チェックボックスをクリックします。
    • [Eメールアドレス]ドロップダウンメニューから、送信者を選択します。フォーム通知の受信者を選択できるのは、HubSpotユーザーのみになります。 
    • 受信者を削除するには、Eメールアドレスの横にあるXアイコンをクリックします。 
  • [Salesforceキャンペーン]:Salesforce連携が有効になっている場合、ドロップダウンメニューをクリックしてキャンペーンを選択することで、フォームを有効なSalesforce キャンペーンと関連付けることができます。フォームと Salesforce キャンペーンとの関連付けについて詳しくはこちら .

ページ上でのフォームスタイルのカスタマイズ

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

  • 左側のパネルで[スタイル]タブをクリックします。
  • [モジュール]、[フィールド]、[ボタン]のいずれかのタブを選び、スタイルを設定したいフォームの要素をクリックします。
  • 要素をクリックすると、設定オプションが表示されます。これらの設定オプションを使用して、フォームの要素をカスタマイズします。
  • [公開]または[更新]をクリックして、変更内容を公開します。

注:フォームのスタイルはページごとに設定できます。外部ページへの埋め込みフォームまたは独立したフォームページは、フォームエディターでスタイルを設定するか、外部スタイルシートの CSSスタイルを設定してください。


 

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