MENU
理央
「RIO NOTE」は1人の子を持つ「理央」が日々の気になったことを備忘録的に書いている個人ブログです。
好きなものは写真を撮ること、旅行、車、英語。
それらを中心にブログを書いています。

Ninja Formsに迷惑メール対策のGoogle reCAPTCHA v3を設置する方法

当サイトはアフィリエイト広告を利用しています
  • URLをコピーしました!

お問い合わせフォームから迷惑(スパム)メールどんどん入ってきて困ってないですか?

理央

こんにちは!理央(@leo__note)です!

比較的Ninja Formsの場合は少ないですが、Contact Form7を使っていた時は毎日何通かは必ず届いてた迷惑なやつ。それが使った日から完全に迷惑メールが止まりました。

理央

reCAPTCHAを入れる前はAskimetはもちろんのことお問い合わせフォームに計算式の「クイズ」を入れても全くダメでした。。

そういうメールは基本的に迷惑メールフォルダに入っていて中身を見ない限りは気になりませんが、それでもフォルダーのメール数が増えるのがなんとなく嫌だったので、今回Google reCAPTCHAをNinja Formsで作ったお問い合わせページに設置しました。

reCAPTCHA v2のことを書いているブログはあってもv3について書いているページが日本語だと見つからなかったので僕が困ったところも含めて備忘録的に残しておきます。手順はNinja Formsの公式ページを参考にしました。

本記事の内容
  • reCAPTCHA v3の登録方法の説明
  • Ninja Forms内での設定方法の説明
  • 気をつけること(←ここでつまずきました)
  • reCAPTCHAのバッジを非表示にする方法
目次

reCAPTCHA v3の登録方法

まずはGoogleでreCAPTCHAの登録をすることから始めます。これがないとWordPress側だけでは設定が出来ません。

理央

この手間がめんどくさいなぁ

というお気持ちめちゃくちゃ分かります!でも、すぐ終わりますのでサクッと終わらせましょう。

それではGoogleのreCAPTCHAページに飛びます

新しいサイトを登録する

STEP
ラベル
ラベル

ラベルは重要ではないので、分かれば何でもいいです。日本語でもOK。

例えば

  • サイト名
  • reCAPTCHA設定
  • ドメイン などなど
STEP
reCAPTCHAタイプ
reCAPTCHAタイプ

今回はreCAPTCHA v3の設定なのでv3を選ぶ。

STEP
ドメイン
ドメイン

http://やhttps://やhttp://www.やhttps://www.などを除いた部分。
私であればrionote.comです。サイトに合わせて打ち込みます。
複数のサイトを追加できるので、何個でもOK。

STEP
オーナー
オーナー

既に表示されているメールアドレスで問題なければそのままで。
それ以外のメールアドレスを指定したければ、追加してください。

STEP
reCAPTCHA利用条件に同意する
reCAPTCHA利用条件に同意する

チェックボックスにチェックを入れる。

STEP
アラートをオーナーに送信する
アラートをオーナーに送信する

何か問題があった時に連絡が来るので、チェックを入れる。

設定エラーや不審なトラフィックの増加など、サイトで問題が検出された場合にアラートを受け取ります。

STEP
送信ボタンを押す
送信

問題がなければ「送信」ボタンを押します。

「サイトキー」と「シークレットキー」が発行される

サイトキーとシークレットキー

サイトキーシークレットキーが発行されます。

この2つのキーはNinja Formsの中で必要となるので、このページ(タブ)は閉じずにそのままにしておきます。

基本的にGoogle側の設定はこちらで完了です。

必要な方のみ!
Google reCAPTCHA設定画面(ドメインの追加・AMP設定)

ドメインの追加AMPを導入しているサイトを持っている方に向けた設定です。
必要のない方は飛ばしても大丈夫です。

STEP
「設定に移動」をクリック
設定に移動

上の「設定に移動」のリンクをクリックすると設定ページに飛びます。

STEP
「ドメイン」を追加
ドメイン

こちらの設定画面からもドメインの追加ができます。先ほどの「新しいサイトを登録する」の設定画面で設定し忘れた場合こちらから追加可能。

STEP
AMPページで動作をさせる場合チェックを入れる
AMPページで動作するようにする

もしサイトがAMPを導入していて、AMPページでもreCAPTCHAが動作するようにするにはこちらにもチェックが必要。

STEP
「保存」
保存

問題がなければ「保存」をクリック。

Ninja Formsでの設定方法 – Google reCAPTCHAに連携させる

ここまで来るとGoogle側でする設定は終わっているので、次はNinja Forms側の設定です。

理央

後もう少しです!

それではWordPressの管理ページに入りましょう。

STEP
Ninja Formsの「設定」ページを開く
Ninja Formsの設定

WordPress管理ページのダッシュボードに左側にある「Ninja Forms」から「設定」を選びます。

STEP
reCAPTCHA v3の「キー」を貼り付け
reCAPTCHA設定

Google reCAPTCHAで設定したサイトキーをコピーして、reCAPTCHA v3 Site Keyに貼り付け。

同様に、シークレットキーをコピーしてreCAPTCHA v3 Secret Keyに貼り付け。

STEP
保存
設定を保存

終わったら「設定を保存」をクリックします。

この後、登録したreCAPTCHAを動かす設定をします。

僕がつまずいたのがここ。これも設定しないとreCAPTCHAが動かないので気をつけましょう。

STEP
Ninja Formsの「ダッシュボード」をクリック
Ninja Formsのダッシュボードへ

WordPress管理ページのダッシュボードの左側にあるNinja Formsから「ダッシュボード」を選びます。

STEP
作成済みの「フォーム」をクリック
お問い合わせフォーム

