Web制作でフォームを埋め込むときの考え方。クライアント運用まで見たiframe活用
Web制作案件のフォーム埋め込みは、見た目よりも公開後の運用で差が出ます。更新、回答管理、完了画面、通知先、クライアントが触る範囲まで先に決めておくと、納品後の手戻りを減らせます。
Web制作でフォームを置くとき、HTMLとして作るか、CMSのプラグインを使うか、外部サービスを埋め込むかで運用が変わります。納品時の見た目だけならどれでも整えられますが、納品後に誰が項目を直し、誰が回答を見て、どこまで制作会社が面倒を見るのかまで考えると、選び方は少し変わります。
フォームは納品物であり、運用物でもある
問い合わせ、資料請求、予約受付のフォームは、公開したあとに項目変更が起きやすい場所です。キャンペーンの内容が変わる、資料の種類が増える、担当者のメールアドレスが変わる。静的なページパーツとして見ると、こうした変更が毎回制作会社の作業になります。
たとえば資料請求LPを納品したあと、翌月に新しいホワイトペーパーが追加されるだけでも、希望資料の選択肢を直す必要があります。ページ本文は変えなくてもフォームだけ変わることがあるため、誰が項目を直すのかを先に決めておくと手戻りを減らせます。
たとえば採用サイトのエントリーフォームでは、募集職種が増えたときに選択肢を追加し、通知先を採用担当へ変え、完了画面の文言も変えることがあります。ページ制作と同じ扱いにしていると小さな変更でも都度依頼になり、公開後のスピードが落ちます。
フォームだけ外部サービスにしておくと、ページ本体は制作物として保ちつつ、フォーム項目や回答確認は運用側に寄せられます。制作会社がすべて抱えるのではなく、運用しやすい境界を作るイメージです。
- 公開後にフォーム項目を誰が変更するか決める
- 回答をクライアントが自分で確認できるか確認する
- LPごとにフォームを分ける必要があるか確認する
iframeは、設置前後の確認が大事
iframeで埋め込むと、ページ側のデザインとフォーム側のUIが完全には同じにならないことがあります。だからこそ、余白、幅、高さ、スマホでの見え方、送信後の表示を実機に近い状態で確認します。
たとえばスマートフォンでフォーム下部の送信ボタンが見切れたり、完了画面に切り替わったあとページ上部へ戻らず気づきにくかったりすると、フォーム自体は動いていても体験はよくありません。制作中のページに実際に埋め込んで、入力、確認、完了まで通す確認が必要です。
たとえばLPの下部にフォームを置く場合、送信後にiframe内だけ完了表示へ切り替わっても、ユーザーが画面上で気づかないことがあります。完了画面の文言、フォーム周辺の余白、送信後のスクロール位置まで含めて確認すると、公開後の問い合わせを減らせます。
フォームの見た目をページに寄せるだけでなく、回答者が迷わず送信できること、送信後に受付されたと分かること、運用側が回答を追えることを優先します。
特にスマートフォンでは、iframeの高さ、フォーム下の余白、送信ボタン後のスクロール位置が体験に直結します。PCだけで確認して納品すると、公開後に入力しにくさが見つかることがあります。
提案時は、保守の軽さまで伝える
クライアントには、単に「フォームを埋め込めます」ではなく、「フォームの項目変更や回答確認を、サイト全体の改修と分けて扱えます」と伝えたほうが価値が伝わります。特に複数LPや小さなキャンペーンがある会社では、フォームを増やしやすいことが利点になります。
たとえば月ごとに広告LPを差し替える会社なら、ページごとにフォームを複製し、資料名や通知先だけ変えられるほうが運用しやすいです。制作会社側はLPの構成や計測タグを見ながら、フォーム項目の変更はクライアント側で回せるようにしておくと役割が分かれます。
納品後の修正が毎回制作会社の作業になるのか、クライアント側でフォーム項目を直せるのかは、見積もりや保守契約にも関係します。埋め込みフォームは、制作物と運用物の境界を作るための選択肢です。
Formieは公開URLとiframeコードを発行できるため、Web制作のページ内にフォームを置きながら、フォーム作成と回答管理はFormie側で扱えます。まず問い合わせフォームのテンプレートから作り、埋め込み先で確認するのが始めやすい流れです。
- フォーム修正の依頼フローを納品前に決める
- クライアントが回答一覧を見られる状態にする
- 完了画面の文言まで制作物として確認する
フォームだけ別管理にするときの注意点
フォームを外部サービスに分けると、運用は軽くなりますが、ページ全体の責任が消えるわけではありません。フォーム上部の説明文、プライバシーポリシーへのリンク、送信後に戻る導線は、制作したページ側と合わせて確認します。
たとえば納品後にクライアント側で通知先を変えられる運用にするなら、変更後にテスト送信する担当も決めておきます。通知先だけ変わって回答管理画面を見る人が変わらないままだと、メールは届いても社内対応の流れがずれることがあります。
また、クライアントがフォームを変更できる場合でも、必須項目、通知先、同意文、確認画面の表示項目を自由に変えすぎると、問い合わせ対応に影響します。更新権限と確認フローは納品時に決めておきます。
制作会社側では、フォームサービスのログイン情報、公開URL、iframeコード、回答確認方法を納品資料にまとめます。あとから担当者が変わっても運用を引き継げる状態にするためです。
- フォーム上部の説明文とページ本文の内容をそろえる
- 通知先や必須項目の変更ルールを決める
- 公開URLとiframeコードを納品資料に残す
Web制作案件でFormieを使う流れ
Web制作案件でFormieを使う場合は、先にフォームの用途を決めます。問い合わせ、資料請求、予約受付、イベント申し込みでは、必要な項目と確認画面で見直す項目が変わります。
たとえば資料請求なら、会社名、メールアドレス、希望資料、個人情報同意を確認画面で見せ、完了画面には資料送付の目安を書きます。見学予約なら、希望日時、人数、連絡先、注意事項を見直せるようにするなど、用途ごとに確認すべき項目を変えます。
フォームを作ったら、公開URLまたはiframeコードを使って制作中のページに設置し、PCとスマートフォンで入力から完了まで確認します。回答管理画面で送信内容が見えるところまで、納品前の確認項目に含めます。
この流れにしておくと、制作会社はページ制作に集中しながら、フォーム運用だけを切り出して提案できます。クライアントにとっても、納品後にフォームを少し直したいときの相談先が明確になります。
