HubSpotフォームをサイトに埋め込む方法｜送信前の確認画面は作れません。サンクスページの作り方と、表示されないときの12の原因

公開 2026年9月25日

---

HubSpotでフォームを作って、自社サイトに貼り付ける。ここまでは10分で終わります。詰まるのはその先です。

「日本のサイトでよくある、送信前に入力内容を見せる確認画面はどこで作るのか」「サンクスページに飛ばしたいが設定が見つからない」「貼ったのにフォームが表示されない」。

結論から言うと、送信前の確認画面を作る設定は、HubSpotのフォーム機能には用意されていません。公式ヘルプで送信後の挙動として選べるのは、お礼メッセージの表示か、指定ページへのリダイレクトです。

この記事では、その前提を先に押さえたうえで、埋め込み・サンクスページ・トラブル切り分けを順に扱います。

先に知っておくこと：送信前の「確認画面」はありません

日本のウェブサイトでは、問い合わせフォームが「入力画面 → 確認画面 → 完了画面」の3ステップになっているのが一般的です。長く使われてきた型なので、これが当たり前だと思っている方も多いはずです。

HubSpotのフォームは、この型を想定して作られていません。公式ヘルプのフォーム作成・編集の項目には、送信前に入力内容を確認させる設定の記載がありません。送信ボタンを押したら、そのまま送信されます。

これは不具合ではなく、設計思想の違いです

海外のフォームは「入力したらすぐ送信」が主流です。ステップを増やすと離脱が増えるという考え方が背景にあります。HubSpotもその流れに沿っています。

とはいえ、日本の取引先に「確認画面がないと不安だ」と言われることは実際にあります。どうしても必要なら、次の3つのどれかで折り合いをつけてください。

1〜10人の会社であれば、1つ目で問題になることはほとんどありません。確認画面がないことより、入力欄が多くて離脱されることのほうが痛いからです。

送信後に選べるのは2種類だけです

送信後の挙動として、公式に挙げられているのは次のとおりです。

• お礼メッセージを表示する（フォームがあった場所に、そのままメッセージが出る）
• 指定したページにリダイレクトする（自社サイトのページ、外部URL、ミーティングリンク、支払いリンクなど）

この2つが基本です。どちらを選ぶかで、後の運用が変わります。

埋め込みコードを取得する手順（エディターが2種類あります）

ここで1つ注意があります。HubSpotのフォームエディターには新旧2種類があり、埋め込みコードの取得経路が違います。手順を調べても画面が一致しないのは、たいていこれが原因です。

新しいエディターの場合

1. 左メニューの「マーケティング」から「フォーム」を開きます
2. 対象のフォームの「編集」に入ります
3. 「確認および更新」をクリックします
4. 「更新」を押します
5. 「埋め込みコードを取得」をクリックします
6. 「コピー」でコードを取得します

「更新」を押さないと埋め込みコードにたどり着けません。ここで止まる人が多いポイントです。作りかけのフォームは、いったん更新して確定させてください。

従来のエディターの場合

1. 「マーケティング」から「フォーム」を開きます
2. 対象のフォームの「編集」に入ります
3. 「埋め込み」を開きます
4. 「コピー」でコードを取得します

こちらのほうが手順は短いです。自分がどちらのエディターを使っているかは、編集画面を開けば見分けがつきます。

WordPressに設置する2つの方法

WordPressのページや投稿にフォームを置く方法は2つあります。

方法A：埋め込みコードを貼る

取得した埋め込みコードを、WordPressの編集画面でHTMLとして貼り付けます。ブロックエディターなら「カスタムHTML」ブロックを使ってください。

「段落」ブロックに貼るとうまくいきません。コードがそのまま文字として表示されるか、タグが壊れます。必ずHTML用のブロックに入れてください。

方法B：ショートコードを使う

HubSpotのWordPress用プラグインを入れている場合は、ショートコードでも設置できます。コードを扱わずに済むので、更新を担当する人がコードに不慣れなときはこちらが安全です。

どちらを選ぶか

入力欄は5つまでに絞る

確認画面がないことを前提にすると、打つ手は1つです。そもそも間違えようがない量まで入力欄を減らす。これが確認画面の代わりになります。

問い合わせフォームに必要なのは5つだけ

右側の項目は、必要になったら返信のやりとりの中で聞けます。先に全部集めようとするほど、送信されずに終わります。

「どこで知りましたか」は特に外してください

知りたい気持ちは分かりますが、答える側にとっては手間でしかありません。しかも自己申告なので精度も低く、施策の判断には使えません。