reCAPTCHAを設定したいフォームを選びます。

※ここのフォームの名前は人によって違います。あなたが作ったフォームの名前が表示されています。僕の場合は「お問い合わせフォーム」という名前をつけています。

STEP
「メールとアクション」をクリック
メールとアクション

お問い合わせフォームの中に入って「メールとアクション」をクリック。

STEP
「+」マークをクリック
+をクリック

右下にある青い+(プラス)のマークをクリック。

STEP
「reCAPTCHA v3」のボタンをクリック
reCAPTCHA v3を選ぶ

その中にreCAPTCHA v3があるのでこれを追加。

STEP
「完了」をクリック
完了

右上の「完了」のボタンをクリック。

STEP
フォームの中に「reCAPTCHA v3」ができたことを確認
reCAPTCHA v3

そうするとお問い合わせフォームにreCAPTCHA v3という項目が増えています。これが追加されるいるか確認。確認ができたら忘れずに「完了」を押します。これをしないと設定が完了しません。

理央

お疲れ様でした。これでreCAPTCHA v3の設定が完了です。

「お問い合わせページ」に行くと画面の右下にこのような(↓)バッジが出ているはず。出ていれば無事にreCAPTCHAが動いています。出ていなければどこかで設定が間違っているのでもう一度手順を確認してください。

reCAPTCHA

reCAPTCHAのバッジを非表示にする(必要な方のみ)

理央

僕はreCAPTCHAのバッジがデザインの邪魔をして気になったので非表示にしました。
「あっても問題ないよー」という方はこちらの設定は必要ないです。

Googleの公認サイトにバッジを非表示にする方法が載っていましたのでご紹介します。

非表示にするのは簡単でこのCSSを書き足すだけ。

.grecaptcha-badge { visibility: hidden; }

ただ一つ注意点があります。Googleが以下のように説明しています。

I’d like to hide the reCAPTCHA badge. What is allowed?

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:

https://developers.google.com/recaptcha/docs/faq

意訳すると「バッジを非表示にしてもいいけど、次の(このサイトはreCAPTCHAで守られてますよという)文章、ちゃんと入れてね」とのこと。

そのため、こちらをNinja Formsのお問い合わせフォームの中に貼り付けます。

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

お問い合わせフォーム内にGoogleのポリシーを表示させる

STEP
Ninja Formsの「ダッシュボード」をクリック
Ninja Formsのダッシュボードへ

WordPress管理ページのダッシュボードの左側にあるNinja Formsから「ダッシュボード」を選びます。

STEP
作成済みの「フォーム」をクリック
お問い合わせフォーム

作成したフォームをクリック。

STEP
お問い合わせフォームの「+」マークをクリック
+をクリック

このフォームの中にhtmlコードを追加するので+マークをクリック。

STEP
HTMLをクリックした後、「完了」をクリック
HTMLを選ぶ

レイアウトフィールドの中にあるHTMLを選ぶ。

完了

その後、忘れずページ上にある「完了」ボタンをクリック。

STEP
HTMLコードを貼り付け

上の「完了」を押すとフォームの一番下にHTMLを入れる箇所ができます。

HTMLをクリック

この枠の中どこでもいいので、クリック。

HTMLを認識

するとこのような画面が出てきます。ここで気をつけないといけないのが、このままHTMLコードを貼り付けるとテキストとして認識するので、必ず<>マークをクリックしてHTMLコードを認識させるようにします。

HTML

<>マークをクリックすると白かった背景がこのように黒い背景になるので、分かりやすいですね。これでHTMLコードを認識するので、次のコードを貼り付け。

<p class="recaptcha-policy">This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.</p>

CSSでフォントサイズを調整するためclass付きでpタグを追加しています

貼り付けが終われば、「完了」をクリック。

公開

これでHTMLの貼り付けが終わったので画面上の「公開」をクリックして終わり。

STEP
CSSでフォントサイズを調整
Googleポリシー

お問い合わせフォームがあるページに行ってこのテキストが追加されているはずです。

ただ使っているテーマにもよりますが、僕が使っているテーマ(SWELL)の場合フォントサイズが大きく目立ちすぎるので、CSSで少しフォントを小さくします。

.recaptcha-policy { font-size: 12px; }

このように設定しました。

Googleポリシー

これくらいのサイズだと見た目がうるさくないのでいいかなぁと思います。

理央

お疲れ様です!これで設定終了です。

追記 2022年12月2日

Ninja FormsでreCaptchaを使っているとこのようなエラーが出ました。

エラーメッセージ

Recaptcha validation failed. Please try again later

ん?何これ?と色々調べても明確な解決策が出てこず3時間くらいかかってようやく直せました。

SWELLを使ってるサイトのみこのメッセージが出て、同じSWELLを使っているサイトでもContact Form7を使っているサイトは問題なくreCaptchaが動いている。

つまり、Ninja FormsをSWELLで使うと不具合が出ることになります。

それで英語でも色々調べてみると、どうもキャッシュのプラグインが悪さをしていると書いてるサイトを発見。でも、私のサイトはキャッシュ系のプラグインは入れていないのでSWELLの設定を疑ったらBINGO!

解決策は

SWELL設定

SWELL設定→高速化→ファイルの読み込み→コンテンツに合わせて必要なCSSだけを読み込む

の項目にチェックを入れていたので、これを外したらちゃんと動きました。

SWELLは不要とみなしたものが必要だったということですね。めでたしめでたし。

まとめ

今回はNinja Formsで作ったフォームの中にreCAPTCHA v3を設置する作業をしました。

もうちょっと簡単にまとめたかったのですが、結構やることがいっぱいありましたね。Ninja Formsでスパムに困っている方は是非設置してみてください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次