WordPressのContactForm7で送信連打を防止する

WordPressでサイトを構築し、問い合わせフォーム等を設置したい場合にContactForm7というプラグインを使用している方はかなり多いのではないでしょうか?

サイトには何かしらの問い合わせフォームが設置されていない方が少ないでしょうし、中でもContactForm7は最も使用されているWordPressプラグインのひとつと言っても過言ではないでしょう。

私も自身のサイトで使用しているし、ちょっと関わっている別のサイトでも正しくWordPressにContactForm7という組み合わせで問い合わせフォームを実装しています。

で、そのフォームで「スパムが多いから何とかならないか?」という話を貰い、色々と調べていたのですが、勿論スパムが発生している原因、それを回避する方法には色々ありますが、どうもそのサイトでの現象としては、ContactForm7で実装された問い合わせフォームにて、「送信する」ボタンが必要以上に連打されてメールが飛びまくっているケースが結構多いということが分かりました。

さらにContactForm7の挙動や作者のポリシーを調べていくと、確かに送信ボタンを複数回クリックすることは容易だし、クリックした分だけメールは送信されてしまうし、作者としてはそういった連続送信を防止することは意図的に行っていないのだという事も分かりました。

とは言え、「スパムが何とかならないか?」という要望に応える必要があり、フィルタやreCaptchaも導入することにしましたが、送信ボタン連打によるメール連続送信に関してはそれらで回避できないので、やむなく以下の対策をすることにしました。

  1. 該当するサイトのWordPressに管理者でログイン。
  2. 管理者ダッシュボードの左カラム「外観」をクリック。
  3. 「テーマファイルエディター」をクリック。
  4. 右カラム「テーマファイル」欄から「functions.php」をクリック。
  5. 「選択したファイルの内容:」の末尾に以下のコードを追加。

//------------------------------------
add_action( 'wp_footer', 'wpcf7_submit_block');
function wpcf7_submit_block() {
?>
<script type="text/javascript">
jQuery(function($){
    let submitBtn = $('input[type="submit"]');
    submitBtn.on('click', function () {
        $(this).css('pointer-events','none');
        $(this).css('opacity','0.5');
    });
    document.addEventListener('wpcf7invalid', function () {
        submitBtn.css('pointer-events', 'auto');
        submitBtn.css('opacity', '1');
    }, false);
});
</script>
<?php
}

 

そして「ファイルを更新」を押して保存すれば、送信ボタンを押した後、成功していれば送信ボタンが押せない状態になり、連続送信を(ひとまずは)防止することが可能になります。