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

コンタクトフォーム7でreCAPTCHA V3を導入する方法
2020年3月14日2020年3月22日

先日、コンタクトフォーム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のロゴが出現しました。

これは明示しないといけないらしいのですが、フォームのページで明示してあれば怒られないでしょう。邪魔くさいので他のページでは消してしまいましょう。

3行目のis_page(‘contact’)の部分でページ判定していますので、contactの部分を実際のコンタクトフォーム7設置ページのスラッグに変更しましょう。ページのIDでも大丈夫です。

最後に

ちなみに前にreCAPTCHAのV2を導入したサイトを確認したら、V2のタイルが次々に出てくるヤツがちゃんと表示されていました。なんだか設置した時に整えたデザインが崩れていましたが。。

よく、タイル選びがエンドレスループになったりして、ウンザリしてフォーム送信をやめてしまう事がありました。それと比べるとV3はバックグラウンドで動いてくれるのでうれしいですね。今後はV3一択ですね。

関連のある記事

コンタクトフォーム7で動的にデフォルト値や選択肢・送信先などを設定する方法

コンタクトフォーム7で動的にデフォルト値や選択肢・送信先などを設定する方法

記事を読む

コンタクトフォーム7でフォームを判定して別々のサンクスページを表示する方法

コンタクトフォーム7でフォームを判定して別々のサンクスページを表示する方法

記事を読む

コンタクトフォーム7にサンクスページを追加する方法

コンタクトフォーム7にサンクスページを追加する方法

記事を読む

コンタクトフォーム7で郵便番号から住所を自動入力させる方法

コンタクトフォーム7で郵便番号から住所を自動入力させる方法

記事を読む

コンタクトフォーム7の「ありがとうございます」の表示位置を変更する方法

コンタクトフォーム7の「ありがとうございます」の表示位置を変更する方法

記事を読む

Generic selectors
Exact matches only
Search in title
Search in content

目次へ