コンタクトフォーム7でreCAPTCHA V3を導入する方法

先日、コンタクトフォーム7でreCAPTCHAを使おうとしたら、以前はあったreCAPTCHAのタグが無くなっていました。
あり?と思ったらV3に変わったもよう。V3って何にも出てこないんですね。知りませんでした。エンドレスでタイル選びをさせられる事ももう無いんです。素晴らしい!
という事で、今回はコンタクトフォーム7にスパムメール対策に絶大な効果を発揮するreCAPTCHAのV3を導入する方法です。
~ 目次 ~
Google reCAPTCHAでサイトを登録
V2までのサイトキーやらは使えないようです。
https://www.google.com/recaptcha/admin
上記のURLにアクセスしてサイトを登録して、サイトキーとシークレットキーを入手しましょう。
ラベル
なんでもいいので、自分でわかりやすい名前を付けましょう。
reCAPTCHAタイプ
この記事を書いている時点では、まだV2も選べるようです。この記事のタイトルからして当たり前ですが、reCAPTCHAタイプはV3を選びます。
ドメインを登録
ここで使用するサイトのドメインを登録します。
コンタクトフォームのあるページのURLなどではありません。このサイトでいうとwhitewood-hp.comです。
以上を入力して利用規約に同意し送信!
すると「サイトキー」と「シークレットキー」が発行されます。
コンタクトフォーム7の設定
Ver.3のサイトキーとシークレットキーを取得できたら、コンタクトフォーム7に設定します。
管理画面左メニューのお問い合わせ(コンタクトフォーム7のトコです)のサブメニューに「インテグレーション」というのがありますので、ここを開きます。
reCAPTCHAという枠が出てきますので、インテグレーションのセットアップと進んで、先ほど取得したサイトキーとシークレットキーを入力し、保存しましょう。
これでOKです。コンタクトフォーム7のフォーム内には何も設置する必要はありません。V3は何も表示されませんが、ちゃんと有効になっています。
reCAPTCHAロゴを削除
導入は非常に簡単でしたが、1つ問題が発生。サイトのすべてのページにreCAPTCHAのロゴが出現しました。
これは明示しないといけないらしいのですが、フォームのページで明示してあれば怒られないでしょう。邪魔くさいので他のページでは消してしまいましょう。
1 2 3 4 5 6 7 |
add_action('wp_enqueue_scripts','delete_recaptcha'); function delete_recaptcha() { if(is_page('contact')){ return; } wp_deregister_script('google-recaptcha'); } |
3行目のis_page(‘contact’)の部分でページ判定していますので、contactの部分を実際のコンタクトフォーム7設置ページのスラッグに変更しましょう。ページのIDでも大丈夫です。
最後に
ちなみに前にreCAPTCHAのV2を導入したサイトを確認したら、V2のタイルが次々に出てくるヤツがちゃんと表示されていました。なんだか設置した時に整えたデザインが崩れていましたが。。
よく、タイル選びがエンドレスループになったりして、ウンザリしてフォーム送信をやめてしまう事がありました。それと比べるとV3はバックグラウンドで動いてくれるのでうれしいですね。今後はV3一択ですね。