今回の症状と検証範囲
必要事項を入力して送信ボタンを押しても、受付結果が表示されない状態を、検証用のフォームに意図的に作りました。実際のお客様から受注した修正案件ではありません。
今回の対象は、ボタン操作から画面上の受付処理が始まるまでです。メールが届くかどうか、サーバー保存、WordPressやメール配信設定の調査は、このデモでは検証していません。
同じ入力で、修正前後を比較
入力済みの架空サンプルで、両方の「送信を試す」を押してください。メールの送信・サーバーへの保存は行いません。実際の個人情報を入力する必要はありません。
修正前
ボタンを押しても受付処理が始まらない
修正後
入力を確認し、画面に受付結果を表示する
修正後は、メールアドレスを空欄や不正な形式にした場合も試せます。入力チェックで受付を止めることを確認できます。
原因を絞り込んだ順番
- 同じ操作で症状を再現。架空の名前とメールアドレスを入れ、ボタンを押しても受付表示が変わらないことを確認します。
- 入力内容を確認。必須項目が埋まり、メールアドレスの形式も正しい状態で比較します。
- ボタンと受付処理の接続を確認。ボタンの操作は検出できても、フォームの受付処理が始まっていない箇所を調べます。
今回の再現原因は、送信に使うボタンが、通常のボタンとして設定されていたことです。フォームの受付処理は用意されていましたが、ボタン操作からそこへ進んでいませんでした。
修正した箇所
ボタンの役割を、通常のボタンから送信用のボタンへ変更しました。修正前後の比較では、入力欄と受付処理を共通にして、ボタン設定の違いを確かめています。
修正前
<button type="button">送信</button>修正後
<button type="submit">送信</button>受付後の表示と再操作の防止も確認できるようにしました。このデモの「受付」は画面内だけの処理です。
修正後に確認すること
- 正しい入力でボタンを押すと、画面内の受付処理が1回動くこと。
- 空欄や不正なメール形式では受付されないこと。
- キーボードのEnterでも受付できること。
- 受付後にボタンが無効になり、初期化すると再び試せること。
- PCと狭い画面で、入力欄・ボタン・結果を確認できること。
実際のサイトでは、JavaScriptの読み込み、不適切な入力チェック、サーバー処理など、別の原因も考えられます。ボタンの設定変更だけですべて直る、という事例ではありません。
同じような症状を相談するときは
対象のURL、操作した端末とブラウザ、いつから起きたか、押した後の画面を教えてください。原因調査で分かる範囲と、修正に必要な作業を整理してご案内します。