お問い合わせページがあるサイトでは、多くがページ内にメールフォームを設置していると思います。
メールフォームは、これといった対策をしていないと海外から大量のスパムメールが送られてきてしまいます。
WordPressの「Contact Form 7」を利用している場合は、比較的簡単に「reCAPTCHA」を導入できますが、PHPやCGIなどを利用したフォームでは導入が難しいため、別の方法をご紹介します。
スパムはチェックボックスを設置すると有効という話がありますが、今回はもう少し工夫して、チェックボックスにチェックを入れないと送信ボタンが押せない仕組みにしてみようと思います。
実際に設置したクライアントでは、1日に100件以上送られてきたスパムが0件になりました。
効果アリだと思います。
まずはデモページをご覧ください。
デモページを見る
HTML
<div class="container">
<input type="checkbox" id="send_check"><label for="send_check">入力した内容で送信します。</label>
<input type="submit" class="form_submit" id="submit_btn" disabled value="送信する">
</div>
HTMLには、チェックボックスと送信ボタンを設置します。各「id」は、JavaScriptと紐づいています。
「入力した内容で送信します。」の他、「個人情報の取扱いについて同意する」といった文言もよいかと思います。
CSS
.container {
text-align: center;
margin: 100px 0;
}
label, input[type='checkbox'] {
margin-right: 5px;
cursor: pointer;
}
input[type='submit'] {
display: block;
margin: 30px auto;
}
.form_submit {
color:#fff;
font-size: 1.0rem;
letter-spacing: 0.2rem;
margin: 30px 0 ;
padding: 10px 50px;
background: #2f97ff;
border: 2px solid #2f97ff;
border-radius: 100vh;
transition: .2s linear;
cursor: pointer;
}
.form_submit:hover {
background: #0068d0;
border: 2px solid #0068d0;
transition: .2s linear;
}
.form_submit[disabled] {
background-color: #ccc;
border: 2px solid #ccc;
cursor: not-allowed;
}
ボタンの装飾になります。
「disabled」の部分では背景色をグレーにして、クリックが出来ないアイコンを表示しています。
JavaScript
// 「送信する」のチェックボックス
const sendCheckbox = document.getElementById("send_check");
// 送信ボタン
const submitBtn = document.getElementById("submit_btn");
// チェックボックスをクリックして
sendCheckbox.addEventListener("click", () => {
// チェックされている場合
if (sendCheckbox.checked === true) {
submitBtn.disabled = false; // disabledを外す
}
// チェックされていない場合
else {
submitBtn.disabled = true; // disabledを付ける
}
});
コメントにも入れていますが、チェックが入っているかどうか判断して処理を分けています。
これで機械的に送ってくるスパムメールを、ある程度防げると思います。
また、自動返信を悪用したスパムメールも発生しています。
これはメールアドレス欄に他人のアドレスを入力して、第三者にスパムメールを送信するという攻撃手法です。
今回のチェックボックス形式もよいですが、場合によっては自動返信機能の解除も検討してみてください。