HubSpotフォームの作り方｜WordPressへの埋め込み、自動返信・通知の設定と送信データの上書きルール

HubSpotフォームの種類と、どこに置くかの決め方

HubSpotフォームは、HubSpotのページへの埋め込み、外部サイトへの埋め込み、単体ページ、CTAのポップアップの4つの置き方があります。HubSpotで作らないフォームの送信を取り込む方法もあり、自社サイトの作り方で選びます。

HubSpotフォームとは、HubSpotのフォームエディターで作り、送信された値をCRMのコンタクトや会社のプロパティに書き込む入力フォームのことです。HubSpotのヘルプでは、フォームの作成はすべての製品とプランで使える機能とされています。同じフォームを複数の場所に置けるため、「どこに置くか」はフォームを作ったあとでも選べます。

以前のポップアップフォームは提供が終わっており、HubSpotのヘルプでも、ポップアップやスライドインはCTAツールで作る案内になっています。CTAの中に置けるフォームは1つで、新しいフォームエディターで作ったものです。ポップアップを出すかどうかは読者の離脱にも関わるため、検討段階ごとのCTAの置き方を決めてから作ります。

フォームを置くページ自体をHubSpotで作る場合は、HubSpotでランディングページを作る手順に沿って、公開先のドメインを決めてからページを作ります。

新しいフォームエディターでの作成手順

フォームは［マーケティング］＞［フォーム］から作り、フィールドを追加するたびに接続先のプロパティを選び、［確認と更新］で公開します。旧エディターの手順で書かれた解説は、いまの画面と合わない箇所があります。

作成の流れは次のとおりです。

1. HubSpotの［マーケティング］＞［フォーム］を開き、右上の［フォームを作成］をクリックします。
2. ［フォームエディター］を選び、テンプレートを使うか［ゼロから始める］を選びます。
3. 左上の［+］からフィールドをドラッグし、［フィールドの編集］パネルで既存のプロパティに接続します。
4. ヘルプテキスト、プレースホルダー、既定値、非表示、必須をフィールドごとに設定します。
5. 送信後の表示、自動化、設定（コンタクトの作成方法と通知）を決めます。
6. ［プレビュー］でパソコン・タブレット・スマートフォンの表示を確かめ、［確認と更新］から［更新］で公開します。

プレビューでは送信できないため、自動返信や通知は公開後に単体ページからテスト用のアドレスで送って確かめます。

Starter以上ではフォームを最大20ステップに分けられ、Marketing HubかContent HubのProfessional以上では回答に応じて項目を出し分ける条件付きロジックを使えます。資料請求で3〜4項目しか聞かないフォームなら、ステップも分岐も要りません。

旧エディターの解説と食い違う箇所

検索で見つかる手順記事の多くは、旧エディターの画面で書かれています。HubSpotのヘルプで違いが明記されている項目は次のとおりです。

項目はプロパティから選ぶ｜フォームのために新しいプロパティを作らない

フォームのフィールドは、必ずどれかのプロパティに接続されます。接続先が会社のプロパティなら会社レコードにも書き込まれるため、項目を足す前に「どのレコードのどの項目に入るか」を決めます。

HubSpotのフォームは、フィールドとプロパティが1対1で結びついています。「会社名」を会社の既定プロパティに接続すると、送信時に会社レコードが作られるか更新され、コンタクトに関連付けられることがあります。コンタクトの「会社名」に接続した場合は、コンタクトの項目に文字が入るだけです。どちらに入れるかで、あとから会社単位の集計ができるかどうかが変わります。

フィールドの編集パネルでは［新しいプロパティーを作成］も押せますが、ここで作ると、1回きりの質問のためのプロパティが増えていきます。問い合わせフォームの「ご検討時期」と資料請求フォームの「導入予定」が別々のプロパティになると、同じ質問の答えを2か所から集計することになります。新しい項目が必要になったら、プロパティを作る前の3つの問いに答えられるかを先に確かめ、同じ質問は全フォームで同じプロパティと同じ選択肢を使います。

計算、ロールアップ、URL、リッチテキストなどの種類のプロパティは、フォームのフィールドにできません。プロパティが候補に出てこない場合は、プロパティ設定の［ルール］で「フォームで表示」がオフになっていないかを確認します。

非表示フィールドで流入元やオファー名を渡す

訪問者に見せずに値を書き込みたい場合は、フィールドを非表示にして既定値を設定します。資料A、資料B、相談のようにオファーごとにフォームを分けない運用なら、非表示フィールドにオファー名を入れておくと、どのCTAから送信されたかをあとで分けられます。

