STUDIOで作ったサイトにHubSpotのフォームを設置したい！この組み合わせを検索している方が増えています。STUDIOはノーコードで洗練されたサイトを作れる反面、フォームまわりの外部連携には少し手順が必要です。この記事では、STUDIOへのHubSpotフォームの埋め込み方法を、実際に設定した経験をもとに解説します。
Growth with Your Expertise.
HubSpot Starter 導入支援
スタートアップ企業（個人〜小規模チーム）向けにHubSpotの導入支援と運用サポートのコンサルティングを行っています。
なぜSTUDIOにHubSpotフォームを使うのか
STUDIOにはフォーム機能が標準搭載されています。それでもHubSpotフォームを使う理由は主に2つです。
理由1：コンタクト管理をHubSpotに一元化したい
STUDIOのフォームはメール転送が中心で、送信データをデータベースとして管理する機能は限定的です。HubSpotフォームに切り替えると、送信データが自動でHubSpotのCRMに蓄積され、流入元（どの広告・検索からサイトに来たか）も一緒に記録されます。
理由2：Google広告のコンバージョン計測を正確にしたい
STUDIOのフォームからGoogleタグマネージャーで広告コンバージョンを計測しようとすると、設定が複雑になりがちです。HubSpotフォームはコンバージョンイベントの発火がしやすく、計測精度が上がります。
STUDIOへのHubSpotフォーム埋め込み手順
前提：HubSpotのトラッキングコードの設置
HubSpotフォームを正しく動作させるには、STUDIOサイトにHubSpotのトラッキングコードが先に設置されている必要があります。
STUDIOでのトラッキングコード設置手順：
- STUDIOの管理画面で対象プロジェクトを開く
- 「設定 → SEO・ OGP」を開く
- 「headタグに追加するコード」にHubSpotのトラッキングコードを貼り付ける
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/あなたのポータルID.js"></script>- 「保存」して公開
HubSpotでフォームを作成する
HubSpotダッシュボードの「マーケティング → フォーム → フォームを作成」から埋め込みフォームを作成します。
STUDIOに設置するフォームで注意するポイント：
- フィールドは必要最小限に絞る（メールアドレス・名前・メッセージ程度）
- 送信後の動作は「サンクスページへリダイレクト」が推奨（STUDIOのURLに設定する）
- フォームの言語を「日本語」に設定する
STUDIOにHubSpotフォームを埋め込む
HubSpotフォームの埋め込みには「埋め込みコード（JavaScript方式）」を使います。
HubSpotで埋め込みコードを取得：
フォームの「アクション → 埋め込みコード」をクリックすると、以下のようなコードが表示されます。
<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>STUDIOへの設置：
- STUDIOのエディタを開く
- フォームを設置したい場所に「埋め込み」コンポーネントを追加する
（左パネルの「追加 → 埋め込み」から挿入） - 「HTMLを埋め込む」を選択
- HubSpotの埋め込みコードを貼り付ける
- プレビューでフォームが表示されることを確認
動作確認の手順
埋め込みが完了したら、必ずテスト送信で動作を確認します。
確認チェックリスト：
- STUDIOの公開サイトでフォームが表示されるか
- テスト用のメールアドレスで送信する
- HubSpotの「コンタクト」に新しいコンタクトが作成されているか
- 作成されたコンタクトに「Original Source」が記録されているか
- サンクスページへのリダイレクトが機能しているか
- 担当者への通知ワークフローが動いているか（設定している場合）
STUDIOでのHubSpotフォーム活用でよくある問題
問題1：フォームが表示されない
原因として多いケース：
- HubSpotのトラッキングコードが未設置またはサイト全体に設置されていない
- STUDIOの「埋め込み」コンポーネントにコードが正しく貼り付けられていない
- STUDIOの公開前はプレビューのURLが異なるため、フォームが制限される場合がある
対処法： 必ず「公開済みのURL」でフォームの表示を確認してください。プレビューモードでは正しく動作しないことがあります。
問題2：フォームが送信されてもコンタクトが作成されない
確認すること：
- HubSpotのポータルIDとフォームIDが埋め込みコードと一致しているか
- HubSpotのフォーム設定で「外部ページへの埋め込み」が有効になっているか
- STUDIOのサイトドメインがHubSpotで制限されていないか
問題3：フォームのデザインがサイトの雰囲気と合わない
HubSpotフォームのデザインはCSSでカスタマイズできます。STUDIOの埋め込みコンポーネントでCSSを追加する、またはHubSpot側でフォームのスタイルを調整することで対応できます。
STUDIOの標準フォームとHubSpotフォームの使い分け
| 用途 | 推奨 |
|---|---|
| 問い合わせフォーム（コンタクト管理・広告計測が必要） | HubSpotフォーム |
| アンケート・簡単なデータ収集（CRM不要） | STUDIOの標準フォーム |
| 会員登録・複雑な条件分岐 | 要件に応じて別途検討 |
CRMとの連携・広告コンバージョン計測・流入元の記録が必要な「問い合わせフォーム」にはHubSpotフォームが適しています。
HubSpot Starter 導入支援・運用サポート
STUDIOへのHubSpotフォームの埋め込みは、トラッキングコードの設置と埋め込みコンポーネントへのコード貼り付けで完了します。設定自体は30分程度で可能です。
設置後は「フォームを送信した訪問者がどの広告・検索キーワードから来たか」がHubSpotのコンタクトに自動記録されます。STUDIOでサイトを作り、HubSpotで顧客管理・広告計測をしたいという場合に、最もコストパフォーマンスの良い構成の一つです。
当社では、STUDIOサイトへのHubSpot連携設定もサポートしています。
ご依頼・相談受付
ご依頼は下記のフォームから受付けております。
お気軽にご連絡ください。
