![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
[WordPress] Contact Form 7のスパム対策プラグイン「Honeypot for Contact Form 7」
markleaps.com
Contact Form 7 にハニーポットとhCaptcha機能を追加できるプラグイン CF7 Apps – [Honeypot and hCAPTCHA for Contact Form 7] の設定方法についてご紹介します。
インストール・有効化
「プラグインを追加」画面の検索窓で「CF7 Apps」と入力し、
表示される CF7 Apps – [Honeypot and hCAPTCHA for Contact Form 7] をインストール・有効化します。
有効化すると、以下のような画面が表示されます。
セキュリティや機能アップデートなどに関するメールを
・受け取る場合は「許可して続ける」
・受け取らない場合は「スキップ」
をクリックします。
ハニーポットの基本設定
お問い合わせ＞「CF7 Apps」をクリックします。
Spam Protection 項目の「Honeypot」をクリックします。
以下のような設定項目が表示されます。
基本的にはそのままでも問題ありません。
最低限、「Enable Honeypot App（ハニーポットアプリを有効にする）」がONになっていることを確認しましょう。
以下は各項目の内容です。
| 項目 | 内容 | チェックを入れると | おすすめ設定 |
|---|---|---|---|
|
Store Honeypot Value （ハニーポットの値を保存） |
ハニーポットに入力された値を、Flamingo などの保存系プラグインに保存するかどうか | スパムボットが入力した内容を確認でき、スパム分析に役立つ | 常運用：チェックなし スパム調査・検証中：チェック |
|
Global Placeholder （グローバルプレースホルダー） |
ハニーポット項目に placeholder を設定するかどうか 他の入力欄に placeholder を使用している場合、見た目を似せる目的で使用 |
ボットが通常の入力欄と誤認しやすくなる | placeholder を多用しているフォーム：設定推奨 迷った場合：設定なし |
|
Accessibility Message （アクセシビリティ用メッセージ） |
スクリーンリーダー向けに 「このフィールドは空のままにしてください。」 という非表示メッセージを出力 | 視覚に障がいがある方への配慮となり、WCAG 対応に役立つ | デフォルト文言のまま（設定なし） |
|
Use Standard Autocomplete Value （autocomplete を標準値にする） |
通常はブラウザの自動入力を防ぐため、変則的な autocomplete 値が使用される | autocomplete="off" に変更される一部ブラウザでの誤動作が減る場合があるが、スパム対策効果はやや下がる |
問題がなければ チェックなし 自動入力される場合のみ チェック |
|
Move Inline CSS （CSSをフッターへ移動） |
ハニーポット欄を非表示にする CSS を、インラインからフッターへ移動する | 「いかにも隠しているフィールド」感が減り、ボットにハニーポットだと見抜かれにくくなる | チェック推奨 |
|
Disable Accessibility Label （アクセシビリティラベルを無効化） |
スクリーンリーダー用の label を生成しない | アクセシビリティは低下するが、一部のボットを騙しやすくなる可能性がある | 通常：チェックなし スパムが非常に多い場合の最終手段：チェック |
|
Enable Time Check （送信までの時間チェック） |
フォーム表示から送信までの時間でスパム判定を行う デフォルトでは4秒未満で送信されるとスパム扱いされる |
高精度なスパム検出が可能になるが、入力が非常に早いユーザーが弾かれる可能性がある | 入力項目数やスパム状況に応じて判断 |
フォームにハニーポットフィールドを追加
送信ボタンの上あたりにカーソルを合わせ「ハニーポット」をクリックします。
「項目名」を任意のものに変更し、「タグを挿入」をクリックします。
項目名は初期値の「honeypot-xxx」のままだと、botに検知されてしまう可能性があるため、「honeypot」という文字列は避けた名称にしておくと安心です。
また、honeypot に指定する項目名は、実際のフォームで使用している項目名と重複しないように設定することをおすすめします。
例えば、フォームで [text your-age] を使用している場合は、honeypot に [honeypot your-age] のような指定は避けた方がよいです。
項目名が重複すると、フォームの値が上書きされてしまい、メールで入力内容を正しく取得できないなど、意図しない不具合が発生する可能性があります。
honeypotのタグが挿入されたことを確認したら、「保存」をクリックします。
Honeypotの仕組みについては以下の記事で解説しています。
hCaptchaの基本設定
お問い合わせ＞「CF7 Apps」をクリックします。
Spam Protection 項目の「hCaptcha」をクリックします。
以下のような設定項目が表示されます。
- 「Enable hCaptcha App（hCaptchaアプリを有効にする）」をONにします。
- Site Key
hCAPTCHA の公式サイトで取得したサイトキーを設定 - Secret Key
hCAPTCHA の公式サイトで取得したシークレットキーを設定 - Invalid Captcha error message
認証に失敗した場合のエラーメッセージを設定
初期値：Invalid Captcha（無効な認証） - Force hCaptcha to render in a specific language.
hCaptchaで使用する言語を設定
初期値：Japanese
最後に「Save Settings」をクリックします。
hCAPTCHAの登録方法とキーの取得手順については以下の記事で解説しています。
フォームにhCaptchaフィールドを追加
送信ボタンの上あたりにカーソルを合わせ「hCaptcha」をクリックします。
以下の内容を任意のものに設定し、「タグを挿入」をクリックします。
hCaptchaのタグが挿入されたことを確認したら、「保存」をクリックします。
フォーム画面に以下のようなhCaptcha認証が表示されます。
※そのままでは左揃えになるため、左右中央揃えにしたい場合は .h-captcha classに対して中央寄せする記述をスタイルシートに追記します。
例
|
1 2 3 4 |
.h-captcha { width: fit-content; margin: 30px auto 0; } |