Contact Form 7でスパムメール対策（reCAPTCHA）

WordPress

mori

公開日2021.04.05

reCAPTCHAとは？

reCAPTCHAは、Webフォームなどに登録する際、botなどによる悪質なアクセスからWebサイトを守るための機能です。

詳細↓

「reCAPTCHA」って？スパム対策に効果的なreCAPTCHAをフォームに入れてみた

2018年10月29日にGoogleからreCAPTCHAの新バージョンreCAPTCHA v3が正式公開されたのでこちらが主流になる。

特徴は画像認証がなくなったこと。

①GoogleのサイトでreCAPTCHAを取得

②適用したいフォームのHTMLにreCAPTCHAのJavaScriptを組み込む

③サーバー側でreCAPTCHAが送信したトークンをチェック

④アクションとスコアによりbot判定時の動作などを設定

手順詳細↓

※is_page(‘contact‘)のcontactには表示させたいページのスラッグ名を入れる

【PHP】

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

参考↓

上記のやり方でうまくいくのは、Contact Form 7のバージョンが5.1以上の時。（2021年4月6日現在）

それ以下のバージョンの時は以下の方法を試す。

手順↓

プラグインInvisible reCAPTCHAを使ってreCAPTCHA v3のバッジを邪魔にならずに表示させる方法

※GoogleのサイトでreCAPTCHAを取得する手順は一緒

Contact Form 7のインテグレーションではなく、Invisible reCaptcha for WordPressでサイトキーなどの設定を行う

この場合、function.phpに記述を入れなくても、Contact Form 7導入ページにのみ、reCAPTCHAが表示される

導入事例: 【Invisible reCaptcha for WordPressで導入】
タイタン大阪お問い合わせフォーム：https://titan-art.com/contact/
【Invisible reCaptcha for WordPressを使わず導入】
タイタン東京お問い合わせフォーム：https://tokyo.titan-art.com/contact/

最新記事: タグマネージャーの設定（随時更新）

2021.11.09 WEB・APPSEO対策

mori; メルマガの開封・クリックをGoogleアナリティクスで測定する方法

2021.10.19 WEB・APPテクニックSEO対策

mori; 横スクロールサイトがかっこいいサイト

2021.10.18 WEB・APPテクニックアイデア

mori

タグ: UX・UI デザインバックエンドフロントエンド ECサイトサーバー・ドメイン SNS ツール PHP SEO Webツール note JavaScript GoogleTagManager Git Facebook ショップサーブオウンドメディア CSS SearchConsole VScode Instagram お名前ドットコムカラーミー CMS HTML GoogleAnalytics XD プログラム言語 Twitter heteml EC-CUBE WordPress 操作方法アプリ画像関係 Python VBA データベース MySQL Ruby Shopify

メンバー: kitada(29); mori(23); nakano(7); nishimura(31); hatori(7); watanabe(2); titan-suzuki(0)