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

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

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

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

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

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

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

• クリックすると、「フォームの内容」セクションが展開されます。
• フォームの内容を設定する。  
  • フォームフィールド： 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とSalesforceの統合をインストールした場合、フォームをアクティブなSalesforceキャンペーンに関連付けることもできます。

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

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

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

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

• 左パネルの上部にある「スタイル」タブをクリックします。
• モジュール、フィールド、ボタンのタブをクリックし、スタイルを設定するフォームの要素を選択します。

• 以下のテキストとアラインメントオプションを使用して、フォームの選択された要素をカスタマイズします。
• 公開」または「更新」をクリックすると、ページへの変更が本番されます。