何が共有しづらいのか
WebflowのフォームはデフォルトでWebflow Formsに接続されており、エクスポートしたHTMLでも元のエンドポイントにPOSTが飛ぶ状態になっていることがあります。レビュアーが誤って送信ボタンを押すと、Webflowの管理画面にテストデータが混入し、本番運用開始後にデータの整合性を崩す可能性があります。
フォームのUIだけを見てもらいたい段階でフォームが実際に機能している状態でURLを共有することは、レビュアーへの余計な注意書きが必要になり、レビューの焦点が分散します。デザイン確認フェーズでは送信を無効化した状態で共有するのが原則です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
URL化する前の確認点
エクスポートしたHTMLでform要素を検索し、action属性にWebflow FormsのエンドポイントURLが含まれている場合はaction="#"に変更します。同時にmethod="POST"をそのままにするとブラウザが警告を出す場合があるため、method属性も削除するかmethod="GET"に変更してから公開します。
フォームにHubSpotのトラッキングスクリプトやhbspt.forms.create()の呼び出しが含まれている場合、HubSpotのポータルIDとフォームIDがHTMLに記載されています。スクリプトタグごと削除してからアップロードすることで、レビュー中にHubSpot上のフォームに不正なテスト送信が来る可能性を防ぎます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
認証と期限の決め方
フォームページのデザインレビューを社内マーケティングチームで行う場合は、会社ドメイン認証でアクセスを限定します。フォームの訴求内容が未発表のキャンペーンと連動している場合は特に重要で、ドメイン外からのアクセスをブロックするだけで情報管理のリスクを大幅に減らせます。
クライアントへの提案時にフォームデザインを確認してもらう場合は、パスワードを設定して期限を提案日から1週間に設定します。承認後はフォームを本番接続した新しいURLに切り替えるため、旧URLを無効化してURL混在によるテスト送信を防ぎます。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
共有後のフィードバック回収
フォームページのレビューでは「入力項目が多すぎて途中で諦めたくなるか」「エラーメッセージが出た場合に何をすればよいかわかるか」「送信ボタンの文言は行動を促すか」の3点を確認事項として伝えます。UX改善に直結する観点で、デザインの好みとは別軸のフィードバックが集まります。
フォームのUI改善は細かい変更が積み重なるため、修正ごとに新URLを発行するよりも同一URLに上書きする運用の方が効率的です。クライアントとの承認フローでバージョン記録が必要な場合は、修正版をv2として別URLで発行し、v1・v2の違いを変更ログとしてNotionに記録します。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
よくある質問
Webflow FormsのフォームをHTMLエクスポート後に無効化したとき、バリデーション（必須チェック）は引き続き動作しますか？
HTML5の標準バリデーション（required属性）はフォーム送信を無効化しても動作します。送信ボタンを押すと必須項目が未入力の場合はエラーが表示されますが、実際にデータは送信されません。UIのバリデーション表示もレビューできます。
フォームページにCookieバナーが含まれる場合、ギガサイト便のURLでもCookieの同意は求められますか？
CookieバナーのJavaScriptがHTMLに含まれていればギガサイト便のURLでも動作します。ただしギガサイト便自体はCookieを使った追跡は行わないため、バナーが出る場合はHTMLに埋め込まれたコードによるものです。
Webflow AIで生成したフォームページがモバイルでの表示が崩れる場合、URLを発行する前に修正する方法は？
エクスポートしたHTMLをVS Codeで開き、ブラウザのモバイルエミュレーターで確認します。CSSのmedia queryを直接編集して崩れを修正してからアップロードします。Webflowのエディターに戻って修正・再エクスポートする方法も確実です。