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

HubSpotで フォームを作成すると 、ウェブページやランディングページで任意のフォームモジュール に追加できるようになります。各ページで、フォームが送信された後のアクションを設定することや、送信ボタンやフォームフィールドといったフォームの要素のスタイルをカスタマイズすることもできます。

この記事は、 旧バージョンのエディター で作成した既存のフォームにのみ使用してください。新しいフォームの作成と管理には 、更新されたフォームエディター を使用することをお勧めします。詳しくは、HubSpotページでフォームをスタイル設定する方法をご確認ください。 

始める前に

HubSpotページでフォームの設定を始める前に、以下の点にご注意ください。 

• 設定やスタイルの変更は、選択されたページ内のフォームモジュールにのみ適用されます。つまり、あるページで設定やスタイルを変更しても、その他のページ上にあるフォームは変更されません。
• フォームの要素（フォームフィールドなど）を更新した場合は、埋め込みフォームのあるページやスタンドアロン フォーム ページを含む、全てのページでフォームが更新されます。 

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

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
2. ページ の名前 をクリックします。
3. コンテンツエディターでフォームモジュールをクリックします。現在ページにフォームモジュールが追加されていない場合は、ページにモジュールを追加する方法をご確認ください。 
4. 左側のパネルの［コンテンツ］タブで、このページにおけるフォームの設定をカスタマイズします。
   • フォームタイトル: フォーム の名前を入力します 。
   • フォーム: このページの フォーム を選択します。
     • 既存のフォームを使用する場合はドロップダウンメニューをクリックし、フォームを選択します。 
     • 新規フォームを作成して追加するには、［アクション］ドロップダウンメニューで［新規フォームを作成］をクリックします。フォームのセットアップについてもっと詳しく
     • フォームの送信状況を表示するには、［アクション］ドロップダウンメニューで［フォーム送信を表示］をクリックします。
     • フォームを複製するには、［アクション］ドロップダウンメニューで［フォームを複製］をクリックします。
     • 選択したフォームを使用している他のページを確認するには、、［アクション］ドロップダウンメニューで［このフォームを使用するページ］をクリックします。
     • フォームエディターでフォームを編集するには、［アクション］ドロップダウンメニューで［完全なフォームエディターへ］をクリックします。
       
       

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

以下の手順で、フォームフィールド、ボタンテキスト、データのプライバシーと同意オプションを編集できます。

1. ［フォームコンテンツ］の右横にある矢印をクリックするとセクションを展開します。
2. フォームの内容を設定します。 
   • フォームフィールド:フィールドをクリックしてドラッグすると、フォームに表示される順番を編集できます。ただし、複数列フォーム内のフィールド、またはカスタムモジュールの一部になっているフォームフィールドはドラッグ＆ドロップすることはできません。フォームフィールドを追加するには、
     • ［＋別のフォームフィールドを追加］をクリックします。
     • ［プロパティーを選択する］ドロップダウンメニューをクリックし、検索バーでフィールドを検索します。 
     • 希望するプロパティーをクリックして、フォームフィールドとして追加します。 

• • ［ボタンテキスト］送信ボタンに表示するテキストを入力してください。
  • データのプライバシーと同意のオプション: ドロップダウンメニューで、 表示する通知と同意の情報 を選択します。
  • ［CAPTCHA（スパム防止）］：非表示のGoogle reCAPTCHAを表示する場合は、スイッチをクリックしてオンに切り替えます。

注：フォームコンテンツを更新すると、フォームが使用されているその他のページ（埋め込みフォームを使用したページやスタンドアロン フォーム ページを含む）も更新されます。

送信後のアクションの設定 

デフォルトでは、HubSpotのランディングページやウェブサイトページに追加されたフォームが送信されると、「フォームのご送信ありがとうございます。」というメッセージがインラインで表示されるように設定されており、フォームエディターで設定された送信後のアクションは、実行されません。

この設定を変更したい場合、ページの編集画面で送信後のアクションをカスタマイズできます。以下の手順に従って、フォーム送信後の動作を設定します。

1. ［サンキュー］の右横にある矢印をクリックして、セクションを展開します。
2. ［フォーム送信後に訪問者に何を表示しますか？］で、以下のいずれかを選択します。 
   • ［別のページにリダイレクト］：フォーム送信後に訪問者を別のページにリダイレクトします。
     • ［別のページにリダイレクト］を選択します。
     • ［リダイレクトリンク］ドロップダウンメニューをクリックし、既存のHubSpotページを選択するか、外部リンクのURLを入力します。
   • ［メッセージをインラインで表示する］：訪問者がフォームを送信した後にメッセージを表示します。［サンキューメッセージ］テキストボックスで、お礼のメッセージを編集できます。

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

