準備するもの
フォームを無効化する方法を選ぶ前に、共有の目的を明確にする。「フォームのデザインだけ確認してほしい」なら外観を保ったままsubmitだけ止めるJavaScript無効化が適切だ。「フォームの存在自体をチェックしてほしい」ならCSSで操作不能にする方法が視覚的にわかりやすい。
HTML内のフォームが何個あるかをエディタで「<form」を検索してカウントしておく。ページによっては検索フォーム・問い合わせフォーム・ニュースレター登録フォームが混在していることがある。全てのフォームを対象に無効化処理を適用する必要があるため、見落としを防ぐためにもカウントを先に行う。
無効化後にローカルで動作確認してから共有する。開発者ツールのコンソールで「Form submitted」などのログが出ないことを確認し、送信ボタンを押しても何も起きない状態をテストしてからギガサイト便にアップロードする。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
実際の手順
最もシンプルな方法は、HTML内のすべての<form>タグのaction属性を削除し、代わりにsubmitイベントを止めるJavaScriptを1行追加する方法だ。具体的には</body>の直前に<script>document.querySelectorAll('form').forEach(f=>f.addEventListener('submit',e=>e.preventDefault()));</script>を追記する。これで全フォームの送信が無効化される。
CSSで操作自体を禁止する方法は<style>form{pointer-events:none;opacity:0.6;}</style>をheadに追加するだけだ。フォームがグレーアウトされて「触れない」ことが視覚的に明確になり、レビュアーが誤操作するリスクをほぼゼロにできる。ただし外観確認としてはグレーアウトが邪魔になる場合もある。
無効化したHTMLをギガサイト便にアップロードし、認証付きURLを発行する。送付メッセージには「フォームはレビュー用のため送信できない状態にしています」と一言添えると、レビュアーが「フォームが壊れている」と誤解するのを防げる。
失敗しやすい点
フォームを無効化したファイルを公開本番用ファイルとして使ってしまうミスが起きやすい。レビュー用と本番用を明確に分けるため、ファイル名に「_review」サフィックスを付けるか、専用フォルダに隔離して管理する。
JavaScriptの無効化コードを</body>の前ではなく<head>に書くと、ページ読み込み中にDOMが存在せずquerySelectorAllが空を返す問題が起きる。スクリプトは必ずHTMLの末尾、</body>の直前に配置する。
フォームを無効化したままデプロイしてしまったという事故は定期的に発生する。フォームの無効化処理をHTMLのコメントで「<!-- REVIEW ONLY: DELETE BEFORE PRODUCTION -->」とマークアップしておけば、本番デプロイ前のチェックで気づきやすくなる。
テンプレ文面
〇〇フォームページのレビュー版URLをお送りします。フォームはレビュー用の仮設定のため、送信ボタンを押しても何も送信されない状態になっています。デザイン・文言・入力欄のレイアウトのみご確認ください。URL：[プレビューURL]（有効期限：〇月〇日）
「何も送信されない」と明記する理由は、レビュアーが「送信できるかも」と試みた際に壊れていると誤解するのを防ぐためだ。意図的な仕様と伝えることで、フォームの見た目だけに集中してもらいやすくなる。
よくある質問
JavaScriptで無効化すると、レビュアーがブラウザのJS設定をオフにしたら送信できてしまいますか？
理論上はそうです。完全な防止が必要な場合はaction属性の削除とJavaScript無効化を併用するか、CSSのpointer-events:noneを組み合わせてください。レビュー用途では通常これで十分です。
フォームを無効化するコードは本番ファイルに影響しますか？
レビュー用ファイルに追記した無効化コードは、本番ファイルには反映されません。元のHTMLとは別のファイルとして管理し、アップロード後に元ファイルは変更しないことを徹底してください。
Googleフォームや外部フォームサービスを埋め込んでいる場合も無効化できますか？
iframeで埋め込まれた外部フォームはJavaScriptから直接制御できません。iframeタグ自体をコメントアウトするか、pointer-events:noneをiframeに適用してクリックを無効化する方法が現実的です。