ContactForm7のreCAPTCHA v3設定方法【フォーム以外非表示も可能】

こんにちは、Web制作フリーランスのしょーご（@samuraibrass）です。

Web制作でContactForm7を使い、「reCAPTCHA」を使わないと、納品後高確率でこういう相談が来ます。

クライアント

なんかスパムメールが届くんですけど、、、どうすればいいですか？

しょーご

（やべ、そんなことあるのか）今すぐ確認させていただきますね！！

そこで今回はスパムを防ぐ「reCAPTCHAによるスパムメール対策」を解説します。

これを解説している私自身は、これまで30件以上のお問い合わせフォーム付きWordPressサイトを制作してきました。

今回の記事を読んでいただくことで、スパム対策が整ったContact Formが準備できるようになります。

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】 — 販売ページはこちら

デザインカンプからのコーディングを経験したい
現役エンジニアのレビューを受けてみたい
即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています！

コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！

＼無料の入門編から本格企業サイトまで／

ひとまず課題を見てみる

スパム対策を行わないとどうなる？
eCAPTCHAの仕組み
reCAPTCHAによるスパムメール対策方法
Contact Form 7はreCAPTCHA v3スパム対策を！

スパム対策を行わないとどうなる？

Contact Form 7はスパムメールを弾く機能をデフォルトでは持っていません。

設定していないと、以下のような英語のメールが頻繁に届いたりします。

まあ、これはインスタのフォロワーを月額60ドルで買いませんか？というメールなので、人力営業でボットスパムじゃない可能性も0ではないと思いますが、限りなくボットだと思います(^_^;)

というか、SNSのフォロワー操作は垢バン対象なので、そもそもグレービジネスですよね…

eCAPTCHAの仕組み

今回使用する「reCAPTCHA v3」がどういう仕組でボットを弾くのか、下記の引用がわかりやすかったです。

reCAPTCHA v3 では、フォームにアクセスし操作している方の行動を「スコア化」し bot かどうかを判定します。
アクセスした方が bot と判定された場合は、入力画面の「送信」ボタン押下時に
“Google の reCAPTCHA による判定の結果、bot による登録の疑いが強いため、登録できません。ブラウザやデバイスなどのアクセス環境を変えてご利用ください。”
とのエラーメッセージが表示され、データ登録は行われません。
https://www.synergy-marketing.co.jp/cloud/synergylead/support/manual-form-tab-what-is-recaptcha/

とのことです。

しょーご

人力の、法人からのお仕事メールなどはまず弾かれないので、ご安心ください。

reCAPTCHAによるスパムメール対策方法

①reCAPTCHA公式サイトでAPIキー取得

まずは「reCAPTCHA」公式サイトにアクセスし、上の「v3 Admin Console」からアクセス。

Contact Form 7はスパム対策すべし！reCAPTCHAによるスパムメール対策を解説

その後、以下項目を入力。

ラベル：複数サイトを判別するように設定、ドメイン名で良いかと
reCAPTCHAタイプ：スコアベース（v3）
ドメイン：適用するサイトのドメイン

入力できたら、送信を押すと、以下の画面になります。

ここで表示されている「サイトキー」「シークレットキー」は忘れずに控えておくようにしましょう！！

この後使います。

②Contact Form 7でreCAPTCHA設定

ここからはWordPress側で設定していきます。

まずは管理画面の「お問い合わせ→インテグレーション」をクリックし、reCAPTCHAの「インテグレーションのセットアップ」をクリック。

その後、先程控えた「サイトキー」「シークレットキー」を入力しましょう。

これでreCAPTCHAの設定完了です！！

③eCAPTCHAのロゴをCSSで消す

reCAPTCHAのロゴですが、なかなか邪魔だな…ということで、これをCSSで消していきます。

これはGoogle公式の方法なので、問題ありません。

https://developers.google.com/recaptcha/docs/faq?hl=ja

まずは、以下のHTMLコードをContact Form 7に貼り付けます。

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

その後、いよいよCSSでロゴを消していきます。

CSSはテーマによっては「カスタマイズ→追加CSS」で記入できます。

任意の場所から.grecaptcha-badge { visibility: hidden; }を入力してください。

すると、ロゴが消えます。

❹reCAPTCHA v3をフォーム以外で非表示にする

実は、reCAPTCHA v3は全部のページに表示されています。

しかし、結構サイトが重くなるので個人的には「フォームのあるページのみに表示」させるのを推奨します。

functions.phpに以下のコードを追加してください。contactの部分は、あなたのお問い合わせページのスラッグにしてください。

add_action( 'wp_enqueue_scripts', function() {
    if(is_page('contact')) return;
    wp_deregister_script( 'google-recaptcha' );
}, 100, 0);

add_action('wp_enqueue_scripts', ...) は、WordPressのアクションフックを使用しています。‘wp_enqueue_scripts’フックは、フロントエンドでスクリプトとスタイルをエンキューするために使用されます。
if(is_page('contact')) return; – この行は、現在のページが‘contact’ページである場合、関数の実行を中止します。つまり、contactページでは以降のコードは実行されません。
wp_deregister_script('google-recaptcha'); – この関数は、‘google-recaptcha’という名前のスクリプトの登録を解除します。これにより、そのスクリプトはページに読み込まれなくなります。
最後の 100, 0 は、アクションの優先度と引数の数を指定しています。優先度100は、他のスクリプト関連の処理の後にこの処理を行うことを意味します。

これで、フォームのあるページでのみ機能するようになり、軽量化できます。

もしお問い合わせページが複数あるなら、以下のコードを使用して適宜入れ替えてください。

add_action('wp_enqueue_scripts', function() {
    if (is_page('contact') || is_page('contact-form')) return;
    wp_deregister_script('google-recaptcha');
}, 100, 0);

デベロッパーツールの検索機能を使って、reCAPTCHAと検索すれば、DOM要素がお問い合わせページでのみ出現していることを確認できます。