Contact Formをバージョンアップ。reCAPTURE V3が使えるようになっていた

wordpress

WordPressでお問い合わせフォームを作るなら自分で書いてもいいけど、プラグインを使うとメールフォームの作成にかける時間がうんと削減できます。

わたしが使っているのは「Contact Form7」というプラグイン。メールフォームを作成すると発行される「ショートコード」をメールフォームを設置したいところに入力するだけでいい、なんともありたがたいプラグインのひとつです。

スポンサーリンク

メールフォームを設置。サイト運営が長くなるとスパムメッセージを受信するようになってしまった…

Contact Form7を使い始めてから、お問い合わせページからの問い合わせが順調に増えました。が、それに伴うかのようにスパムメッセージも届くようになってしまいました。

reCAPTCHAを使う前は「承諾要求(チェックマークを入れないと送信できない)」を使っていた

初めのうちは、Contact Form7の設定にある「承諾要求」を使っていたのですが、これではスパムメッセージをはじき切れないようになってしまいました。

そこで、Contact Form7にreCAPTCHAを設置してみようと思い立ち、サイトをreCAPTCHAに登録して導入してみました。

プラグイン(Contact Form7)を更新したらreCAPTCHAが動作しなくなった

ある日、Contact Form7のプラグイン更新通知が来ていたので、プラグインを更新しました。

ところが、お問い合わせページに「recaptha」と文字だけが表示されてしまっていることに気がつきました。

一瞬目を疑いましたが、気を取り直し、WordPressのダッシュボードを確認すると「お問い合わせ」の欄に通知が入っていることに気がつきました。

見てみると、Contact Formのチェックをしなさいという通知。チェックをしてみると異常なしと出ました。おかしいな…、異常ありますよね。

そこで調べてみるとありました!

Contact Form 7のreCAPTCHAをv3に変更する方法【v2→v3】
Contact Form 7をバージョン 5.1へとアップデートした際に、reCAPTCHA v3へ変更してくださいと表示された場合のv3への変更方法です。※↑このようなメッセージが表示されたらreCAPTCHA v3へ変更しましょう。re

Contact Form7がreCAPTCHA v3に対応。これが原因か…

そこで、reCAPTCHA v2をv3に変更すべく、reCAPTCHAのサイトにアクセスし、変更する手段を探しましたが見つかりません。

ということは、新しくサイトをv3として登録し、新しくサイトキーとシークレットキーを取得するしかなさそうだ。

新たにサイトを登録し、サイトキーとシークレットキーを取得し、WordPressのダッシュボードから「お問い合わせ」→「インテグレーション」でサイトキーとシークレットキーを入力し、インテグレーションを行いました。

サイトのお問い合わせページを確認すると、reCAPTCHAのボタンが無事表示されました。

なるほど、以前のreCAPTCHA v2だとチェックボックスをクリックしないと送信できないように、メールフォーム直下にreCAPTCHAが表示されていましたが、reCAPTCHA v3はチェック(クリック)しなくてもよくなったのか…。

メールフォームやコメントなどを送ろうとしてくださっている方に手間をかけさせなくても済む、なんともありがたい機能なんだろう…と思った。が…

reCAPTCHA v3を導入したらすべてのページにreCAPTCHAが表示されるようになっった

他のページにもこのreCAPTCHAのボタンが表示されるようになってしまった。PC表示ならさほど気にはならないが、スマホ表示だと結構目立つ。

右下にreCAPTCHAのボタンが表示されている

reCAPTCHAのボタンはコメントやメールフォームのページだけに表示してくれたらいいのに…。

Invisible reCaptcha for WordPressというプラグインを使えば必要なページにだけreCAPTCHAを表示させられる

Contact Form7の画面には、ページを除外するとかそういう設定はなかったし…、と調べてみるとreCAPTCHAのボタンがすべてのページに表示されないように、必要なところにだけ表示させるように設定するためには、Invisible reCaptcha for WordPressというプラグインを使えばいいとありました。

というわけでInvisible reCaptcha for WordPressというプラグインをインストール・有効化してみることにしました。

まず初めにreCAPTCHAのサイトにアクセスし、reCAPTCHA v3としてサイトを登録し、サイトキーとシークレットキーを取得しておきます。

以前、reCAPTCHA v2を使っていた人は、WordPressのダッシュボードから「お問い合わせ」から
・コンタクトフォームを編集し、recapthaの行を削除し保存しておく
・インテグレーションに設定してあるreCAPTCHAのサイトキーとシークレットキーを削除しておく
ようにしましょう。

Invisible reCaptcha for WordPressをインストールし有効化する

WordPressのダッシュボードから「プラグイン」→「新規追加」とし、以下の文字列でプラグインを検索しましょう。

Invisible reCaptcha for WordPress

見つけたらインストール・有効化しておきます。

Invisible reCaptcha for WordPressの設定を行う

WordPressのダッシュボードから「設定」→「Invisible reCaptcha」をクリックし、先ほど取得しておいたサイトキーとシークレットキーを設定します。その下の選択項目は、Japanese、inlineを選択し設定を保存します。

これでreCAPTCHA自体の設定は完了です。次に、どこにreCAPTCHAのボタンを表示させるかという設定を行います。

まず、「WordPress」をクリックします。すべてのチェックボックスにチェックを入れてもいいらしいのですが、ログインなどがうまくいかなくなると困るのでコメント欄にだけreCAPTCHAのボタンを表示させることにしました。

必要なところにチェックを入れてから設定を保存します。

次に、「Contact Form」をクリックするとプラグイン名がふたつ並んでいます。

わたしが使っているのは「Contact Form7」ですので、そちらにチェックを入れて設定を保存しました。

ページを確認するとすべてのページの右下に表示されていたreCAPTCHAのボタンが表示されなくなっています。メールフォームを確認するとしっかりreCAPTCHAのボタンが表示されていました!

Contact Form7がreCAPTCHA v3に対応。プラグインを更新したらreCAPTCHA v3を設定することになる

プラグインの更新。何も考えずに更新するといろいろハプニング…じゃないな、新しく導入された機能とかがないか確認してからプラグインは更新したほうがいい、ということを今回学びましたね。

WordPressで制作したお客さまのサイトでContact Form7を導入しているサイトはすべて対応できました。

reCAPTCHAがすべてのページに表示されても問題ない人もいるだろうし、わたしのようにすべてじゃなくてもいい、と考える人もいると思いますので、備忘録も兼ねて投稿しておきます。

お問い合わせ・ご質問はこちらから
お問い合わせやご質問はこちらからお願いいたします。
スポンサーリンク
この記事を書いた人
アバター

ホームページ開設・運用、リニューアルのご相談や、SNS・ブログの運用サポート、市民活動団体のIT活用提案・サポート、Webライティングを行っています。
また、県内各所にてパソコン操作講習会やSNS活用セミナーなどの講師もしています。

wseedkをフォローする
wordpress
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
wseedkをフォローする
だぶるしーど