非表示フィールドの値には、既定値を使うフィールドの種類（単行テキスト、日付、数値など）を選びます。ドロップダウンやラジオボタンのような事前選択の値は、再訪問者に既知の値をあらかじめ入れる設定がオンのとき、以前の送信値で上書きされることがあります。

項目をいくつにするか、確認画面や任意項目をどうするかは、フォームの通過率と商談数の両方に影響します。項目の数は問い合わせフォームの入力項目の設計で用途別に決めてから、フォームエディターに入れてください。

送信後の表示・自動返信・社内通知の設定

送信後の動作は、フォームエディターの中で3か所に分かれています。表示は［送信］、自動返信は自動化のシンプルワークフロー、社内通知は設定の［送信設定］タブです。

サンキューメッセージとリダイレクトの選び方

送信後に出せるのは、フォームの位置に表示するサンキューメッセージか、HubSpotのページ・外部URL・ミーティングリンク・支払いリンクへのリダイレクトです。GA4や広告のコンバージョンをサンキューページの表示で数えているなら、リダイレクトを選びます。CTAのポップアップに入れたフォームや、資料をその場で渡したいフォームは、メッセージに資料のリンクを置けば足ります。どちらで計測するかは、GA4のキーイベントの分け方と合わせて決めてください。

自動返信メールはシンプルワークフローで送る

自動返信は、フォームエディターの自動化アイコンから［フォーム送信後にEメールを送信］の［このワークフローを作成］で作ります。登録トリガーはフォーム送信で固定され、同じ人が2回送信すれば2回とも送られます。無料ツールでもフォームごとにこの1アクションを作れ、作れるワークフローの本数とアクションの数は契約によって増えます。

自動返信が届かない原因で多いのは、マーケティングコンタクトの設定です。Marketing Hubでマーケティングコンタクトを契約している場合、ワークフローから送るメールを受け取れるのはマーケティングコンタクトに設定された人だけです。フォームの設定にある「新規連絡先をマーケティングコンタクトとして設定」をオフにしたまま自動返信を作ると、送信者には何も届きません。マーケティングコンタクトの考え方と送信上限への影響は、マーケティングメールを送る前に決める3つのルールで決めておきます。

自動返信の文面には、受け付けた内容、誰がいつまでに連絡するか、資料ならダウンロードのリンクを書きます。送信ドメインの認証が済んでいないと迷惑メールに入りやすいため、初期設定の順番でドメイン認証を先に終わらせてからフォームを公開します。

社内通知は担当者とチームに分けて送る

［送信設定］タブでは、コンタクト担当者への通知と、担当者に関係なく通知するユーザー・チームを選べます。コンタクト担当者が決まっていない新規の問い合わせでは担当者あての通知は送られないため、新規リードを最初に見る人は「通知するユーザーを追加」で必ず指定します。HubSpotのページに置いたフォームモジュールで受信者を設定すると、フォームエディター側の受信者より優先されます。

標準の通知メールの文面は変えられません。「課題欄を本文に入れて営業チャンネルに流したい」といった要件は、Professional以上でワークフローからカスタムの社内通知を送る形になります。通知を受けた人が何時間以内に誰へ連絡するかは、問い合わせ対応の初動のルールとして営業と先に決めておきます。

フォームの設定では、送信時にライフサイクルステージを設定することもできます。すでに先のステージにいるコンタクトが送信しても、ステージは戻りません。問い合わせフォームをMQLの判定に使う場合は、ライフサイクルステージの自動更新の組み方とフォームの設定が食い違わないようにします。

WordPressなど自社サイトへの埋め込み手順

外部サイトには埋め込みコードを貼ります。その前に、ページにHubSpotのトラッキングコードを入れ、サイトのドメインをHubSpotのトラッキング設定に追加してください。ドメインを追加していないページからの送信は、スパムとして扱われます。

埋め込みコードは、フォームを公開したあとのダイアログで［埋め込みコードを取得］を押し、［埋め込みコード］タブからコピーします。フォーム一覧の［アクション］＞［共有］からも取得できます。貼る場所は、ページのHTMLを直接書ける領域です。

WordPressに貼るときの手順

