共有した静的HTMLプレビューでフォームが送信できない理由

HTMLでフォームを描いても受信サーバーは作られません。ブラウザーで値を入力できても、送信には検証・保存・処理する承認済みendpointが必要です。HTML2WEBの共有プレビューは、文書が閲覧者のデータを勝手に送らないようフォーム遷移と外部通信を止めます。

何を確認するか

目的	静的プレビュー	別途必要なもの
文言・配置の確認	可能	バックエンド不要
入力検証の表示	インラインJSで可能	テストデータのみ
本当の問い合わせ送信	HTML2WEBでは不可	承認済み受信サービスと通知
本番連携の試験	隔離プレビューでは不可	管理されたstaging

MDNのフォーム解説はデータがサーバーへ送られる境界を説明します。actionは送信先を指定しますが、送信先そのものを作りません。

よくある失敗

actionがない

受信先がありません。モックでは「デモのため送信されません」と表示し、届いたように見せません。

JavaScriptでAPIを呼ぶ

サーバーがorigin、method、headerを許可し、入力を検証して応答する必要があります。CORSはサーバーのブラウザーアクセス方針で、HTML側から回避できません。

プレビューが要求を止める

現在の共有文書にはconnect-src 'none'とform-action 'none'が適用されます。画面内の操作はできますが、外部サービスへ値を送れません。

秘密キーをHTMLへ入れる

ブラウザーへ届く値は閲覧者が確認できます。APIキー、webhook秘密、SMTPパスワード、DB資格情報を入れません。

正直なモックにする

submitを止めて未送信と示す、ボタンにデモと表示する、fixtureで成功・失敗状態を見せる、本当の連携は承認済みstagingで試す、という分担にします。保護・削除できないモックで実名、メール、電話、本文を収集しません。

本番では項目の最小化、サーバー検証、不正利用対策、永続受付、送信認証、CRM追跡を実装し、約束した受付状態の後だけ成功を表示します。

HTML URL変換ツールはUI確認に使い、問い合わせバックエンドとして使いません。JavaScriptの差はsandboxとCORSの説明を確認してください。