ContactForm7で使用感を変えずにスパムメールを防ぐ・減らす最もシンプルな方法

WordPressで制作したサイトにお問い合わせフォームを設置する際にContactForm7を利用するケースが多数見受けられます。僕も利用している1人です。ただ、設置したフォームに悪魔のようなbotがやってきてスパム営業メールをガンガン送ってくる輩が居ます。そんな時にfunctions.phpの編集やプラグイン追加無しでスパムメールを防止する手法を1つご紹介します。

スパムメールの例

こんな感じの謎営業メールです。よく来ませんか?

そのくせ、記載のURLにアクセスするとあまり情報が無いという...

対応方針

始めにざっくりと方針を説明しておくと、偽のacceptance(invert)チェックボックスを設置します。あなたの中の富澤たけしが『ちょっと意味わかんないです...』と言ったかもしれませんが、詳細は後述します。

前提

この手のスパムメールを手動で行なっているとは考えにくいです。(これを手動でやっているのであれば正気の沙汰ではありません。)

おそらく、botがWebサイトをクローリングして、存在するinputフォームを総なめ→入力可能な項目を全て入力してsubmitしているものを思われます。

もともと弊サイトでもacceptanceのチェックボックスを1つ追加して運用していました。このチェックボックスにチェックを入れないとバリデーションチェックでエラーとなり、メール送信されなくなります。

acceptanceって?

ContactForm7が用意している「サイトの利用規約やプライバシーポリシーに同意する場合チェックを入れてください」というよくある同意用チェックボックスを生成するためのフォームです。

このacceptanceチェックボックスを設置するだけではスパムを防ぐことはできません。botも機械的にチェックボックスを入力して送信ボタンを押下するためです。

チェックしてはいけないチェックボックスを追加する

botが設置している入力フォーム全てに値を入れて送信してくることを逆手にとって、チェックを入れるとバリデーションエラーとなるチェックボックスを追加します。以下のようなチェックボックスです。

もしチェックボックスを入力して送信ボタンを押下すると以下のようにバリデーションチェックエラーとなります。

最後に、このチェックボックスは<div style="display:none"></div>で囲むことで、一般的なユーザには見えない状態にします。そうすることで、一般ユーザーが誤ってチェックを入れてしまい、バリデーションエラーとなることを防ぎます。

acceptanceのinvert設定について

ContactForm7のacceptance-checkboxのマニュアルを読むと[acceptance]タグにinvert属性を付与することで上述したような、チェックしてはいけないチェックボックスを作成することができます。例えば以下のように。

[acceptance acceptance-283 invert]チェックしてはいけないチェックボックス[/acceptance]

つまり、ContactForm7がデフォルトで提供している機能ということです。これまでは、ただフォーム設置する機能だけを使っていたのですがマニュアルを読んでみると多機能でびっくりしました。こういうプラグインを作れるとカッコいいですよね!

ContactForm7での設定例

WordPress管理画面から、『お問い合わせ』>編集対象のフォームを選択して、コンタクトフォームの編集画面を開きます。

フォームタブにある『承認確認』ボタンを押下することで、[acceptance]のフォームを追加します。追加が終わったら以下のようにカスタマイズしましょう。

  • invert属性を追加
  • <div>で囲み、style=display:noneを指定することでブラウザでは非表示とする
<div style="display:none">
[acceptance acceptance-283 invert][/acceptance]</div>