流入元を知りたいなら、トラッキングコードが入っていればコンタクトのレコードに元のページや参照元が自動で記録されます。入力させる必要がありません。

電話番号は必須にしない

電話番号を必須にすると、送信率が目に見えて落ちます。「電話されるのが嫌だから送らない」という判断が働くためです。

本当に電話が必要なのは、相手が急いでいるときです。その場合は相手のほうから電話番号を書いてくれます。任意項目にしておくだけで十分です。

確認画面の代わりに自動返信で内容を返す

入力欄を減らしてもなお「確認させたい」という場合、実務的な代替はこれです。送信直後の自動返信メールに、受け取った内容をそのまま載せて本人に返します。

なぜこれで足りるのか

確認画面が果たしている役割は2つあります。誤入力に気づかせることと、「ちゃんと送れた」という安心を与えることです。

自動返信メールは、この2つを両方カバーします。むしろ手元に記録が残るぶん、確認画面より親切とも言えます。相手は後から見返せますし、こちらも「送った・送っていない」の水掛け論を避けられます。

自動返信に必ず入れる3点

1. 受け取った内容（少なくとも名前・メールアドレス・問い合わせ内容）
2. 返信の目安（「3営業日以内にご連絡します」）
3. 訂正の連絡先（「内容に誤りがあれば、このメールに返信してください」）

3つ目が確認画面の代わりとして効きます。誤って送ってしまった人に、直す道を渡しておく。これがあれば、確認画面がなくても運用は回ります。

自動返信は「送信者の名前」に気をつける

自動返信の差出人が会社名だけだと、事務的に見えます。担当者名を入れておくと、返信のハードルが下がります。名前を出せない事情があるなら「〇〇株式会社 お問い合わせ担当」のように、人がいることが分かる書き方にしてください。

サンクスページの正しい作り方

リダイレクトを選ぶ場合、飛ばす先のページを用意します。作り方に決まりはありませんが、押さえておくと後が楽になる点が3つあります。

検索エンジンに載せない

サンクスページが検索結果に出てしまうと、フォームを通っていない人が直接たどり着けます。完了数を数えている場合、その数字が狂います。noindexの設定を入れておいてください。

次の行動を1つだけ置く

「ありがとうございました」で終わらせるのはもったいない場所です。とはいえ、あれもこれも置くと何も選ばれません。

置くのは1つだけにしてください。資料請求なら「他の資料も見る」、問い合わせなら「よくある質問を見る」。相手が待っている時間に、自然に読めるものを1つです。

返信の目安を書く

「3営業日以内にご連絡します」の一行があるだけで、問い合わせの催促が減ります。書いていないと、翌日に「届いていますか」という電話が来ます。この一行は、自社の手間を減らすために書きます。

フォームが表示されない・送信できないときの12の原因

公式に挙げられている原因を整理しました。上から順に、よくある順です。

特に多いのは上から4つです

1〜10人の会社で実際に起きるのは、ほとんどが上位4つに収まります。

トラッキングコードが入っていないのは、フォームだけ先に設置したときによくあります。フォームはトラッキングコードに依存するので、これが無いと動きません。

CMSの自動変換は気づきにくい原因です。WordPressを含む多くのCMSは、貼り付けたコードの記号を自動で置き換えることがあります。たとえば「&」が別の表記に変わると、その時点でコードとして成立しなくなります。カスタムHTMLブロックを使うのは、これを避けるためでもあります。

切り分けは「単体のページ」から始める

原因が12個もあると、どこから見ればいいか分かりません。公式が示している切り分けの順番が合理的なので、そのまま使ってください。

1. 何も無い空のページを1枚作り、そこにフォームだけを貼って表示を確認します。ここで動けば、フォーム自体は正常です。元のページ側に原因があります
2. トラッキングコードが動いているかを確認します
3. HubSpot側の埋め込みコードと、実際に貼ったコードを比べます。文字単位で差分を見てください
4. 設置先のドメインがトラッキング設定に登録されているか確認します
5. ブラウザーのコンソールを開き、エラーが出ていないか見ます

この順番の良いところは、1番で範囲が半分に絞れることです。空のページで動くなら、原因は「フォーム」ではなく「置いた場所」にあると確定します。ここを飛ばして設定を触り始めると、どこを直したのか分からなくなります。

設置したあとに必ず確認すること

表示されただけで終わりにしないでください。実際に1回、自分で送信してみます。確認するのは次の4点です。

1. コンタクトが作られたか。HubSpotのコンタクト一覧に、送信した情報が入っているか
2. 送信後の挙動が意図どおりか。お礼メッセージが出るか、サンクスページに飛ぶか
3. 通知が届くか。自社の担当者に送信の通知が来るか。ここが抜けていると、問い合わせに気づけません
4. スマートフォンで崩れないか。入力欄の幅、ボタンの位置、キーボードを出したときの見え方

3つ目の通知は、意外と見落とされます。「フォームは動いているのに、問い合わせに何日も気づかなかった」という事故の原因はここです。テスト送信のとき、通知が来るまで確認してください。

送信されたデータがどこに入るかを知っておく

設置が終わったら、データの流れも押さえておいてください。ここを知らないと、あとで「同じ人が何件も登録されている」といった問題に発展します。

メールアドレスが同じなら、同じコンタクトに追記されます

HubSpotはメールアドレスでコンタクトを見分けます。すでに登録のあるアドレスからフォームが送信されると、新しいコンタクトは作られず、既存のレコードに送信履歴が追記されます。

つまり、同じ人が資料請求と問い合わせを別々に送っても、1件のレコードにまとまります。これは便利な挙動です。

逆に、アドレスが違えば別人として登録されます

同じ人でも、会社のアドレスと個人のアドレスで送れば2件になります。担当者が異動して社内アドレスが変わった場合も同様です。

この重複は避けようがないので、定期的にまとめる作業が必要になります。件数が増えてから気づくと大変なので、月に一度は名前の重なりを眺めておくと安全です。

フォームの項目名とプロパティーの対応を確認する

フォームの入力欄は、それぞれHubSpot側のプロパティー（項目）に紐づいています。この対応が意図どおりかを、最初の1回だけ確認してください。

よくあるずれが「会社名」です。コンタクトの会社名プロパティーに入るのか、会社レコードのほうに入るのかで、後のレポートが変わります。フォームの編集画面で各項目をクリックすると、どのプロパティーに入るかが表示されます。

新しく項目を足すときは、既存のプロパティーを選べないか先に探してください。似た名前のプロパティーを新規に作ってしまうと、データが2箇所に分かれます。これも後から直すのが面倒な部類です。

まとめ

HubSpotフォームの設置でつまずく点は、だいたい決まっています。

1. 送信前の確認画面は作れません。公式ヘルプに該当する設定の記載がありません。入力欄を減らす、自動返信で内容を返す、といった形で折り合いをつけます
2. 送信後は「お礼メッセージ」か「リダイレクト」の二択。完了数を数えたいならリダイレクトを選び、サンクスページを1枚用意します
3. 埋め込みコードの取得経路は、エディターの新旧で違います。新しいほうは「確認および更新」→「更新」を通らないとコードにたどり着けません
4. 表示されないときは、空のページに貼って切り分けます。そこで動けば原因はページ側です

設置が終わったら、必ず自分で1回送信してください。特に通知が届くかどうかは、テストしないと分かりません。

よくある質問（FAQ）

入力内容の確認画面はどうしても作れませんか

HubSpotのフォーム機能の範囲では、公式ヘルプに確認画面を挟む設定の記載がありません。どうしても必要な場合は、入力欄を減らして誤送信のリスクを下げるか、送信後の自動返信に入力内容を含めて本人に返す形で代替してください。

フォームは無料版でも使えますか

フォームの作成と外部サイトへの埋め込みは、すべての製品とプランで利用できます。条件付きロジック（回答に応じて表示する項目を変える機能）はStarter以上です。

埋め込みコードが見つかりません

新しいエディターの場合、「確認および更新」から「更新」を押すまで埋め込みコードの取得に進めません。従来のエディターなら「埋め込み」から直接コピーできます。画面が手順と違う場合は、エディターの種類を確認してください。

WordPressに貼ったのに表示されません

「段落」ブロックではなく「カスタムHTML」ブロックに貼っているか確認してください。段落ブロックに貼ると、コードの記号がCMS側で自動変換されて壊れます。それでも直らない場合は、空のページを1枚作ってフォームだけを貼り、そこで動くかを見てください。

サンクスページはHubSpotで作る必要がありますか

必要ありません。自社サイトの通常のページでも、外部URLでも指定できます。ただし検索結果に出ないようnoindexを設定しておくことと、返信の目安を1行書いておくことをおすすめします。

フォームは動くのに通知が来ません

フォームの設定にある通知先を確認してください。表示と送信が正常でも、通知の宛先が設定されていなければ担当者には届きません。設置後のテスト送信では、コンタクトの作成だけでなく通知の到着まで確認してください。

プライバシーポリシー　・　お問い合わせ　・　このサイトについて