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

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

更新日時 2023年 3月 20日

対象製品

すべての製品とプラン

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

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

注:設定とスタイルの変更は、選択されたページのフォームモジュールにのみ適用され、他のページのフォームには影響しません。

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

HubSpotのページにフォームを設置する場合。
  • HubSpotアカウントで、ランディングページまたはウェブサイトページに移動します。
  • フォームモジュールを使用して既存のページにカーソルを置き、[編集]をクリックするか、新しいページを作成します。
  • ページエディターでフォームモジュールをクリックします。
  • 左パネルの「コンテンツ」タブで、このページ用のフォームの設定をカスタマイズします。
    • フォームタイトル:フォームの名称を入力します。
    • フォームを選択する: このページのフォームを選択します。
      • 既存のフォームを使用する場合は、ドロップダウンメニューをクリックし、フォームを選択します。
      • 新しいフォームを作成して使用するには、「アクション」 > 「新しいフォームの作成」をクリックします。フォームの設定について詳しくはこちら
      • このフォームの送信内容を表示するには、「アクション」 > 「フォームの送信内容を表示」をクリックします。
      • このフォームを複製するには、「アクション」 > 「フォームの複製」をクリックします。
      • 選択したフォームを使用している他のページを確認するには、「アクション」 > このフォームを使用しているページをクリックします。
      • フォームエディターで編集するには、「アクション」 > フルフォームエディターに移動」をクリックします。
        lice


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

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



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

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

  • クリックすると、お礼の欄が拡大します。
  • フォーム送信後の表示」セクションで、送信後のアクションを設定します。
    • 別ページへのリダイレクト:フォーム送信後に別ページへリダイレクトさせる。
      • 別のページにリダイレクトする]をクリックします。
      • リダイレクトリンクのドロップダウンメニューをクリックし、既存の HubSpotページを選択するか、URLを入力します。
    • インラインでサンキューメッセージを表示する:訪問者がフォームを送信した後にメッセージを表示する。テキストボックスには、お礼のメッセージを入力することができます。

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

コンタクト作成、マーケティングEメールオプションなどのフォームの自動化や、フォームに関連付けされたワークフローを管理します。

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

フォームオートメーションのオプションを設定するには、次のようにします。 

  • クリックすると、「フォームの自動化」セクションが展開されます。
  • 以下の自動化オプションを設定します。  
    • E メールに対して常に新しいコンタクトを作成する:新しいEメールでフォームが送信されるたびに、フォーム送信から既存のコンタクトと一致するユーザートークンに関係なく、新しいコンタクトレコードを作成することができます。
    • 作成されたコンタクトをマーケティングコンタクトに設定:このフォームで作成されたコンタクトをマーケティングコンタクトとして設定します。
    • x simple workflows using this form:このフォームを入会トリガーとして使用したシンプルなワークフローの数。フォローアップEメールの送信には、シンプルなワークフローを使用することが推奨されます。フォームで自動化を使用する場合のシンプルなワークフローについて詳しく説明します。 
    • 接続されたワークフロー:登録トリガーとしてフォームを使用しているワークフローが表示されます。フォームを使った自動化について、詳しくはこちらをご覧ください。
      • ワークフローのトリガーとしてフォームを使用するには、「ワークフローにフォームを追加」または「別のフォームにフォームを追加」をクリックします。ワークフローです。
        • [フォームをワークフローに追加]をクリックします。
        • 既存のワークフローを選択するか、[新規ワークフローを作成]をクリックして新しいワークフローを作成します。新しいワークフローを作成する場合は、ワークフローを設定した後、ランディングページやWebサイトのページでフォームモジュールに戻ります。 
      • 別のワークフローを追加するには、「別のワークフローにフォームを追加」をクリックし、既存のワークフローを選択するか、「新しいワークフローを作成」をクリックします。
      • ワークフローのトリガーとしてフォームを削除するには、ワークフローにカーソルを合わせ、ワークフローの横にある削除アイコンをクリックします。  

注:

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






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

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

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

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

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

注:HubSpotページに表示されるフォームは、ページごとにカスタムスタイル設定できます。外部ページまたはスタンドアロンフォームページの埋め込みフォームは、フォームエディターでスタイル設定するか、外部スタイルシートのCSSを使用してスタイル設定する必要があります。

 

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

  • 左パネルの上部にある「スタイル」タブをクリックします。
  • モジュール、フィールド、ボタンのタブをクリックし、スタイルを設定するフォームの要素を選択します。
  • 以下のテキストとアラインメントオプションを使用して、フォームの選択された要素をカスタマイズします。
  • 公開」または「更新」をクリックすると、ページへの変更が本番されます。

 

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