1. HubSpotのWordPressプラグインを入れるか、テーマのヘッダーにトラッキングコードを入れます。
2. HubSpotの設定で、WordPressサイトのドメインをサイトドメインとして追加します。
3. 投稿や固定ページに「カスタムHTML」ブロックを置き、埋め込みコードを貼ります。
4. 公開したページでフォームが表示され、送信がHubSpotに記録されるかをテスト用のメールアドレスで確かめます。

HubSpotのヘルプでは、WordPressプラグインのフォームブロックやショートコードで挿入できるのは旧エディターのフォームで、新しいフォームエディターのフォームは対象外とされています。新しく作ったフォームは、プラグインのフォーム一覧から選ぶのではなく、埋め込みコードを貼ります。

貼ったのに表示されない場合、WordPressが埋め込みコードの「&」を「&」に書き換えていることがあります。ブロックエディターの設定やセキュリティ系のプラグインによっては、インラインのスクリプトが消されることもあります。公開ページのソースで埋め込みコードが元のまま残っているかを確かめ、書き換わっているなら、scriptタグを保持できるHTMLスニペット系のプラグインで挿入します。

デザインはどこまで変えられるか｜スタイル設定・CSS・確認画面

フォーム本体の見た目は、フォームエディターのスタイル設定で大半が変えられます。外部スタイルシートのCSSで細かく合わせるには開発者コードが必要で、確認画面は標準の設定にありません。

スタイル設定のパネルでは、フィールドの背景と枠線、ラベルとヘルプテキストとエラー文の色、ボタンの高さ・角丸・背景・文字、見出しと本文の書体、フォーム全体の背景を変えられます。スタイルはすべてのステップに共通で、ステップごとに変えることはできません。サイトの配色とボタンの形をそろえる程度なら、ここだけで済みます。

サイトのCSSで細部まで合わせたい場合は、Marketing HubかContent HubのProfessional以上で、埋め込みダイアログの［開発者コード（上級）］を使います。外部スタイルシートから、HubSpotが公開しているCSS変数を上書きするか、個々の要素にスタイルを当てます。HubSpot側の変更でフォームが崩れるリスクを受け入れる確認が求められるため、サイトを保守する開発者がいない会社は、スタイル設定のパネルの範囲に留めたほうが運用が止まりません。

確認画面を出したい場合の考え方

フォームエディターで選べる送信後の動作は、サンキューメッセージの表示とリダイレクトです。入力内容を確認させる画面を挟む設定はありません。確認画面を作るには、埋め込みコードをJavaScriptで作り込むか、自社で作ったフォームからHubSpotのForms APIに送る形になり、どちらも開発者が必要です。

BtoBの問い合わせや資料請求で確認画面を作る判断は、ほとんどの場合しません。画面が1枚増えるぶん離脱が増え、HubSpot側の仕様変更のたびに独自のスクリプトを直す手間が残ります。入力ミスを減らしたい目的なら、Eメールの形式チェックと必須項目のその場のエラー表示で足ります。契約の申込のように、入力内容を送信前に本人に確かめさせる必要がある場合だけ、自社フォームとAPIで作る費用を見積もってください。

送信データはどのレコードに入り、何が上書きされるか

フォーム送信は、Eメールアドレスが一致する既存コンタクトの値を上書きします。一致しない場合でも、同じブラウザーのCookieで既存コンタクトに結びつくことがあり、共用の端末では別人の情報が1件に重なります。

送信されたEメールアドレスが既存のコンタクトと一致すれば、そのコンタクトのプロパティが送信値で更新されます。半年前に「従業員数 50名」で資料請求した人が、転職後に同じアドレスで「従業員数 300名」と送れば、コンタクトの値は300名になります。以前の値が必要な分析をしているなら、プロパティの履歴を見るか、フォーム回答時の値と営業確認後の値を別の項目で持つ設計にします。空欄のまま送信された項目がどう扱われるかは、公開前にテスト用のコンタクトで既存の値を入れたうえで送信し、確かめておくと安心です。

もう1つの経路がCookieです。フォームの設定で、送信されたEメールアドレスごとにコンタクトを作る項目がオフになっていると、HubSpotは一致するアドレスがないときにブラウザーのCookieで既存のコンタクトを探し、見つかればそのコンタクトを更新します。このため、同じ端末から同じフォームを別の人の情報で何度も送ると、1件のコンタクトが上書きされていきます。

Eメールアドレスごとにコンタクトを作る設定をオンにすると、再訪問者への事前入力も自動でオフになります。サイト上の資料請求フォームでは事前入力を残したいことが多いため、共用端末から使うフォームだけでオンにします。

