---
title: "Cursor Agentで生成したフォーム付きページをレビュー用URLにして共有する方法"
description: "Cursor Agentで作ったフォーム付きHTMLページをURLで共有してレビューしてもらいたい開発者や担当者向け。フォームの誤送信防止と認証設定の選択基準がわかり、スムーズなフィードバック収集ができるようになる記事。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/cursor-agent-form-page-review-url"
markdown: "https://giga-site.com/articles/cursor-agent-form-page-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Cursor Agentで生成したフォーム付きページをレビュー用URLにして共有する方法

Cursor Agentで問い合わせフォームや申込フォーム付きのページを生成したとき、そのHTMLをメールに添付しても相手が適切に開けないことが多い。URLとして共有すればブラウザだけで確認でき、実際にフォームを操作して使い勝手を評価してもらえる。フォーム特有のセキュリティ確認と、安全にURLを発行して共有するまでの手順を解説する。

> Source HTML: https://giga-site.com/articles/cursor-agent-form-page-review-url
> Article index: https://giga-site.com/articles/index.md

## 何が共有しづらいのか

Cursor Agentがフォームページを生成する際、プロンプトで指定した送信先（メールアドレスや外部APIのURL）をHTMLの`action`属性にそのまま書き込む。URLを共有してレビュアーがテスト入力して送信ボタンを押すと、実際のメールや外部サービスにデータが送られてしまう。これを防ぐには`action`属性の値を`#`に変更するか、submitイベントをJavaScriptでキャンセルしてからURLを発行する。

フォームページはインプット操作が伴うため、スマートフォンのソフトウェアキーボードが表示された際にフォームが押し上げられてCTAボタンが見えなくなる問題が起きやすい。Cursor Agentが生成するフォームはPC幅を前提としていることが多く、iPhone Safariでの表示が破綻することがある。URL発行後に実機のiPhoneで入力操作まで確認してから共有する。

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

## URL化する前の確認点

Cursor Agentがrequiredバリデーションやメールアドレス形式チェックを追加したフォームの場合、JavaScriptのエラーハンドリングが正しく動いているかを確認する。たとえば「必須項目が空のまま送信」「不正なメール形式で送信」を試み、エラーメッセージが適切な場所に表示されるかをブラウザで操作確認してからURLを発行する。

フォームに電話番号欄や氏名欄がある場合、input typeとautocomplete属性が適切に設定されていないとスマートフォンのオートフィルが意図しない欄に個人情報を自動入力することがある。`<input type="tel" autocomplete="tel">`のように属性が正しく設定されているかを確認し、autofillの誤動作がないかスマートフォンで実際に試してから共有する。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 認証と期限の決め方

デザイン提案のためにクライアントにフォームページを確認してもらう場合、URLが社外に出回らないようパスワード認証を設定する。パスワードはSlackのDMで伝え、URLは別のチャンネルに投稿する「経路を分ける」方法にすると、両方が同時に漏洩しない限りアクセスされない状態を作れる。

フォームのA/Bテスト案を複数人に確認してもらう場合、バージョンAとBで別々のURLを発行し、それぞれに同じ期限を設定するとフィードバックの収集期限が揃う。URLにバージョンを示すメモを付けてスプレッドシートで管理すると、どちらのフォームへのフィードバックかが混在しない。

- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない

## 共有後のフィードバック回収

フォームのレビュー依頼には「フォームを最初から最後まで入力して送信ボタンを押す操作を一回通してみてください」という体験ベースの依頼を入れる。フォームは入力して送信するまでの体験が重要なため、見た目だけでなく操作フローの中で感じた詰まりを報告してもらうことで、設計上の問題が発見しやすくなる。

フィードバックを受けて修正したフォームを再共有する際は「v1からv2の変更点：電話番号欄を任意に変更・エラーメッセージの位置を入力欄直下に移動」のように変更を一文で伝える。レビュアーがv1のURLのキャッシュを持っている場合があるため、「スーパーリロード（Ctrl+Shift+R）で最新版を読み込んでください」と案内するとすれ違いを防げる。

- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける

## よくある質問

### フォームの送信完了画面まで含めてレビューしてもらいたい場合はどうするか？

JavaScriptでsubmitイベントをキャッチし、APIへの送信をスキップした後で完了画面のHTMLブロックをdisplay:blockに切り替えるコードを追加する。これでフォーム→送信→完了画面の一連フローをAPIなしで体験させることができる。

### Cursor Agentが生成したフォームにreCAPTCHAが組み込まれている場合、URLで共有すると問題があるか？

reCAPTCHAのsitekeyは同一ドメイン向けに登録されるため、異なるドメインのURLで公開するとreCAPTCHAの検証が失敗してフォームが送信できなくなる可能性がある。レビュー用にはreCAPTCHAのscriptタグをコメントアウトして、UIの確認のみに絞った状態でURL発行するのがシンプルだ。

### 複数のフォームページ案（デザイン違い）を同時にレビューしてもらう場合の管理方法は？

案ごとに別URLを発行し、「案A（シンプル版）」「案B（ステップ形式）」のようにラベルを付けてスプレッドシートに一覧化する。レビュアーへの依頼メッセージに一覧表のリンクを貼り付けることで、どの案を確認しているかが常に明確になる。

## 関連記事

- [Cursor Agentで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/cursor-agent-lp-draft-review-url/index.md)
- [Cursor Agentで生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/cursor-agent-admin-mock-review-url/index.md)
- [Cursor Agentで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/cursor-agent-slide-html-review-url/index.md)
- [Cursor Agentで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法](https://giga-site.com/articles/cursor-agent-internal-tool-prototype-review-url/index.md)
- [ChatGPT Agentで生成したフォーム付きページをレビュー用URLにして共有する方法](https://giga-site.com/articles/chatgpt-agent-form-page-review-url/index.md)
- [Windsurf Agentで生成したフォーム付きページをレビュー用URLにして共有する方法](https://giga-site.com/articles/windsurf-agent-form-page-review-url/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Cursor Agentで生成したフォーム付きページをレビュー用URLにして共有する方法",
  "description": "Cursor Agentで作ったフォーム付きHTMLページをURLで共有してレビューしてもらいたい開発者や担当者向け。フォームの誤送信防止と認証設定の選択基準がわかり、スムーズなフィードバック収集ができるようになる記事。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/cursor-agent-form-page-review-url",
  "url": "https://giga-site.com/articles/cursor-agent-form-page-review-url",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "AI活用",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "フォームの送信完了画面まで含めてレビューしてもらいたい場合はどうするか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JavaScriptでsubmitイベントをキャッチし、APIへの送信をスキップした後で完了画面のHTMLブロックをdisplay:blockに切り替えるコードを追加する。これでフォーム→送信→完了画面の一連フローをAPIなしで体験させることができる。"
      }
    },
    {
      "@type": "Question",
      "name": "Cursor Agentが生成したフォームにreCAPTCHAが組み込まれている場合、URLで共有すると問題があるか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "reCAPTCHAのsitekeyは同一ドメイン向けに登録されるため、異なるドメインのURLで公開するとreCAPTCHAの検証が失敗してフォームが送信できなくなる可能性がある。レビュー用にはreCAPTCHAのscriptタグをコメントアウトして、UIの確認のみに絞った状態でURL発行するのがシンプルだ。"
      }
    },
    {
      "@type": "Question",
      "name": "複数のフォームページ案（デザイン違い）を同時にレビューしてもらう場合の管理方法は？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "案ごとに別URLを発行し、「案A（シンプル版）」「案B（ステップ形式）」のようにラベルを付けてスプレッドシートに一覧化する。レビュアーへの依頼メッセージに一覧表のリンクを貼り付けることで、どの案を確認しているかが常に明確になる。"
      }
    }
  ]
}
```