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

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

更新日時 2023年 6月 1日

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

すべての製品とプラン

HubSpotでフォームを作成した後、HubSpotページ上の任意のフォームモジュールに追加することができます。

また、各ページでは、フォームが送信された後の処理を設定したり、送信ボタンやフォームフィールドなど、フォームの要素のスタイリングをカスタマイズすることができます。

注意:の設定やスタイリングの変更は、選択したページのフォームモジュールにのみ適用され、他のページのフォームに影響を与えることはありません。ただし、フォームフィールドなどのフォームコンテンツを更新すると、埋め込みフォームやスタンドアロンフォームページなど、他のすべてのページでフォームが更新されます。 

フォームをセットアップする

HubSpotのページにフォームを設置する場合:
  • HubSpotアカウントで、ランディングページまたはウェブサイトページに移動します。
  • フォームモジュールのある既存のページにカーソルを合わせ、編集、または新しいページを作成をクリックします。
  • ページエディターでフォームモジュールをクリックします。もし、あなたのページに現在フォームモジュールがない場合は、ページにモジュールを追加する方法をご覧ください
  • 左パネルのコンテンツタブで、このページ用にフォームの設定をカスタマイズします:
    • フォームタイトル:フォームの名を入力してください。
    • フォームを選択する:このページのフォームを選択してください。
      • 既存のフォームを使用する場合は、ドロップダウンメニューをクリックし、フォームを選択してください。 
      • 新しいフォームを作成して使用するには、「アクション」 > 「新しいフォームを作成」をクリックします。セットアップフォームについて詳しくはこちら
      • このフォームの送信を表示するには、アクション > フォームの送信を表示をクリックします。
      • このフォームを複製するには、「アクション」 > 「クローンフォーム」をクリックします。
      • 選択したフォームを使用している他のページを確認するには、アクション > このフォームを使用しているページをクリックしてください。
      •  フォームエディターで編集するには、アクション > フルフォームエディターに移動 .
        リケーブルをクリックします。


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

フォームフィールド、ボタンテキスト、GDPRの設定を編集する場合:

  • クリックすると、「フォームの内容」セクションが展開されます。
  • フォームの内容を設定する。 
    • フォームフィールド:フィールドをドラッグ&ドロップすることで、フォームに表示される順番を編集することができます。複数列のフォームやカスタムモジュールの一部で、フォームフィールドをドラッグ&ドロップすることはできません。フォームフィールドを追加する場合:
      • +別のフォームフィールドを追加するをクリックします。
      • プロパティを選択するドロップダウンメニューをクリックし、検索バーを使用してフィールドを検索します。 
      • プロパティをクリックし、フォームフィールドとして追加します。 
    • ボタンテキスト:送信ボタンに表示するテキストを入力します。
    • GDPRオプション:ドロップダウンメニューで、表示する通知と同意情報を選択します。
    • Captcha (SPAM防止):クリックするとCaptcha (SPAM防止)スイッチオンで表示Googleの見えないreCAPTCHA .

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




投稿後のアクションを設定する 

フォームが送信された後の動作を設定する:

  • クリックすると、ありがとうございますの部分が拡大します。
  • 「フォーム送信後に訪問者が見るもの」セクションで、送信後のアクションを設定します: 
    • 別ページへのリダイレクト:フォーム送信後に別ページへのリダイレクトを行います。
      • クリック別ページへリダイレクト .
      • リダイレクトリンクドロップダウンメニューをクリックし、an existing HubSpot pageを選択するか、URLを入力します。
    • Display inline thank you message:訪問者がフォームを送信した後に、メッセージを表示します。テキストボックスには、感謝のメッセージを入力できます。

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

コンタクト作成、マーケティングEメールオプションなどのフォームオートメーションや、フォームに関連付けされたワークフローを管理できます。フォームモジュールの自動化設定でワークフローを追加すると、対応するフォーム送信登録のトリガーがワークフローに追加されます。フォームモジュールの自動化設定からワークフローを削除すると、ワークフローの登録トリガーからもワークフローが削除されます。

ワークフローで使用されるフォーム登録トリガーがページを指定しない場合、トリガーをページから削除することはできず、代わりにワークフローから削除する必要があります。

