WordPress – Contact Form 7で作成したフォームがEnterキーで送信されるのを防ぐ




スポンサーリンク




WordPressのプラグイン「Contact Form 7」で作成したメールフォームは、フォーム入力後、同一画面でバリデーション(入力チェック)が行われ、確認画面に遷移しないのが特徴です。
それもあり、入力途中にエンターキー(enter)を押してしまうと、そのまま送信されてしまいます。
必須入力が未入力の場合などは入力チェックで送信を止められますが、そうでない場合はそのまま送信されてしまいます。
そのせいで、肝心の問い合わせ内容が空欄のまま送られてくることもしばしばありました。

スポンサーリンク

JavaScript を<head></head>内に追加することでEnter送信を禁止します

以下のJavaScript をページのヘッダー部分(<head></head>内)に記述することで、Enter送信を禁止することが出来ます。

<script>
function submitStop(e){
  if (!e) var e = window.event;
  if(e.keyCode == 13)
  return false;
}
window.onload = function (){
  var list = document.getElementsByTagName("input");
  for(var i=0; i<list.length; i++){
    if(list[i].type == 'email' || list[i].type == 'password'|| list[i].type == 'text'|| list[i].type == 'number'|| list[i].type == 'tel'){
      list[i].onkeypress = function (event){
        return submitStop(event);
      };
    }
  }
}
</script>

確認画面に遷移するコンタクトフォームもありますが…

WordPressのプラグインには「MW WP Form」という、確認画面に遷移するタイプのメールフォームもありますが、確認画面から「戻る」と入力内容がリセットされてしまうのでお勧めではありません(見込み客を取りこぼす可能性があるということでクライアントから不評でした)。
入力内容がリセットされるのは、ブラウザにもより、100%リセットされるわけでもないのですが、おそらくPHPのセッション(SESSION)が使われていないからだと推測します。

それでも確認画面に遷移するフォームが必要な場合は、「MW WP Form」を試してみても良いと思います。

MW WP Form
MW WP Form はショートコードベースのフォームプラグインです。このプラグインには沢山の機能がついています。例えば、様々なバリデーションルールを使ったり、問い合わせデータを保存することができます。

以上、ご参考になれば幸いです。

コメント

タイトルとURLをコピーしました