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メールの横にあるXアイコンをクリックします。Eメールが表示されなくなるはずです。 
  • フォームが以前に旧フォローアップEメールに関連付けされていた場合、アラートが表示されますこのフォームは旧フォローアップEメールを使用しています .旧フォローアップEメールは編集できませんが、過去に公開されたEメールであれば、自動送信メールに更新することができます。その後、更新された自動Eメールを編集することができます。 
    • 以前に公開した旧フォローアップメールを、編集可能な自動メールに更新するには、メール更新をクリックします。次に、「アップデート」をクリックします。Eメールが過去に公開されていない場合、このオプションは表示されません。 

• • • 公開または未公開の旧フォローアップEメールを削除するには、削除をクリックします。次に、削除をクリックします。 

• 接続されたワークフロー：任意のワークフローと、フォームを登録トリガーとして使用するシンプルなワークフローが表示されます。フォームを使った自動化について詳しくはこちら . 
  • ワークフローのトリガーとしてフォームを使用するには、ワークフローにフォームを追加または別のワークフローにフォームを追加をクリックしてください。 
    • ［フォームをワークフローに追加］をクリックします。
    • 既存のワークフローを選択するか、［新規ワークフローを作成］をクリックして新しいワークフローを作成します。新しいワークフローを作成する場合は、ワークフローを設定した後、ランディングページやWebサイトのページでフォームモジュールに戻ります。 
  • 別のワークフローを追加するには、「別のワークフローにフォームを追加」をクリックし、既存のワークフローを選択するか、「新しいワークフローの作成」をクリックします。
  • ワークフローのトリガーとしてフォームを削除するには、ワークフローにカーソルを合わせ、ワークフローの横にある削除アイコンをクリックします。 

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

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

フォームの追加オプションを設定するには、左のパネルの一番下までスクロールし、以下のオプションを設定します：

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

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

フォーム全体のスタイルをカスタマイズしたり、送信ボタンやフォームフィールドの特定のスタイルを変更することができます。フォームのスタイルをカスタマイズする：

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

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