フォームの自動化（コンタクト作成、マーケティングEメールオプション、フォームに関連付けされているワークフローなど）を管理できます。登録トリガーは、以下の動作の対象となります。

• フォームモジュールの自動化設定でワークフローを追加すると、対応するフォーム送信の登録トリガーがワークフローに追加されます。
• フォームモジュールの自動化設定からワークフローを削除すると、ワークフローの登録トリガーからも削除されます。
• ワークフローで使用されるフォーム登録トリガーでページが指定されていない場合、トリガーをページから削除することはできないため、ワークフローからトリガーを削除する必要があります。

フォームの自動化設定を行うには、左パネルで［フォームの自動化］セクションをクリックして展開し、以下の自動化オプションを確認します。

• ［新しいEメールアドレスで常にコンタクトを作成］：フォーム送信のユーザートークンが既存のコンタクトと一致（英語）しても、新しいコンタクトレコードを作成します。 
• 作成されたコンタクトをマーケティングコンタクトに設定このフォームで作成されたコンタクトをマーケティングコンタクトに設定 .
• Eメールを使用してフォローアップ：フォームを送信した全ての訪問者にフォローアップEメールを送信します。フォローアップEメールは、マーケティングコンタクトにのみ送信できます。 
  • フォローアップEメールを追加するには、次の手順に従います。
    • ［Eメールを選択+］をクリックします。
    • ダイアログボックスで、[ Eメールを選択 ]ドロップダウンメニューをクリックし、 既存の自動配信Eメール を選択するか、[ 新規Eメールを作成 ]をクリックして 新しい自動配信Eメールを作成します。
    • ［保存］をクリックします。選択したフォローアップEメールが左パネルに表示されます。 
    • フォローアップEメールの設定が完了したら、右上の［公開］または［更新］をクリックし、変更を公開します。なお、変更が公開されるまで、フォローアップEメールは送信されません。 

• • 使用するフォローアップEメールを変更するには、Eメールにカーソルを合わせ、Eメールの横にある鉛筆アイコンをクリックします。 
  • フォローアップメールを削除するには、Eメールにカーソルを合わせ、Eメールの横にあるXアイコンをクリックします。これで、Eメールは表示されなくなります。 
  • フォームが以前に旧バージョンのフォローアップEメールに関連付けされていた場合、「このフォームでは旧バージョンのフォローアップEメールが使用されています。」という警告が表示されます。旧バージョンのフォローアップEメールは編集できませんが、過去に送信されたEメールであれば、自動送信Eメールとして更新することによって編集できるようになります。 
    • 以前に公開した旧バージョンのフォローアップEメールを編集可能な 自動送信Eメール に更新するには、[ Eメールを更新]をクリックします。［更新］ボタンをクリックします。Eメールが以前に送信されていない場合、このオプションは表示されません。 

• • • 送信済み、または未送信の旧バージョンのフォローアップEメールを削除するには、［削除］をクリックして、［保存］ボタンをクリックします。 

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

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

フォーム通知の受信者を選択するなどの追加設定も行うことができます。また、HubSpotとSalesforceとの連携をインストールしている場合、フォームを有効なSalesforceキャンペーンに関連付けることもできます。

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

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

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

フォーム全体のスタイルをカスタマイズしたり、送信ボタンやフォームフィールドの特定のスタイルを変更したりできます。フォームのスタイルをカスタマイズするには、次の手順に従います。

1. 目的のコンテンツに移動します。
   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
2. コンテンツエディターでフォームモジュールをクリックします。現在ページにフォームモジュールが追加されていない場合は、ページにモジュールを追加する方法をご確認ください。 
3. 左側パネルの上部で、［スタイル］タブをクリックします。
4. ［モジュール］、［フィールド］、［ボタン］のいずれかのタブをクリックし、スタイルを設定するフォームの要素を選択します。
5. 以下のテキストとアラインメントオプションを使用して、フォームの選択された要素をカスタマイズします。
6. ［公開］または［更新］をクリックして、変更内容を公開します。

注：フォームのスタイルはページごとに設定できます。外部ウェブサイトへの埋め込みフォーム 、または 単体 フォーム ページの スタイルを設定する場合、 フォームエディター 、もしくは外部スタイルシートの CSSを使用する必要があります 。