HubSpotページのフォームをセットアップしてスタイル設定する
更新日時 2023年 3月 20日
対象製品
すべての製品とプラン |
HubSpotでフォームを作成した後、HubSpotページの任意のフォームモジュールに追加することができます。
また、各ページでは、フォーム送信後の処理を設定したり、送信ボタンやフォームフィールドなど、フォームの要素のスタイルをカスタマイズすることができます。
注:設定とスタイルの変更は、選択されたページのフォームモジュールにのみ適用され、他のページのフォームには影響しません。
フォームをセットアップする
HubSpotのページにフォームを設置する場合。- HubSpotアカウントで、ランディングページまたはウェブサイトページに移動します。
- フォームモジュールを使用して既存のページにカーソルを置き、[編集]をクリックするか、新しいページを作成します。
- ページエディターでフォームモジュールをクリックします。
- 左パネルの「コンテンツ」タブで、このページ用のフォームの設定をカスタマイズします。
- フォームタイトル:フォームの名称を入力します。
- フォームを選択する: このページのフォームを選択します。
- 既存のフォームを使用する場合は、ドロップダウンメニューをクリックし、フォームを選択します。
- 新しいフォームを作成して使用するには、「アクション」 > 「新しいフォームの作成」をクリックします。フォームの設定について詳しくはこちら
- このフォームの送信内容を表示するには、「アクション」 > 「フォームの送信内容を表示」をクリックします。
- このフォームを複製するには、「アクション」 > 「フォームの複製」をクリックします。
- 選択したフォームを使用している他のページを確認するには、「アクション」 > このフォームを使用しているページをクリックします。
- フォームエディターで編集するには、「アクション」 > 「フルフォームエディターに移動」をクリックします。
lice

フォームの内容をカスタマイズする
フォームフィールド、ボタンテキスト、GDPRの設定を編集するためです。- クリックすると、「フォームの内容」セクションが展開されます。
- フォームの内容を設定する。
- フォームフィールド: d ドラッグ&ドロップで、フォームに表示される順番を編集することができます。複数列のフォームやカスタムモジュールの一部で、フォームフィールドをドラッグ&ドロップすることはできません。フォームフィールドを追加する場合。
- クリック+別のフォームフィールドを追加する。
- Choose a propertyドロップダウンメニューをクリックし、検索バーを使ってフィールドを検索します。
- プロパティーをクリックすると、フォームフィールドとして追加されます。
- フォームフィールド: d ドラッグ&ドロップで、フォームに表示される順番を編集することができます。複数列のフォームやカスタムモジュールの一部で、フォームフィールドをドラッグ&ドロップすることはできません。フォームフィールドを追加する場合。
-
- ボタンテキスト:送信ボタンに表示するテキストを入力します。
- GDPRオプション:ドロップダウンメニューで、表示する通知と同意情報を選択します。
- Captcha(SPAM防止):クリックするとCaptcha(SPAM防止)スイッチがオンになり、Googleの見えないreCAPTCHAが表示されます。
投稿後のアクションを設定する
フォームが送信された後の動作を設定する。
- クリックすると、お礼の欄が拡大します。
- フォーム送信後の表示」セクションで、送信後のアクションを設定します。
- 別ページへのリダイレクト:フォーム送信後に別ページへリダイレクトさせる。
- 別のページにリダイレクトする]をクリックします。
- リダイレクトリンクのドロップダウンメニューをクリックし、既存の HubSpotページを選択するか、URLを入力します。
- インラインでサンキューメッセージを表示する:訪問者がフォームを送信した後にメッセージを表示する。テキストボックスには、お礼のメッセージを入力することができます。
- 別ページへのリダイレクト:フォーム送信後に別ページへリダイレクトさせる。
フォームの自動化を設定する
コンタクト作成、マーケティングEメールオプションなどのフォームの自動化や、フォームに関連付けされたワークフローを管理します。
ここにワークフローを追加すると、対応するフォーム送信登録のトリガーがワークフローに追加されます。ここで削除すると、ワークフローの登録トリガーからも削除されます。使用するフォーム登録トリガーがページを指定していない場合、トリガーをページから削除することはできず、代わりにワークフローから削除する必要があります。
フォームオートメーションのオプションを設定するには、次のようにします。
- クリックすると、「フォームの自動化」セクションが展開されます。
- 以下の自動化オプションを設定します。
- E メールに対して常に新しいコンタクトを作成する:新しいEメールでフォームが送信されるたびに、フォーム送信から既存のコンタクトと一致するユーザートークンに関係なく、新しいコンタクトレコードを作成することができます。
- 作成されたコンタクトをマーケティングコンタクトに設定:このフォームで作成されたコンタクトをマーケティングコンタクトとして設定します。
- x simple workflows using this form:このフォームを入会トリガーとして使用したシンプルなワークフローの数。フォローアップEメールの送信には、シンプルなワークフローを使用することが推奨されます。フォームで自動化を使用する場合のシンプルなワークフローについて詳しく説明します。
- E メールに対して常に新しいコンタクトを作成する:新しいEメールでフォームが送信されるたびに、フォーム送信から既存のコンタクトと一致するユーザートークンに関係なく、新しいコンタクトレコードを作成することができます。
-
- 接続されたワークフロー:登録トリガーとしてフォームを使用しているワークフローが表示されます。フォームを使った自動化について、詳しくはこちらをご覧ください。
- ワークフローのトリガーとしてフォームを使用するには、「ワークフローにフォームを追加」または「別のフォームにフォームを追加」をクリックします。ワークフローです。
- [フォームをワークフローに追加]をクリックします。
- 既存のワークフローを選択するか、[新規ワークフローを作成]をクリックして新しいワークフローを作成します。新しいワークフローを作成する場合は、ワークフローを設定した後、ランディングページやWebサイトのページでフォームモジュールに戻ります。
- 別のワークフローを追加するには、「別のワークフローにフォームを追加」をクリックし、既存のワークフローを選択するか、「新しいワークフローを作成」をクリックします。
- ワークフローのトリガーとしてフォームを削除するには、ワークフローにカーソルを合わせ、ワークフローの横にある削除アイコンをクリックします。
- ワークフローのトリガーとしてフォームを使用するには、「ワークフローにフォームを追加」または「別のフォームにフォームを追加」をクリックします。ワークフローです。
- 接続されたワークフロー:登録トリガーとしてフォームを使用しているワークフローが表示されます。フォームを使った自動化について、詳しくはこちらをご覧ください。
注:
- フォームモジュールにワークフローがアタッチされると、ページがまだ公開・更新されていなくても、ワークフロー登録のトリガーが即座に更新されます。
- ワークフローでコンタクトを登録するように設定されたフォームを持つHubSpot ページを複製した場合、複製した新しいページのフォーム送信は、ワークフローの新しい登録トリガーとして追加されることはありません。

