HubSpotページのフォームをセットアップしてスタイル設定する
更新日時 2023年 11月 22日
以下の 製品でご利用いただけます(別途記載されている場合を除きます)。
|
HubSpotでフォームを作成した後、HubSpotページ上の任意のフォームモジュールに追加することができます。また、各ページでは、フォームが送信された後の処理を設定したり、送信ボタンやフォームフィールドなど、フォームの要素のスタイリングをカスタマイズすることができます。
始める前に
HubSpotページにフォームを設定する前に、以下の点にご注意ください:
- 設定とスタイルの変更は、選択したページのフォームモジュールにのみ適用されます。どのような設定やスタイルの変更を行っても、、他のページのフォームに影響を与えることはありません。
- フォームフィールドのようなフォームのコンテンツを更新すると、他のすべてのページのフォームが更新されます。これには、埋め込まれたフォームやスタンドアロンのフォームページも含まれます。
フォームをセットアップする
HubSpotのページにフォームを設置する場合:- HubSpotアカウントで、ランディングページまたはウェブサイトページに移動します。
- フォームモジュールのある既存のページにカーソルを合わせ、編集、または新しいページを作成をクリックします。
- ページエディターでフォームモジュールをクリックします。もし、あなたのページに現在フォームモジュールがない場合は、ページにモジュールを追加する方法をご覧ください .
- 左パネルのコンテンツタブで、このページ用にフォームの設定をカスタマイズします:
- フォームタイトル:フォームの名を入力してください。
- フォームを選択する:このページのフォームを選択してください。
- 既存のフォームを使用する場合は、ドロップダウンメニューをクリックし、フォームを選択してください。
- 新しいフォームを作成して使用するには、「アクション」 > 「新しいフォームを作成」をクリックします。セットアップフォームについて詳しくはこちら
- このフォームの送信を表示するには、アクション > フォームの送信を表示をクリックします。
- このフォームを複製するには、「アクション」 > 「複製フォーム」をクリックします。
- 選択したフォームを使用している他のページを確認するには、アクション > このフォームを使用しているページをクリックしてください。
- フォームエディターでフォームを編集するには、アクション > フルフォームエディターへをクリックします。

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

投稿後のアクションを設定する
デフォルトでは、HubSpotページに追加されたフォームには、フォームの送信ありがとうございますというインラインメッセージが表示されます。フォームはフォームエディターで設定されたポスト投稿アクションを、表示しません。
ページエディターでは、別の投稿アクションをカスタマイズできます。フォームが送信された後の動作を設定する:
- クリックすると、ありがとうございますの部分が拡大します。
- 「フォーム送信後に訪問者が見るもの」セクションで、送信後のアクションを設定します:
- 別ページへのリダイレクト:フォーム送信後に別ページへのリダイレクトを行います。
- クリック別ページへリダイレクト .
- リダイレクトリンクドロップダウンメニューをクリックし、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メールにカーソルを合わせ、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でスタイルを設定してください。