コンタクトフォーム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
Search in posts
Search in pages