コラムへ戻る
WordPress運用5

WordPressにフォームをiframeで埋め込む運用はあり?制作会社目線の使いどころ

WordPressサイトのフォームを、あえて外部サービスで作ってiframeで埋め込む選択肢があります。制作会社目線で、向いている案件と提案前に見ておきたい条件を分けます。

WordPressサイトのフォームは、必ずWordPress内で作らなければいけないわけではありません。フォームだけ外部サービスで作り、固定ページやLPにiframeで埋め込む運用もあります。最初は少し遠回りに見えますが、制作会社にとっては保守範囲を分けられる選択肢です。

WordPressにiframeフォームを埋め込む作業に合うノートパソコン写真

フォームだけ別管理にしたほうが楽な案件

iframe埋め込みコードを確認する作業を連想させる写真

キャンペーンLPを何本も作る、フォーム項目をクライアントが頻繁に変える、回答一覧やCSV出力をクライアント側で見たい。こうした案件では、フォーム部分だけを外に出すと、項目変更や回答確認をクライアント側に渡しやすくなります。

たとえば月ごとにキャンペーンLPを作る案件では、LPごとに資料請求、セミナー申込、無料相談の項目が少しずつ変わります。WordPress側で毎回フォームを実装するより、フォームサービス側で複製して調整し、iframeだけ差し替えるほうが制作と確認を分けやすくなります。

たとえば制作会社が複数店舗のキャンペーンページを保守している場合、店舗ごとに来店希望日、担当店舗、備考欄だけを変えたいことがあります。WordPress側にフォーム設定を増やし続けるより、フォーム側で店舗別に複製し、ページには対応するiframeを貼るほうが、更新担当者と回答確認担当者を分けやすくなります。

WordPress側はページ本体の更新に集中し、フォーム作成や回答管理は別ツールで行う分担です。複数サイトを保守する制作会社ほど、フォームまわりの確認作業を減らしやすくなります。

特に、資料請求、無料相談、イベント受付のように用途ごとに項目が変わるフォームでは、WordPress内で1つずつ実装するより、フォーム側で複製して調整するほうが早いことがあります。

Contact Form 7のままでよい案件

問い合わせフォームが1つだけで、項目変更もほとんどなく、通知メールだけで足りているなら、Contact Form 7のままでも運用できます。慣れているツールを使い続けること自体は悪くありません。

たとえば会社概要サイトに一般問い合わせが1つだけあり、通知先も固定で、回答はメールで確認できれば十分という案件なら、外部フォームへ切り出す理由は強くありません。既存の保守手順で送信テストとバックアップを続けるほうが、クライアントにも説明しやすいです。

ただし、確認画面、回答保存、CSV出力、複数LPごとのフォーム管理などが必要になったら、WordPress内に機能を足すか、外部フォームへ切り出すかを見直すタイミングです。

判断するときは、Contact Form 7を否定するのではなく、サイト本体の保守とフォーム運用を分けたほうがよいかで考えます。保守範囲が明確なら、既存のままでも十分です。

埋め込んだあと、スマホで必ず見る

iframeで埋め込む場合は、スマートフォンで高さや余白が自然に見えるか、フォームだけ外部サービスらしく浮かないか、送信後の完了画面がページ文脈に合っているかを確認します。

たとえばPCではきれいに見えていても、スマホではiframeの高さが足りず、送信ボタンの下に余白が出たり、完了画面のメッセージが途中で切れたりすることがあります。フォーム単体のプレビューだけでなく、実際のWordPressページに埋め込んだ状態で、入力、確認、完了まで通します。

また、個人情報を扱うフォームでは、どのサービスに回答が保存されるのかをクライアントと共有しておく必要があります。見た目だけでなく、運用と責任範囲もセットで決めます。ここを曖昧にすると、あとで説明に困ります。

埋め込みフォームのスマートフォン表示を確認する写真
  • スマートフォンで埋め込み表示を確認する
  • 完了画面の文言をLPに合わせる
  • 回答データの保存先をクライアントに説明する

Formieでの使い方

Formieでフォームを公開すると、公開URLとiframeコードを確認できます。WordPressのカスタムHTMLブロックやLPのHTML欄に貼れば、フォーム部分だけを埋め込めます。

確認画面、回答管理、CSV出力をFormie側で扱えるため、WordPress側のフォーム用プラグインを増やしすぎたくない案件で使いやすい形です。

たとえば納品後にクライアントが資料請求フォームの選択肢だけ直したい場合、WordPressの管理画面に入らずFormie側でフォームを編集し、回答もFormie側で確認できます。制作会社はLP本文と埋め込み位置を保守し、クライアントはフォーム内容と回答を扱う、という分担にしやすくなります。

納品時には、iframeコードだけでなく、公開URL、回答確認方法、通知先、フォームを修正する担当者も共有します。あとから担当者が変わっても、フォームだけ迷子にならないようにするためです。

埋め込み後の責任範囲を決めておく

iframeでフォームを埋め込むと、WordPress側とフォームサービス側に管理場所が分かれます。ページの見た目や導線はWordPress側、フォーム項目や回答管理はフォームサービス側、というように責任範囲を決めておくと保守しやすくなります。

たとえば納品後にクライアントが選択肢を追加できる運用にするなら、通知先変更や同意文の変更まで自由にしてよいかは別に決めます。見た目の小さな変更に見えても、回答管理や個人情報の扱いに影響する項目は制作会社が確認するルールにしておくと安全です。

クライアントがフォーム項目を自分で変更できる場合でも、通知先、必須項目、同意文、完了画面を自由に変えすぎると運用に影響します。どの変更はクライアント側でよく、どの変更は制作会社が確認するかを決めます。

埋め込み後は、入力画面だけでなく確認画面と完了画面までWordPressページ上で確認します。フォーム単体のプレビューでは自然でも、LPの中に置くと説明文や余白が合わないことがあります。

  • WordPress側とフォーム側の管理範囲を分ける
  • クライアントが変更できる項目を決める
  • ページ上で入力、確認、完了まで確認する

Formie

フォームを作成する

会員登録なしで作成画面を試せます。項目を追加しながら、入力画面、確認画面、完了画面の流れをプレビューできます。

フォームを作成するイラスト