---
title: "フォームを無効化して共有するときの手順と注意点"
description: "フォーム付きHTMLのレビュー共有で誤送信を防ぎたいWeb担当者に向けて、フォーム無効化の具体的な手順・コードの書き方・本番ファイルへの影響を防ぐ注意点を実務的に解説する記事。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/how-to-disable-form-before-share-steps-note"
markdown: "https://giga-site.com/articles/how-to-disable-form-before-share-steps-note/index.md"
category: "ハウツー"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# フォームを無効化して共有するときの手順と注意点

HTMLにフォームが含まれる場合、そのままレビュー共有すると誤送信によって本番データが汚染されるリスクがある。フォームを無効化してから共有する手順は5分以内で完了するが、注意点を把握せずに進めると本番ファイルに影響が出ることもある。安全な手順を一から説明する。

> Source HTML: https://giga-site.com/articles/how-to-disable-form-before-share-steps-note
> Article index: https://giga-site.com/articles/index.md

## 準備するもの

まず共有する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'」で別のダミー完了画面に遷移させる処理を追加すると、フォームの一連のフローをシミュレートできる。

## よくある質問

### 送信ボタンをdisabled属性にするだけではダメですか？

disabledにするだけではEnterキー押下やJavaScriptからの.submit()呼び出しで送信できる場合があります。preventDefaultとaction属性の削除を組み合わせる方法の方が確実です。

### フォームの入力バリデーション動作もレビューしてもらいたい場合、どう設定すればいいですか？

バリデーション（入力エラー表示）はsubmit時に動作するものが多いため、preventDefaultを使えばバリデーション自体は動きます。エラーメッセージの表示を確認してもらいながら最終送信だけを止める用途に最適です。

### レビュー用コピーと本番用ファイルを間違えないための管理方法はありますか？

フォルダを「review/」と「production/」に分けて管理するのが最も確実です。デプロイスクリプトがproductionフォルダのみを参照する設定にしておけば、reviewフォルダのファイルが本番に上がる事故を防げます。

## 関連記事

- [差し替え履歴をメモするときの手順と注意点](https://giga-site.com/articles/how-to-version-note-steps-note/index.md)
- [フォームを無効化して共有する方法](https://giga-site.com/articles/how-to-disable-form-before-share-method/index.md)
- [フォームを無効化して共有するためのチェックリスト](https://giga-site.com/articles/how-to-disable-form-before-share-checklist/index.md)
- [外部リンクをクリック不可にして見せるときの手順と注意点](https://giga-site.com/articles/how-to-disable-external-links-steps-note/index.md)
- [共有前に画像を圧縮するときの手順と注意点](https://giga-site.com/articles/how-to-compress-images-before-share-steps-note/index.md)
- [レビュー用URLをSlackで配るときの手順と注意点](https://giga-site.com/articles/how-to-slack-distribute-steps-note/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "フォームを無効化して共有するときの手順と注意点",
  "description": "フォーム付きHTMLのレビュー共有で誤送信を防ぎたいWeb担当者に向けて、フォーム無効化の具体的な手順・コードの書き方・本番ファイルへの影響を防ぐ注意点を実務的に解説する記事。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/how-to-disable-form-before-share-steps-note",
  "url": "https://giga-site.com/articles/how-to-disable-form-before-share-steps-note",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ハウツー",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "送信ボタンをdisabled属性にするだけではダメですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "disabledにするだけではEnterキー押下やJavaScriptからの.submit()呼び出しで送信できる場合があります。preventDefaultとaction属性の削除を組み合わせる方法の方が確実です。"
      }
    },
    {
      "@type": "Question",
      "name": "フォームの入力バリデーション動作もレビューしてもらいたい場合、どう設定すればいいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "バリデーション（入力エラー表示）はsubmit時に動作するものが多いため、preventDefaultを使えばバリデーション自体は動きます。エラーメッセージの表示を確認してもらいながら最終送信だけを止める用途に最適です。"
      }
    },
    {
      "@type": "Question",
      "name": "レビュー用コピーと本番用ファイルを間違えないための管理方法はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "フォルダを「review/」と「production/」に分けて管理するのが最も確実です。デプロイスクリプトがproductionフォルダのみを参照する設定にしておけば、reviewフォルダのファイルが本番に上がる事故を防げます。"
      }
    }
  ]
}
```