Contact Form 7 に Google reCAPTCHA を設置する

ボットによる不正なフォーム送信を防ぐために、Google reCAPTCHAを設置してみます。

Contact Form 7 プラグインのインストール

wp-cliでContact Form 7プラグインをインストールする

Google Recaptchaサイトに行き、recaptchaを有効にしたいドメインを登録

↓ Contactメニューの「Integration」メニューから、recaptchaのリンクをクリックします。
recapthca

↓ 「Get reCAPTCHA」ボタンを押下します。
google recaptcha 1

↓ ラベル名とrecaptchaを表示させたいドメインを登録します。ドメインは複数登録することができます。
register domains by label name

↓ Site key と Secret Key を コピーします。
site key and secret key

↓ Site key と Secret Key を それぞれペーストし、「Save」します
save

↓ 右メニュー Contact ▷ Contact Form を選択し、recaptchaを設置したいフォームを選択します。
Contact ><noscript><img src=

↓ 「Insert Tag」ボタンをクリックし、設定を完了します。
Insert tag

↓ このようにショートコードが追記されたら、「Save」ボタンをクリックして、編集を完了させます。
recaptcha short code


お問合わせフォームを設置

↓ 固定ページにお問合わせフォームのショートコードを記述したところ:
ショートコード

↓ フォームの表示確認。reCAPTCHAが表示されることが確認できた。
表示確認

トラブルシューティング

ロリポップサーバーを使っている場合、Contact Form 7 のフォームを編集画面で「Save」すると、403エラーになることがあります。その場合、一時的にWAFを無効にすることで保存できるようになります。(WAFを無効化したあと、すぐには反映されないようです。しばらくまってから再度編集▷Saveしてみましょう。)

↓ 403エラーが発生したところ
403エラー

↓ WAFを無効にしたところ
WAFを無効にしたところ

Filed under: プラグインTagged with: ,

No comment yet, add your voice below!


Add a Comment

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください