HubSpotフォーム 完全ガイド：作成・埋め込み・スパム対策・コンタクト連携まで

「HubSpot フォーム」でこの記事に辿り着いた方が知りたいのは、HubSpotのフォームで何ができるか、どう設置するか、なぜContactForm 7より良いのか？という点だと思います。この記事では、フォームの作成から埋め込み・スパム対策・コンタクト連携まで、実務で必要になることをまとめて解説します。

---

HubSpotフォームとは

HubSpotのフォームは、ウェブサイトに設置してコンタクト情報を収集するための機能です。送信されたデータは自動でHubSpot CRMに蓄積されます。

一般的なフォームプラグイン（ContactForm 7など）との最大の違いは、フォームと顧客データベースが直結している点です。フォームを送信した人の情報が、そのまま「コンタクト」として管理・活用できる状態になります。

HubSpotフォームの種類

HubSpotには3つのフォーム形式があります。

種類	表示形式	主な用途
埋め込みフォーム	ページ内に固定表示	問い合わせページ・LP
ポップアップフォーム	スクロールやタイマーで表示	メルマガ登録・資料請求
スティッキーバナー	画面上下に固定表示	キャンペーン・お知らせ

スタートアップが最初に使うのは、問い合わせページに設置する「埋め込みフォーム」がほとんどです。

フォームの作成手順

ステップ1：フォーム作成画面を開く

HubSpotダッシュボードから「マーケティング → フォーム」を開き、「フォームを作成」をクリックします。

ステップ2：フォームの種類を選ぶ

「埋め込みフォーム」「ポップアップフォーム」「スティッキーバナー」の中から選択します。問い合わせフォームとして設置する場合は「埋め込みフォーム」を選択します。

ステップ3：フィールドを追加する

左パネルから必要なフィールドをドラッグ＆ドロップで追加します。

よく使うフィールド：

• 名前（姓・名）
• メールアドレス（必須）
• 電話番号
• 会社名
• メッセージ（テキストエリア）

フィールド設定のポイント：
各フィールドは「HubSpotのコンタクトプロパティ」と紐づいています。「名前」フィールドを追加すると、送信された値がコンタクトの「名前」プロパティに自動保存されます。

重要： フィールドの「ラベル名」と「プロパティ」が正しく対応しているか確認してください。特に「お名前」のように表示名を変えている場合、内部のプロパティ（firstname / lastname）と正しく紐づいているかが重要です。

カスタムプロパティを使いたい場合は、事前にHubSpotの「設定 → プロパティ」でプロパティを作成しておき、フォームから呼び出します。

ステップ4：送信後のアクションを設定する

フォームを送信した後の動作を設定します。

設定	内容
サンクスメッセージを表示	フォームがサンクスメッセージに切り替わる
サンクスページへリダイレクト	指定のURLへ遷移する（コンバージョン計測に有利）

広告のコンバージョン計測にサンクスページのURLを使う場合は「ページビューで計測する」ためにリダイレクト設定を使います。

ステップ5：フォームのオプションを設定する

• フォームの言語： 日本語に設定します
• 送信ボタンのラベル： 「送信する」「問い合わせを送る」など任意のテキスト
• 必須フィールドのエラーメッセージ： 日本語に変更する

HubSpotのデフォルトは英語表記になっているため、日本語サイトでは必ず言語設定を確認します。

フォームをウェブサイトに埋め込む

WordPressへの埋め込み

フォームの「アクション → 埋め込みコード」でHTMLスニペットを取得します。

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXXXXXXX",
    formId: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
  });
</script>

このコードをWordPressのブロックエディタ「カスタムHTML」ブロックに貼り付けます。

注意： HubSpotのトラッキングコードがサイトに設置されていないと、フォームからの流入元情報が正しく記録されません。先にトラッキングコードの設置を確認してください。

→ HubSpotのトラッキングコードを設置する方法

iframeでの埋め込みについて