フォームの追加オプションを設定する
また、フォームの通知先を選択するなどの追加設定も可能です。さらに、HubSpotとSalesforceの統合をインストールした場合、フォームをアクティブなSalesforceキャンペーンに関連付けることもできます。
フォームの追加オプションを設定する。
- 左のパネルの一番下までスクロールして、次のオプションを設定します。
- フォームのデフォルトではなく、指定したEメールにフォーム送信通知を送信する:デフォルトでは、フォーム送信通知は、フォームのオプションタブで追加された受信者に送信されます。フォームのデフォルトの受信者を上書きし、このページで送信の通知先を選択する。
- クリックすると、「フォームのデフォルトではなく、指定した E メールに通知を送信する」スイッチがオンになります。
- E メールのドロップダウンメニューをクリックし、受信者を選択します。フォームの通知先として選択できるのは、HubSpotユーザーのみです。
- 受信者を削除するには、受信者のEメールの横にあるXアイコンをクリックします。
- Salesforceキャンペーン: Salesforceとの連携を有効にしている場合、ドロップダウンメニューをクリックしてキャンペーンを選択すると、フォームをアクティブなSalesforceキャンペーンに関連付けすることができます。フォームとSalesforceのキャンペーンの関連付けについて、詳しくはこちらをご覧ください。
- フォームのデフォルトではなく、指定したEメールにフォーム送信通知を送信する:デフォルトでは、フォーム送信通知は、フォームのオプションタブで追加された受信者に送信されます。フォームのデフォルトの受信者を上書きし、このページで送信の通知先を選択する。
HubSpotページ上のフォームをスタイル設定する
フォーム全体のスタイリングをカスタマイズしたり、送信ボタンやフォームフィールドに特定のスタイリングを変更したりする場合。
- 左パネルの上部にある「スタイル」タブをクリックします。
- モジュール、フィールド、ボタンのタブをクリックし、スタイルを設定するフォームの要素を選択します。
- 以下のテキストとアラインメントオプションを使用して、フォームの選択された要素をカスタマイズします。
- 公開」または「更新」をクリックすると、ページへの変更が本番されます。
関連記事
-
HubSpotコンテンツに動画を追加する
HubSpot videoでは、ファイルツールにビデオをアップロードし、ページ、マーケティング用Eメール、ブログ記事、ナレッジベース記事に追加することができます。 HubSpot動画は、ドラッグ&ドロップ...
ナレッジベース -
HubSpotのコンテンツとデータをエクスポートする
ページ、コンタクト、ファイルなど、自分のアカウントからHubSpotコンテンツとデータをエクスポートする方法を説明します。 ...
ナレッジベース -
フォームを作成する
フォームを使用して、訪問者やコンタクトに関する重要な情報を収集することができます。HubSpotでは、HubSpotページや外部サイトに追加するフォームを簡単に作成できます。 ...
ナレッジベース