フォームを無効化して共有するときの手順と注意点

準備するもの

まず共有するHTMLファイルのコピーを作成する。元ファイルは絶対に変更せず、「ページ名_review.html」などリネームしたコピーに対してのみ無効化処理を行う。この原則を守るだけで、本番ファイルへの影響を防ぐ最大の安全策になる。

コピーしたファイルをテキストエディタで開き、<form>タグが何か所あるか確認する。ページによっては検索ボックスも<form>タグで実装されているため、問い合わせフォームだけ無効化したつもりが検索も止まるケースがある。全ての<form>タグの場所と役割を把握してから作業に入る。

無効化後の動作確認に使うブラウザと、テスト用のダミーデータを準備しておく。実際にフォームに入力して送信ボタンを押してみて、何も起きないことを確認するのが最も確実なテスト方法だ。コンソールに「Uncaught TypeError」など赤いエラーが出ていないことも確認する。

• 相手がログインなしで開ける状態か確認する
• PCとスマホで最低1回ずつ表示を確認する
• 内部情報・個人情報・不要な外部送信が残っていないか見る
• レビュー期限と修正時の差し替え方を決めておく

実際の手順

コピーファイルの</body>直前に以下のスクリプトを追加する：<script>document.querySelectorAll('form').forEach(function(form){form.addEventListener('submit',function(e){e.preventDefault();console.log('REVIEW MODE: Form submission blocked');});});</script>。console.logを入れておくことで、開発者ツールを開いているレビュアーが「意図的にブロックされている」とわかる。

action属性も念のため削除または空文字に変更する。<form action="https://example.com/api/contact">を<form action="">に変えるだけだ。JavaScriptが無効な環境でも送信先がなくなるため、二重の安全網になる。変更箇所を<!-- REVIEW: action removed -->というコメントでマークしておくと、後で本番ファイルと差分比較したときに見つけやすい。

修正したファイルをローカルで開き、開発者ツールのNetworkタブを見ながら送信ボタンを押してPOSTリクエストが発生しないことを確認する。確認できたらギガサイト便にアップロードして認証付きURLを発行し、レビュアーに「フォームは送信できない状態です」と注記を付けて共有する。

失敗しやすい点

コピーファイルではなく元ファイルを直接編集してしまうミスが最も多い。作業前に「今開いているファイル名はどれか」をエディタのタブで必ず確認する。特に自動保存が有効なエディタ（VS Codeなど）では誤編集がリアルタイムで保存されるため注意が必要だ。

フォームのaction属性を削除したが、フォームコンポーネントがVueやReactで実装されていて、HTMLのaction属性とは別にJavaScriptのsubmitハンドラが設定されているケースがある。フレームワーク製フォームの場合は、ソースコードのsubmitイベントハンドラも確認して止める必要がある。

レビュー完了後にコピーファイル（_review.html）を削除せず、デプロイ対象フォルダに残してしまうことがある。デプロイスクリプトが全HTMLファイルをアップロードする設定になっていると、_review.htmlが本番環境に公開されてしまう。デプロイ前のファイルリストチェックにこの確認を追加する。

テンプレ文面

お疲れ様です。〇〇ページのフォームレビュー版URLを共有します。フォームは送信できないよう設定済みですので、安心してフォーム入力のUIや文言をご確認ください。ご確認ポイント：①エラーメッセージの表示タイミングと文言 ②送信完了画面への遷移デザイン（今回はダミー画面で再現）。URL：[プレビューURL]

送信完了画面や確認画面があるフォームの場合、送信後の画面フローも確認してほしいことがある。この場合はJavaScriptで送信を止めた後に「location.href='thanks.html'」で別のダミー完了画面に遷移させる処理を追加すると、フォームの一連のフローをシミュレートできる。