*

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

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

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

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

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

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

formタグの修正

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

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

送信・OKボタンの修正

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

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

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

関連記事

no image

無料ファイル転送サービスで音声ファイルを送付しよう

高速通信(ブロードバンドなんて言いましたね)が普及し、企業などではFTTH(光ファイバー通信)が当た

記事を読む

no image

発リンクとSEO(YSTのTDP:トップダウンペナルティ)の関係

ホームページ(ウェブサイト)を作成すると、必ずどこか別の人のページにリンクを張る(発リンクをする)と

記事を読む

no image

Google検索で「リアルタイム検索」が可能になったようです

当ブログ「検索エンジンはGoogleかYahoo!か」の記事で「スピード重視のGoogle」と書いた

記事を読む

no image

WordPressの投稿を自動的にツイートするプラグイン「Tweetable」

思うところあって、弊社もツイッターアカウントを取得してみました。で、ブログの更新を自動的にツイッター

記事を読む

no image

【文字起こし】「苫米地英人×藤末健三 改正放送法と哲学を語る」(最後の一部分要約)

本日午後4時から、e-国政で苫米地英人氏と藤末健三氏がインターネット生放送対談を行っていました。その

記事を読む

no image

検索エンジンはGoogleかYahoo!か

日本で最も利用されている検索エンジンはGoogleとYahoo!です。大ざっぱにGoogleが4割、

記事を読む

no image

グーグルパックマンの攻略法?

 5月22日~23日限定でグーグルホームページでプレイ可能だったビデオゲーム「パックマン」が、ページ

記事を読む

no image

ソースネクストでJNBワンタイムデビットを使ってみた

クレジットカードがなくてもネットショッピングができるジャパンネット銀行のワンタイムデビット利用レポー

記事を読む

no image

【Tweetable】ブログ更新時の自動ツイートでタイトルが挿入されない不具合解決備忘録

WordPressのブログ新規投稿をツイッターへ自動でつぶやいてくれる「Tweetable」ですが、

記事を読む

no image

img alignで画像回り込み時のIEバグ備忘録

<img align="">で画像をテキストに回り込ませた際、CSSでvertical-

記事を読む

Comment

  1. […] 多分いちばんシンプルな方法はこちらですね。 メールフォーム入力途中でエラー画面に移動してしまうときの対処方法 […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

postagestamp01
未使用の切手(貼付済み)を剥がさずに簡単に再利用する方法備忘録

 封筒に貼ってしまってある未使用切手を再利用する方法を郵便局で教わった

kindle_sort
Kindle の デフォルト配信先 の変更方法備忘録

コンテンツと端末の管理 端末タブ 端末名「編集」

itts
テープ起こしで知った言葉201501

今月のテープ起こし案件ではこんな言葉を知りました。ありがとうございまし

KIMG0297
日経ビジネス2014.12.01メモ

トヨタミライは補助金込みで約520万円。 企業交際費は199

itts
テープ起こしで知った言葉201412

今月のテープ起こし案件ではこんな言葉を知りました。ありがとうございまし

→もっと見る

PAGE TOP ↑