古いContact Form 7 に reCaptcha v2 を設定する

2022.07.04 2022.08.20 篠原隆司

数年前に作ったっきりのWordpressサイト。

お問い合わせフォームを設置したものの、迷惑メールが増えてきて困っている、といった相談を頂くことがあります。

よくある解決策の１つにGoogleの ReCaptcha があります。
▼のようなのを見かけたことはないでしょうか。

ということで調べてみると導入の仕方を説明した記事はいっぱい見つかります。

読んでみるとそんなに難しくもなく、ちょちょちょいって感じで導入できそうな気がしてきます・・・。

気がしてくるだけの場合がほとんどです。

罠がいっぱいありますので、そのあたりを取り上げていきたいと思います。

ということで、依頼を受けて見積りを作ろうとしてる方は良かったですね。
プラグインを入れて設定して終わりのつもりで金額設定していたら泣くことになってたかもしれません。

事前準備

reCAPTCHAはv2とv3のどちら？

いま主流のreCAPTCHAは２種類あって、v2 と v3 です。

「バージョン2」「バージョン3」でしょ？
だったら「バージョン3の方が良いでしょ」って言いたいところですが、そうじゃありません。

v2、v3 って「名前」だと考えたほうがしっくりきます。

ちょっと乱暴ですが、簡単に書くと次のようになります。

v2
人間かどうか自動判定し、「人間でない」と判定されたら試験を行う
※「試験」とは「画像が表示されて信号を選択してください」みたいなやつです。

v3
人間かどうか自動判定し、「人間でない」と判定されたら拒否する
※正確には「人間でない」判定のときは利用者側でプログラムすることになるのですが、プラグインなどで導入しているならプラグインの機能として「問答無用で拒否」という形になっている可能性が高いです。

「誤判定は防止し、人間ならできるだけ通したい」という場合は、v2 のほうがオススメですね。

詳しくは▼もご覧になってみてください。

スパム対策 reCAPTCHAの v2 と v3 の違いって？

WordPressのアップデートには入念な事前検証が必要

WordPressをアップデートしないと最新のContact Form 7 が使えない

ということはその裏返しでもあります。

WordPressをアップデートすると、以前まで使えてたプラグインが使えなくなる可能性がある。
プラグインだけでなく、functions.php などでカスタマイズしていた部分も怪しくなります。

テスト環境などを用意して事前に検証しておくことをオススメします。

PHPのアップデートには入念な事前検証が必要

PHP も同様です。
下位互換性は高いほうなのでよっぽどレベルだと思いますが、考え方は同じです。

functions.php など自分でカスタマイズしている部分が動かなくなっていたらPHPバージョンに合わせて書き直すことになります。

プラグインは公式のものを使っているならたいてい問題はないはずですが、問題がないことの証明はしておいたほうが精神的に良いですよね。

テスト環境などを用意して事前に検証しておくことをオススメします。

Contact Form 7 に reCaptcha v2 を導入する

最新バージョンを使っているなら、さくっと入れて終わってるレベルなので、たぶんこのページを見ることは無いですよね。

古いバージョンだから気になってるはずです。

そしてその懸念どおり罠もあります。

ということでやっていってみましょう。

それぞれのバージョン

今回は次のバージョンの組合せを前提に進めます。

WordPress 5.2.15
Contact Form 7　5.1.4
ReCaptcha v2 for Contact Form 7　1.4.0

なぜこの組合せなのか、ほかのバージョンだとどうなの？

ってところですが、

この組合せで罠にハマったからこの記事書いてる

です。

もう少し新しめのバージョンだったり、いろいろな組み合わせで対応してきた経験もありますが、今回初めてだったんですよね。

プラグインのインストール

インストールするのは「ReCaptcha v2 for Contact Form 7」です。

WordPress管理画面の「プラグイン」から「新規追加」で「ReCaptcha v2 for Contact Form 7」を検索して「インストール」「有効化」まで行います。

APIキーの取得

https://www.google.com/recaptcha/about/

▲より、設置するWebサイトを登録してサイトキーとシークレットキーを取得します。

