外部フォームを自社サイト(ドメイン)内に埋め込む方法

顧客からの問い合わせや申し込みを受け付ける際、Googleフォームや企業提供の専用フォームシステムなど、外部のフォームサービスを利用するケースは少なくありません。しかしそのまま外部フォームに遷移させてしまうと、ユーザーに「別サイトへ飛ばされた」という印象を与え、離脱につながる恐れがあります。

そこで、本記事では、例えば Googleフォームのような外部のフォームを、自社サイトの一部として自然に表示させる方法をご紹介します。特にWordPressサイト運営者向けに、設定方法やメリット・デメリット、運用上の注意点も解説します。

WordPressに外部フォームを埋め込む方法

1. 固定ページを作成

まず、WordPressの管理画面から新しく固定ページを作成します。たとえば、「お問い合わせフォーム」として /contactfrom/ というURLを設定します。

2. iframeで外部フォームを埋め込む

固定ページの本文に、以下のようなHTMLブロックを記述します。

これにより、自社のページ（例：https://www.example.com/contactfrom/）上で、上記の外部フォームをそのまま表示できます。

スマホ表示やスクロール問題への対応

iframeを使用すると、特にスマートフォン表示時に以下のような課題が出ることがあります：

• スクロールが「引っかかる」感じがする

• 確認画面に遷移した際に、ページ下部が表示されてしまう

これらは、CSSとJavaScriptの工夫で回避できます。たとえば iframe の高さを余裕をもって指定し、onload イベントでページを最上部に戻すようにすれば、ユーザー体験は大きく改善します。

埋め込みのメリット

1. ページ移動がないため、ユーザーが離れにくい

リンクで外部フォームへ遷移させる場合、「別サイトに飛ばされた」と感じたユーザーが離脱するリスクがあります。しかしページ内にフォームを表示することで、サイト内で完結している印象を与え、安心感と一貫性を保てます。

2. デザインが崩れにくい

外部フォームをポップアップなどで開く場合、スマートフォンでの動作が不安定になることがあります。iframeでページに常設することで、レイアウト崩れを防ぎ、全体のデザインとの統一感が保てます。

3. URLを共有・計測しやすい

例えば /contactfrom/ という自社内のURLであれば、Google AnalyticsやGA4などでのアクセス分析や目標設定も簡単です。マーケティングや広告連携でも有利になります。

デメリットと注意点

1. iframeの中身は操作・取得できない（クロスドメイン制限）

外部サイトである以上、iframe 内の内容（フォームの状態や入力内容）をJavaScriptで取得したり操作したりすることはできません。たとえば「送信完了後に表示を切り替える」といった動的処理はできない点に注意が必要です。

2. 高さ調整が難しい

フォームの確認画面や完了画面に遷移したとき、内容が変わっても iframe の高さは自動では変わりません。したがって、最初から「十分な高さ」（例：3000px）を指定しておく必要があります。

3. SEOには影響しない

iframe 内の内容はGoogle検索インデックスには含まれません。したがって、フォームの中にどれだけキーワードを含めてもSEOには貢献しません。あくまでユーザー体験の改善策として位置づけるべきです。

活用例と応用

以下のような用途において、今回の手法は非常に効果的です：

• 資料請求フォーム（PDFダウンロードなど）

• 学校・イベント・キャンプなどの申込受付

• 外部業者が管理している安全なフォーム（自治体、旅行会社など）

• Googleフォームをブランディング内で使いたいとき

まとめ

外部のフォームであっても、iframe を活用すれば自社ページ上に自然に表示させることができます。ユーザーからは「いつものサイトの中にあるフォーム」に見えるため、安心して入力が進められ、送信完了までの離脱を防ぐことが可能です。

見た目の自然さと利便性を両立させるこの方法は、フォーム構築やページ誘導の改善において大きな武器になります。開発コストを抑えつつ、ユーザー体験を向上させたい場合には、ぜひ活用してみてください。