reCAPTCHA v3 新バージョンの使い方|スパム避けツール

recaptcha3 - reCAPTCHA v3 新バージョンの使い方|スパム避けツール

2019年1月6日

問い合わせ用Contact Form7の不具合の原因

昨年末(2018年12月)に、このブログに入れている、「問い合わせフォーム」から送信できない!
という報告メールを読者さんから頂戴しました。

確認してみたら、確かに、投稿ができなくなっていました。

使っているフォームは、Contact Form 7です。
原因は、このブログのWordPressを5.02にアップデートしたことかもしれません。(確証はありません)

とにかく、“問い合わせフォーム” が送信できないのは困るので、まずは、プラグインの入れ直しをしてみました。
アップデート案内に従ってContact Form 7を
「バージョン 5.1.1」にアップデート。修正してみました。

修正作業でわかったのは、Contact Form 7をバージョンアップしたら、設置しているスパム避けのツール「reCAPTCHA2」が使えない様になっていました。以下、修正の備忘録です。

 

Contact Form 7のフォームが送れない!

 

このブログに入れている問い合わせフォームは以下の様なもの。
チェックボックスが表示されるべき場所に、こんな表示。[recaptcha]のテキスト。

img 5c305a2b20a2d - reCAPTCHA v3 新バージョンの使い方|スパム避けツール
↑クリックで拡大

フォームを見てみると、下の方に[recaptcha]というテキストが出ています。

今まで 使っていた “reCAPTCHA2” では、このフォームの下にの部分には以下のような が表示されていたはず・・

img 57709213e1366 - reCAPTCHA v3 新バージョンの使い方|スパム避けツール

しかも、送信テストをしてみたら、以下の表記。

img 5c30577d15622 - reCAPTCHA v3 新バージョンの使い方|スパム避けツール

修正したら、無事送信ができるようになりました。

img 5c31a2f101fae - reCAPTCHA v3 新バージョンの使い方|スパム避けツール

reCAPTCHAのバージョン2と3の違いとは?

実は2018年12月に “reCAPTCHA” がバージョン2の他に3が出ていました。
v2とv3の違いですが、v2では前述のように「私はロボットではありません」の表示がなくなりました。

v3にすると「私はロボットでありません」の表示がなくなるので、訪問者のユーザーはフォーム送信時にチェック挿入作業が不要になります。

ご覧のページの右下にありますが、こんな表示。

img 5c3062881128c - reCAPTCHA v3 新バージョンの使い方|スパム避けツール

カーソルを乗せると、このように動きます。

2019 01 05 17h01 18 - reCAPTCHA v3 新バージョンの使い方|スパム避けツール

 “reCAPTCHA v3” が導入されると、このマークが出ます。

v2を入れている状態で、Contact Form 7 の「問い合わせ」から、[recaptcha]のテキストを削除しておきます。

設定側としては、フォーム編集画面から、[recaptcha]を挿入するボタンが無くなります。

 

reCAPTCHA v3 設定手順

今までv3を入れていた場合は、一度、「インテグレーション」からキーを削除します。
設定手順は、reCAPTCHA v3 のサイトにアクセス、右上のログインボタンからGoogleのアカウントでログインします。

新しく「reCAPTCHA v3」にボタンチェクして、

 

img 5c313c17d9aa6 - reCAPTCHA v3 新バージョンの使い方|スパム避けツール

  ↑必要事項を記入。ドメインは、「http(s)://」の部分は不要です。
「Accept~~」の使用承諾のチェックを入れて「Register」をクリック。

img 5c313c7975f93 - reCAPTCHA v3 新バージョンの使い方|スパム避けツール

  ↑  ボタンを押すと ↓ この画面が出てきます。

img 5c313db284664 - reCAPTCHA v3 新バージョンの使い方|スパム避けツール

ここで2つのキー、「Site Key」と、「Secret Key」をメモしておきます。

 

Contact Form 7にreCAPTCHA v3 を設定する

ブログには、問い合わせフォーム、Contact Form 7 を入れていることが前提になります。
※導入方法と使い方はこちら→ https://1stepup.com/wp/contactform7/

ダッシュボードから「お問い合わせ」を開きます。

img 5c313fb94d367 - reCAPTCHA v3 新バージョンの使い方|スパム避けツール

「インテグレーションのセットアップ」をクリック。

img 5c314072e7c63 - reCAPTCHA v3 新バージョンの使い方|スパム避けツール

ここで、先程メモしておいた2つのKeyを記載、保存します。

img 5c3140ef616d8 - reCAPTCHA v3 新バージョンの使い方|スパム避けツール

ここまでの作業で、Contact Form 7 で作った “問い合わせフォーム” で無事送信ができるようになりました。

 

「header」へのソース追加

先の、reCAPTCHA v3 のサイトにログインしたページには、2つのKeyの他、次のような記述がありました。

img 5c31a63e70e1e - reCAPTCHA v3 新バージョンの使い方|スパム避けツール
↑クリックで拡大

このコードをそのまま、WordPressで今使っているテーマの「headr.php」ファイルにコピペしてファイルを更新します。

以上で完了です。