埋め込みの2つの方法
自社サイトにフォームを載せる代表的な方法は次の2つです。
1. リンクで誘導
「お問い合わせ」ボタンから、フォームの公開URLを開く方法です。実装が最も簡単で、表示トラブルも少ないです。
2. iframeで埋め込み
フォーム画面をサイト内の一部として表示します。多くのフォームサービスが、埋め込み用HTMLコードを提供しています。
埋め込み時のチェックリスト
- スマホ表示 — 親ページとフォームの幅がはみ出していないか
- HTTPS — 自社サイトがHTTPSなら、フォームもHTTPSで提供されるか
- CSP（Content Security Policy） — サーバ設定でiframeがブロックされていないか
- 高さ — iframeの高さが足りず、スクロールが二重になっていないか
- 読み込み速度 — 埋め込みによってページの表示が遅くならないか
うまく表示されない場合は、まずフォームURLを直接開くことで、フォーム本体の問題か埋め込み側の問題かを切り分けてください。
WordPressやCMSへの設置
多くのCMSでは「カスタムHTML」ブロックにiframeコードを貼れます。テーマによっては幅100%用のCSSを追加すると見た目が整いやすくなります。
公開前の確認
- PC・スマホの両方で表示と入力を試す
- テスト送信が届くか（通知・自動返信）
- 本番リンクをサイトに載せる
最初はリンク方式で運用し、デザイン上サイト内に置きたくなった段階でiframeに切り替える、という進め方もよくあります。
テンプレートから始める
埋め込むフォーム自体がまだない場合は、フォームテンプレート一覧から近い用途のテンプレートを選ぶところから始めてみてください。
よくある質問
iframeで埋め込むとSEOに影響はありますか？
iframe内のコンテンツは、埋め込み元のページとは別のページとして扱われるのが基本です。フォームページ自体のSEOを重視する場合は、埋め込みだけでなく、独立したページとしても公開しておくとよいでしょう。
スマホでフォームが正しく表示されないときは？
まずiframeの幅指定を固定値ではなく100%やレスポンシブ対応にしているか確認してください。それでも崩れる場合は、フォーム本体のURLをスマホで直接開き、フォーム側の問題か埋め込み側の問題かを切り分けましょう。
iframeとリンク誘導、どちらを選べばよいですか？
サイトのデザインに統一感を持たせたい場合はiframe、実装や表示トラブルを避けたい場合はリンク誘導が向いています。迷ったらまずリンク誘導で公開し、必要に応じてiframeへ切り替えるのが安全な進め方です。