「hubspot iframe」「hubspot form iframe」「hubspot iframe embed」といった検索でこの記事を見つけた方へ向けて補足します。

HubSpotフォームをiframeで埋め込む方法はサポートされていますが、公式の埋め込みコード（上記のJavaScript方式）の方が推奨です。理由は以下のとおりです。

• JavaScript方式ではコンタクトの流入元（Original Source）が正しく記録される
• iframeではサードパーティCookieの問題で流入元情報が欠落することがある
• JavaScript方式ではフォーム送信後のアクション（リダイレクト・GTMイベント）が正しく動作する

既存のCMSの制約でJavaScriptが使えない場合に限り、iframeを検討してください。

フォームのスパム対策

HubSpotフォームには独自のスパムフィルタリング機能が内蔵されています。ContactForm 7のようにreCAPTCHAを別途設定しなくても、ボットによる自動送信の大半をブロックします。

ContactForm 7との比較

比較項目	CF7 + reCAPTCHA v3	HubSpotフォーム
スパム対策の精度	高い	高い（独自フィルター）
全ページへのスクリプト読み込み	必要（reCAPTCHA）	不要
ページ速度への影響	大きい	小さい
コンタクトへの自動変換	別途連携が必要	自動
広告流入元の記録	困難	自動記録

CF7のreCAPTCHA問題とHubSpotフォームへの移行については、こちらで詳しく解説しています。

→ HubSpotフォームとreCAPTCHA｜CF7から移行すべき理由

コンタクト連携の仕組み

フォームが送信されると、HubSpotは以下の処理を自動で行います。

1. コンタクトの作成または更新
メールアドレスをキーとして、新規コンタクトを作成します。同じメールアドレスがすでに存在する場合は既存コンタクトを更新します。

2. 流入元の記録
コンタクトが初めてサイトに訪問したときの流入元（検索・広告・SNSなど）を「Original Source」として記録します。これはコンタクトが作成された後に変わりません。

3. 行動履歴の紐づけ
トラッキングコードが記録していた匿名の訪問履歴が、フォーム送信の瞬間にそのコンタクトと紐づきます。「このコンタクトはフォーム送信前に3回サイトを訪問し、料金ページを見ていた」という情報が残ります。

4. ワークフローのトリガー
フォーム送信を条件としたワークフローが起動します。担当者への通知メール送信・コンタクトへの自動返信・リストへの追加などが自動実行されます。

フォーム送信後のワークフロー設定例

フォームと組み合わせて設定しておくべきワークフローを2つ紹介します。

ワークフロー①：担当者への通知

トリガー：フォーム「問い合わせフォーム」が送信された
アクション：担当者にメール通知
　　　　　　（件名：新規問い合わせ [コンタクト名] 様より）

ワークフロー②：コンタクトへのサンクスメール

トリガー：フォーム「問い合わせフォーム」が送信された
アクション：コンタクトにメールを送信
　　　　　　（件名：お問い合わせを受け付けました）

ワークフローの設定は「自動化 → ワークフロー」から行います。

フォームのパフォーマンス確認

「マーケティング → フォーム」の一覧画面では、フォームごとの以下のデータが確認できます。

指標	意味
表示回数	フォームが表示された回数
送信数	フォームが送信された回数
送信率	表示回数に対する送信率

送信率が低い場合は、フォームの項目数が多すぎる・必須項目が多すぎる・フォームの表示位置がわかりにくいなどの原因が考えられます。

HubSpot Starter 導入支援・運用サポート

HubSpotのフォームは、「コンタクトの収集」と「データベースへの自動蓄積」を同時に行えるのが最大の特徴です。

ContactForm 7などのサードパーティフォームと比べてスパムに強く、ページ速度への影響が少なく、CRMとの連携がシームレスです。特にGoogle広告などを運用している場合、流入元がコンタクトに自動記録されることで、「どの広告が成果につながったか」の分析が初めて可能になります。

当社では、HubSpotフォームの設置から、ContactForm 7からの移行まで対応しています。

---