メールフォーム入力途中でエラー画面に移動してしまうときの対処方法

　お問い合わせフォームやお申し込みフォーム入力の途中に、Enter（エンター）キーを押したら勝手に送信画面、また入力内容確認画面へ移動してしまい、「必須項目が入力されていません」とエラーメッセージ画面が表示され、「今から必須項目を入力しようと思ってたのに勝手にチェックして勝手にエラーにするんじゃねえよ」といらいらした経験がある方がおられると思います。

　この現象は、改行のきかない１行テキストボックス内で入力中に改行（エンターキー）を押すことにより、発生する場合が多いです。文字入力をし、変換を決定するためにエンター、そして通常のテキスト入力時の癖で、改行気分でもう一度エンターを押してしまう、あるいは郵便番号や番地や電話番号やメールアドレスといった英数字部分を直接入力（無変換）で打ち込み、既に入力が確定しているのに条件反射でエンターキーを押してしまったりすることで、「送信（OK）」ボタンが押されたことになってしまいます。

　なので、意図せず入力画面から次の画面へ移動してしまう場合は、エンターキーの過剰連打をしている可能性が高いので、そのあたりを注意して入力するとよいでしょう。つまり、そのメールフォームページの仕様が原因のエラーで、自身の必須項目入力漏れではない可能性が高いということです。

ウェブページ制作者のためのフォーム送信エラー対処方法

　一般ユーザーの勝手に送信エラー現象時の注意点は上記でよいですが、では自分がつくったウェブサイトのフォーム送信ページでフォーム送信エンターキー入力エラーが起こる場合はどのように該当ホームページを修正すればよいかをさらっと書いておきます。

formタグの修正

<form action="***" method="post">
↓
<form action="***" method="post" onsubmit="return false;">

　これで１行テキストボックス内でエンターキーを押しても送信・ＯＫボタンが押されたと同様の効果はなくなります。
　が、それと同時に送信・ＯＫボタンのクリックも無効になり、それでは意味がないので、以下の部分も修正します。

送信・ＯＫボタンの修正

<input name="***" type="submit" value="送信">
↓
<input name="***" type="button" value="送信" onclick="submit();">

　これで送信・OKボタンが有効になるはずです。
　意図せぬエラー表示が発生すると、ユーザーは疑心暗鬼になり、二度と貴サイトを訪れなくなるかもしれませんので、こういった部分は直しておきたいところです。

※横浜でカスタムメールフォームの製作なら横浜ホームページサービスへ