コピペで解決！Contact Form7をエンターで送信しないようにする方法

WordPressの問い合わせフォームで定番なのがこのContact Form7ですが、入力途中の情報が誤って届いたりしたことありませんか？

Contact Form7の標準の仕様では、エンターキーで送信ができてしまうような作りになっているため、フォームから問い合わせをしようとしてくれている人が、誤ってエンターを２度押してしまったり、半角数字などの直接入力でエンターキーを押してしまうことが原因で起きています。

もう一度入力してくれる人ばかりならいいのですが、誤って送信してしまうと、面倒になってそこで離脱してしまう確率も格段に上がってしまうので、誤送信防止と機会損失が起きないようにするためにも設定は必須だと思っています。

設定方法
まとめ

設定方法

設定方法はとっても簡単。

フォームが設置されているページの<head></head>の中に下記のJavaScriptコードをコピペするだけでOK。

<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>

はい簡単！

まとめ

LPなどのフォームにContact Form7を使っている場合はこの設定は必須中の必須です。

お金をかけてリスティング広告を回して、やっとの思いで問い合わせまで辿り着いてくれたお客さんにこんなことで離脱されてしまっては、、、何してるか分からなくなっちゃいますからね。

些細なことで来るはずだった問い合わせが来なくなったり、それだけでなく使いづらいといったクレームをもらわないようにするためにも、こういった細かなところから、ユーザーライクなコーディングを心がけていきましょう！