フォームは重複レコードが生まれる入口でもあります。メールアドレスが違う同一人物や、表記の違う会社名は、フォーム側では防げません。公開後に重複が増えてきたら、名寄せをどこまでやるかを決め、フォームの項目と会社の自動作成の設定を見直します。

HubSpotフォームは新しいコンタクトをマーケティングにする設定が既定でオンなので、採用応募やサポート受付のフォームではフォームから作られるコンタクトのマーケティングステータスを公開前に確認します。

スパム対策は受けているスパムの種類で選ぶ

スパム対策は、ボットの大量送信ならreCAPTCHA、フリーメールや特定ドメインならドメインのブロック、意味のない文字列なら無意味な文字列の検出、と種類で分けて入れます。スパムと判定された送信からはコンタクトが作られません。

HubSpotのreCAPTCHAは、Googleの非表示のreCAPTCHA v2です。普段の訪問者には何も表示されず、Googleが不審と判断した場合だけ認証が出ます。ただし、reCAPTCHAを有効にしたフォームには、Forms APIや他のフォーム連携からの送信が受け付けられなくなります。外部のツールから同じフォームに送信している場合は、先に連携の担当者と確認してください。

フリーメールのブロックは、BtoBでも一律には入れません。問い合わせフォームで入れると、会社のドメインを持たない個人事業主や、社外のアドレスで情報収集している担当者を門前払いします。営業が対応する問い合わせフォームにだけ入れ、資料請求やウェビナー申込では入れない、といった分け方にします。

スパムと判定された送信はスパム一覧ページに入ります。月に1回開き、正しい送信が紛れていれば、どの設定で弾かれたかを見て緩めます。

埋め込んだフォームが表示されない・送信が記録されないときの確認順

最初にフォームの単体ページで送信を試します。単体ページで送れるなら原因は埋め込み先のページにあり、送れないならフォームの設定にあります。

単体ページは、フォームを公開したときにコピーできる共有リンクのページです。サイトのスクリプトやCSSの影響を受けないため、問題の場所を2つに分けられます。そのうえで、次の順に確認します。

HubSpotから取得したコードと公開ページのソースにあるコードが一致しているのに動かない場合は、ページ内のJavaScriptのエラー、SSLや混在コンテンツ、同じフォームIDの重複を開発者に見てもらいます。

フォームの送信数とCRMの商談をつなげて見られていないと、送信が記録されない問題に気づくのが遅れます。週に1回、フォームごとの送信数を前週と比べ、急に0件になったフォームがないかを確かめる運用にしておくと、埋め込み先のページ改修でフォームが消えた場合も数日で気づけます。フォームと計測の設定を一度まとめて見直したい場合は、現在の設定を前提にご相談ください。

公開後の運用ルール｜命名・変更・非公開の扱い

フォームは作るのが簡単なぶん、使われていないものが増えます。名前の付け方、変更の記録、使い終わったフォームを非公開にする手順の3つを最初に決めておきます。

フォーム名は、一覧で用途と置き場所が分かるように「[用途]_[置き場所]_[開始年月]」のように付けます。「問い合わせ_サービスサイト_202609」「資料請求_ホワイトペーパーA_202609」とすれば、どのワークフローやレポートが何を見ているかを名前から追えます。ページごとにフォームを複製すると同じ用途のフォームが何十個にも増えるため、フォームはオファーの単位で作り、置き場所ごとに分ける必要が出たら非表示フィールドで区別します。

HubSpotのフォームは以前のバージョンに戻せません。項目を外す、選択肢を変える前には、変更日と内容を記録し、フォームの詳細ページで関連付けられたワークフローとセグメントを確かめます。自動返信や通知を含めて何本のワークフローがフォームを起点にしているかは、ワークフローの棚卸しと命名規則の中で一緒に管理します。

使い終わったフォームは削除せずに非公開にする

終了したウェビナーの申込フォームは、削除ではなく非公開にします。非公開にしたフォームは送信を受け付けなくなりますが、既存の送信データとアナリティクスは残り、あとで再公開もできます。HubSpotのページ、CTA、有効なワークフローで使われているフォームは、その参照を外すまで非公開にできません。外部サイトに埋め込んだコードは、非公開にしてもサイト側には残るため、ページからも外しておきます。

HubSpotフォームに置き換えないほうがよい場合

既存のフォームが業務の要件を満たしていて、HubSpotに送信を記録したいだけなら、フォームを作り直さずにHubSpot以外のフォームの取り込みか、Forms APIでの連携を選びます。