Form automation セクションでは、以下の自動化オプションを設定することができます:

  • Eメールアドレスに対して常に新しいコンタクトを作成する:フォームが新しいEメールアドレスで送信されるたびに、フォーム送信から既存のコンタクトと一致するユーザートークンがあっても、新しいコンタクトレコードを作成します。 
  • 作成されたコンタクトをマーケティングコンタクトに設定:このフォームで作成されたコンタクトをマーケティングコンタクトとして設定します。
  • Eメールでフォローアップ( β ):フォームを送信した訪問者にフォローアップメールを送信します。フォローアップEメールは、マーケティングコンタクトにのみ送信可能です。 
    • フォローアップEメールを追加する場合:
      • メールを選択+をクリックします。
      • ダイアログボックスで、Select an emailドロップダウンメニューをクリックし、既存の自動メールを選択するか、Create new emailをクリックしてCreate a new automated emailをクリックします。
      • [保存]をクリックします。選択されたEメールは左パネルに表示されます。 
      • フォローアップEメールの設定が完了したら、右上の「Publish」または「Update」をクリックして、これらの変更をライブで実行します。変更内容が公開されるまで、フォローアップEメールは有効になりません。 
    • 使用するフォローアップメールを変更するには、Eメールにカーソルを合わせ、Eメールの横にある鉛筆のアイコンをクリックします。 
    • フォローアップメールを削除するには、Eメールにカーソルを合わせ、Eメールの横にあるXアイコンをクリックします。Eメールが表示されなくなるはずです。 
    • フォームが以前にレガシーフォローアップEメールに関連付けされていた場合、アラートが表示されますこのフォームはレガシーフォローアップEメールを使用しています .レガシーなフォローアップEメールは編集できませんが、過去に公開されたEメールであれば、自動送信メールに更新することができます。その後、更新された自動Eメールを編集することができます。 
      • 以前に公開したレガシーフォローアップメールを、編集可能な自動メールに更新するには、メール更新をクリックします。次に、「アップデート」をクリックします。Eメールが過去に公開されていない場合、このオプションは表示されません。 
      • 公開または未公開のレガシーフォローアップEメールを削除するには、削除をクリックします。次に、削除をクリックします。 
  • 接続されたワークフロー:任意のワークフローと、フォームを登録トリガーとして使用するシンプルなワークフローが表示されます。フォームを使った自動化について詳しくはこちら
    • ワークフローのトリガーとしてフォームを使用するには、ワークフローにフォームを追加または別のワークフローにフォームを追加をクリックしてください。 
      • [フォームをワークフローに追加]をクリックします。
      • 既存のワークフローを選択するか、[新規ワークフローを作成]をクリックして新しいワークフローを作成します。新しいワークフローを作成する場合は、ワークフローを設定した後、ランディングページやWebサイトのページでフォームモジュールに戻ります。 
    • 別のワークフローを追加するには、「別のワークフローにフォームを追加」をクリックし、既存のワークフローを選択するか、「新しいワークフローの作成」をクリックします。
    • ワークフローのトリガーとしてフォームを削除するには、ワークフローにカーソルを合わせ、ワークフローの横にある削除アイコンをクリックします。 

注:

フォームモジュールにワークフローがアタッチされると、ページがまだ公開・更新されていなくても、ワークフロー登録のトリガーが即座に更新されます。
ワークフローでコンタクトを登録するように設定されたフォームを持つ HubSpot ページを 複製した場合、複製した新しいページのフォーム送信は、ワークフローの新しい登録トリガーとして追加されることはありません。 





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

また、フォームの通知先を選択するなどの追加設定も可能です。さらに、HubSpotとSalesforceの統合をインストールした場合、フォームをアクティブなSalesforceキャンペーンに関連付けることもできます。

フォームの追加オプションを設定する。 

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

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

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

 

フォーム全体のスタイリングをカスタマイズしたり、送信ボタンやフォームフィールドに特定のスタイリングを変更したりする場合。

左パネルの上部にある「スタイル」タブをクリックします。
モジュール 、 フィールド 、 ボタン のタブをクリックし、スタイルを設定するフォームの要素を選択します。
以下のテキストと配置のオプションを使用して、フォームの選択要素をカスタマイズします。
Publish または Update をクリックして、ページへの変更をライブで実行します。


 

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