「アンケート用に別サイトを案内するのは、ユーザー体験的に微妙」「問い合わせフォームを自社サイト内で完結させたい」——多くの企業が、フォームを 自社サイトに埋め込み たいと考えています。
本記事では、Webサイトへのフォーム埋め込みの実装方法とベストプラクティスを解説します。
埋め込みのメリット
1. 離脱率が下がる
別サイトへのリダイレクトが入ると、平均で20〜30%の離脱が発生します。サイト内で完結すれば、その離脱を防げます。
2. デザイン統一感が保てる
自社サイトのデザインに合わせたフォームになれば、ブランド体験が損なわれません。
3. SEO 効果
フォームのあるページが自社ドメインにあれば、コンバージョンページへの内部リンク・トラフィックが SEO 評価につながります。
4. アクセス解析がシンプル
GA4 や GTM の計測タグが既存サイトに入っていれば、追加設定なしでフォーム到達・送信を計測できます。
埋め込みの3つの方式
方式1: iframe 埋め込み
最もシンプルな方式。1行のコードを HTML に貼り付けるだけで動きます。
<iframe src="https://example.com/forms/abc123/embed"
style="width:100%;height:600px;border:none;"
loading="lazy">
</iframe>
メリット:
- 実装が簡単
- セキュリティが分離される
- 元サイトのスタイルが影響を受けない
デメリット:
- 高さ調整が手動（コンテンツに応じた自動調整は難しい）
- iframe 内のクリックがアクセス解析に伝わりにくい
方式2: JavaScript 埋め込み
専用 JS スクリプトで動的に挿入する方式。
<div id="repoan-form-container"></div>
<script src="https://example.com/embed.js" data-form-id="abc123"></script>
メリット:
- 高さ自動調整可能
- 親ページとの双方向通信ができる
- イベントを GA4 に送信できる
デメリット:
- JS 実行が必要（ブラウザ非対応の影響）
- セキュリティ上の検討が必要（CSP 設定）
方式3: 直リンク誘導
埋め込みではなく、ボタンクリックで別タブにフォームを開く。
<a href="https://example.com/forms/abc123" target="_blank">
お問い合わせ
</a>
メリット:
- 実装が最もシンプル
- フォームの自由度が最大
デメリット:
- 離脱率が高い
レポアンの埋め込み機能
レポアンでは、フォームごとに 埋め込み用 HTML スニペット を自動生成。コピーして自社サイトに貼り付けるだけで使えます。
標準埋め込み（iframe）
<iframe src="https://repoan.com/f/abc123/embed"
style="width:100%;height:600px;border:none;"
loading="lazy"
title="お問い合わせ">
</iframe>
モーダル形式（ボタン経由）
<button onclick="repoanOpenForm('abc123')">お問い合わせ</button>
<script src="https://repoan.com/embed.js"></script>
ボタンクリックでモーダルが開く形式。サイトのフッターなど目立たない位置からでも誘導しやすい。
埋め込み時のデザイン統一
ブランドカラーの反映
レポアンでは、フォームの ブランドテーマ自動生成 機能で、自社サイトの URL を貼るだけでフォームの配色・フォント印象を抽出して反映できます。
例:
ブランドカラー設定:
- プライマリ: #2563eb（自社サイトから自動抽出）
- 背景: #ffffff
- フォント: Noto Sans JP
これにより、埋め込み先サイトと統一感のあるフォームになります。
モバイル対応
埋め込み iframe は、幅 100% 設定 が必須。レスポンシブで動かないと、スマホで横スクロールが必要になり離脱します。
<iframe src="..."
style="width:100%;max-width:600px;border:none;">
</iframe>
SEO への影響
良い影響
- フォームページが自社ドメインにあれば、被リンク効果が自社に蓄積
- 「○○ お問い合わせ」「○○ 資料請求」検索のランディングページになる
- 内部リンク構造が改善される
注意点
- iframe 内のコンテンツは Google にインデックスされにくい
- フォーム以外の テキスト・見出し は親ページに置くべき
<h1>お問い合わせ</h1>
<p>サービスに関するお問い合わせは下記フォームからどうぞ。</p>
<iframe src="..."></iframe>
アクセス解析の設定
GA4 でフォーム送信を計測
レポアンでは、フォーム送信時に親ページに postMessage イベント を発火させる仕組みがあります。これを GTM でキャプチャすれば、GA4 の form_submit イベントとして計測できます。
window.addEventListener('message', (event) => {
if (event.data.type === 'repoan-form-submitted') {
gtag('event', 'form_submit', {
form_id: event.data.formId,
});
}
});
コンバージョン設定
- フォーム送信完了 = コンバージョンとして計測
- 設問数が多い場合は 「30%到達」「60%到達」 など段階イベントも設定
ボット・スパム対策
埋め込みフォームは公開ページに露出するため、ボット送信のリスクがあります。
レポアンは Cloudflare Turnstile を標準搭載。reCAPTCHA より UX が良く（多くのケースでクリックすら不要）、ボットを自動ブロックします。
埋め込みフォームでもこの保護が デフォルトで有効 なので、追加設定不要です。
失敗パターン
- 埋め込み高さが固定で、コンテンツが切れる: 自動調整 JS を併用
- iframe 内で送信してもサンキューページに遷移しない: target を
_topにする設定が必要 - CSP 設定でブロックされる: 親ページの CSP に
frame-srcを追加 - モバイルで横スクロールが発生: width 100% を必ず設定
まとめ
埋め込みの選び方：
| 用途 | 推奨方式 |
|---|---|
| サイト内の主要フォーム | iframe または JS 埋め込み |
| フッターから常時アクセス可能に | モーダル形式 |
| シンプルに済ませたい | 直リンク |
レポアンの Webサイト埋め込み 機能なら、HTML 1行をコピペするだけで実装完了。Cloudflare Turnstile によるボット対策も標準装備で、追加設定なくスパム回答をブロックします。