このとき reCAPTCHA のバージョンを選択できますので v2 を選択しておきます。

APIキーの設定

「お問い合わせ」の「インテグレーション」から「インテグレーションのセットアップ」ボタンをクリックして、取得したサイトキーとシークレットキーを設定します。

reCAPTCHA のバージョンを変更

「お問い合わせ」の「reCaptcha バージョン」から「reCaptcha バージョン2」に変更して保存します。

お問い合わせフォームに [recaptcha] を追加

v2 の場合はフォームに [recaptcha] タグが必要になります。

ちなみに [recaptcha] を付けたまま v3 に切り替えたら [recaptcha] は削除してくれますので、フォーム設定はそのままに v2 、 v3 の切り替えはできます。

フォームの確認

ここまでで正式な説明としての作業は完了となります。

実際にお問い合わせページを表示してみて確認してください。

reCAPTCHA が動作していていることを確認できたらここで終了です。

不具合対策

ここまでの内容で動作できていたらこれ以上行うことはありません。

さて、いよいよここからが本記事の本題です。

reCAPTCHAが表示されない

現象が確認されたバージョンは次となります。

WordPress 5.2.15
Contact Form 7　5.1.4
ReCaptcha v2 for Contact Form 7　1.4.0

プラグインをインストールして、各種設定が終わってさて確認確認っと！したところで、あるはずのものが出てきてません。

いろいろと設定画面などを確認して、無駄に時間を消費したあとで見つけることになります。

Google Chrome を使ってるなら F12 でデベロッパーツールを表示します。

「ネットワーク」を押します。

api.js が赤色になってエラーになっていることを発見します。

https://www.google.com/recaptcha/api.js?render=ABCDEFG&ver=3.0

初見なら「ver=3.0」を見て、
ん、3？ v3？
v2 やったら「ver=2.0」とかじゃないのか？

なんて、思っちゃいますね。

勘違いだと気が付くのにまた時間が掛かります。

「ver=3.0」は、Wordpressでお馴染み wp_enqueue_script() で javascript を登録したときに付くバージョン情報です。
Google APIとはまったく関係のないものです。

まぁ、そのあとも、あれがダメ、こっちでもない、といくつかの罠を潜り抜けてたどり着いた結論がこちらです。

ReCaptcha v2 for Contact Form 7 は、古いバージョン Contact Form 7 に対応していない

です。

原因は、プラグインが対応してないことです。

いくら自分の作業を振り返っても分かるはずないですね。

古い Contact Form 7 で ReCaptcha v2 for Contact Form 7 を使えるようにする

さて、いよいよここからが本記事の本題のなかの本題です。

ReCaptcha v2 for Contact Form 7 は便利なプラグインなんですが、新しめの Contact Form 7 にしか対応していないことが分かりました。

じゃ、どうするか？

諦めましょうか？それも１つの方法です。

でも僕はイケてる方法で解決へと導きます。

まずは、functions.php をエディタで開きます。

functions.php の一番下に次のコードを貼り付けます。

// ReCaptcha v2 for Contact Form 7 対策
add_action( 'after_setup_theme', function(){
	remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 10, 0 );
} );

// ReCaptcha v2 for Contact Form 7 対策
add_action( 'wp_enqueue_scripts', function(){
	wp_enqueue_script( 'google-recaptcha' );
}, 51 );

以上です。

お問い合わせフォームを開いて確認してみましょう。

開発・技術入サポート

ということで宣伝です。

弊社では有償でWordpress案件も行っていますので、お気軽にお問い合わせください。
WordPressは2007年（バージョン2.2）頃から触り続けてきていることもあり得意中の得意です。

特にプログラム開発が必要になるようなカスタマイズは遠慮なくご相談ください。

メールやSNSなどのメッセージで簡単に連絡いただいたあとで、電話していただけると確実です。

特に 03 で始まる番号は、営業電話が面倒で取らない場合がほとんどです。
また、メッセージだけだと時間が掛かるので、最初の最初はお電話からでお願いしたいです。

※電話にはスカイプ・Google Meet・Zoomなども含みます。