HubSpot以外のフォームの取り込みは、トラッキングコードが入ったページで、HTMLの静的なフォームの送信を収集する機能です。Eメールの入力欄と標準の送信ボタンがあり、iframeや送信時のJavaScriptを使っていないフォームが対象です。WordPressでContact Form 7などのフォームプラグインを使っている場合も、条件を満たせば送信を集められます。

ただし、取り込みには制約があります。値が入るのは単行テキストのプロパティだけで、フィールドとプロパティは名前とラベルで自動的に対応づけられ、手動では設定できません。日本語のフィールドは内部名での対応づけが効かず、プロパティ名でしか一致しません。同じブラウザーからの送信は、アドレスが違っても1件のコンタクトにまとまり、必須項目の入力漏れで送信ボタンを押し直した分も送信として記録されます。

選択肢の値をドロップダウンのプロパティに入れたい、申込の確認画面が必要、といった要件があるなら、開発者がForms APIで既存のフォームからHubSpotに送る形を選びます。反対に、問い合わせと資料請求の数本だけで特別な要件もないなら、HubSpotフォームで作り直したほうが、自動返信・通知・スパム対策をHubSpotの設定だけで管理できます。

フォームでは拾えない「その場で聞きたい質問」がある場合は、料金ページなどに限ってチャットを足す方法もあります。置くページや営業時間外の表示の決め方はHubSpotのチャットを置くページと営業時間外の受け方で判断できます。

まとめ

HubSpotフォームは、項目をどのプロパティに入れ、どこに置き、送信後に誰を動かすかを決めてから作るものです。見た目の調整と確認画面の判断は、その後に回します。

作成は新しいフォームエディターで行い、フィールドは既存のプロパティに接続します。外部サイトでは埋め込みコードに加えてトラッキングコードとサイトドメインの登録が必要で、WordPressではプラグインのブロックではなくカスタムHTMLブロックに貼ります。自動返信はシンプルワークフローで作り、マーケティングコンタクトの設定がオフだと届きません。共用端末から使うフォームは、Eメールアドレスごとにコンタクトを作る設定で分けます。

次にやることは、いま公開しているフォームを一覧で開き、フォームごとに「接続しているプロパティ」「置いているページ」「自動返信と通知の受信者」の3列を表に書き出すことです。どれかが空欄のフォームから直していけば、送信が記録されない、通知が誰にも届かない、という事故を公開前の段階で止められます。

よくある質問

HubSpotのフォームは無料で作れますか。

作れます。HubSpotのヘルプでは、フォームの作成はすべての製品とプランで使える機能とされています。無料ツールでもフォームごとに送信後の自動返信メールを1本作れます。マルチステップ、条件付きロジック、ドメインのブロック、外部CSSでのスタイル調整などは、Starter以上やProfessional以上の契約が条件になります。

HubSpotのフォームで確認画面は出せますか。

標準の設定では出せません。送信後の動作として選べるのは、サンキューメッセージの表示とリダイレクトです。確認画面が必要な場合は、埋め込みコードをJavaScriptで作り込むか、自社のフォームからForms APIで送る形になり、開発者が必要です。BtoBの問い合わせや資料請求では、確認画面を作らずに公開するのが一般的な判断です。

自動返信メールが届かないのはなぜですか。

最も多い原因は、送信者がマーケティングコンタクトになっていないことです。Marketing Hubでマーケティングコンタクトを契約している場合、ワークフローから送るメールはマーケティングコンタクトにしか届きません。フォームの設定で新規連絡先をマーケティングコンタクトにする項目を確認し、次に送信ドメインの認証と迷惑メールフォルダーを確かめます。

WordPressにHubSpotフォームを埋め込むにはどうすればよいですか。

HubSpotのプラグインかトラッキングコードをサイトに入れ、WordPressのドメインをHubSpotのサイトドメインに追加したうえで、埋め込みコードをカスタムHTMLブロックに貼ります。プラグインのフォームブロックやショートコードで挿入できるのは旧エディターのフォームです。貼っても表示されない場合は、公開ページのソースで埋め込みコードが書き換えられていないかを確認します。

使わなくなったフォームを非公開にするにはどうすればよいですか。

フォームエディターの［確認と更新］のメニューから非公開にします。非公開にしても送信データとアナリティクスは残り、再公開もできます。HubSpotのページ、CTA、有効なワークフローで使っているフォームは、先にその参照を外す必要があります。外部サイトに貼ったコードはサイト側からも外してください。