お問い合わせフォームから迷惑（スパム）メールどんどん入ってきて困ってないですか？
理央こんにちは！理央（@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側だけでは設定が出来ません。
理央この手間がめんどくさいなぁ
というお気持ちめちゃくちゃ分かります！でも、すぐ終わりますのでサクッと終わらせましょう。
新しいサイトを登録する
ラベルは重要ではないので、分かれば何でもいいです。日本語でもOK。
例えば
- サイト名
- reCAPTCHA設定
- ドメイン などなど
今回はreCAPTCHA v3の設定なのでv3を選ぶ。
http://やhttps://やhttp://www.やhttps://www.などを除いた部分。
私であればrionote.comです。サイトに合わせて打ち込みます。
複数のサイトを追加できるので、何個でもOK。
既に表示されているメールアドレスで問題なければそのままで。
それ以外のメールアドレスを指定したければ、追加してください。
チェックボックスにチェックを入れる。
何か問題があった時に連絡が来るので、チェックを入れる。
設定エラーや不審なトラフィックの増加など、サイトで問題が検出された場合にアラートを受け取ります。
問題がなければ「送信」ボタンを押します。
「サイトキー」と「シークレットキー」が発行される
サイトキーとシークレットキーが発行されます。
この２つのキーはNinja Formsの中で必要となるので、このページ（タブ）は閉じずにそのままにしておきます。
基本的にGoogle側の設定はこちらで完了です。
必要な方のみ！
Google reCAPTCHA設定画面（ドメインの追加・AMP設定）
上の「設定に移動」のリンクをクリックすると設定ページに飛びます。
こちらの設定画面からもドメインの追加ができます。先ほどの「新しいサイトを登録する」の設定画面で設定し忘れた場合こちらから追加可能。
もしサイトがAMPを導入していて、AMPページでもreCAPTCHAが動作するようにするにはこちらにもチェックが必要。
問題がなければ「保存」をクリック。
Ninja Formsでの設定方法 – Google reCAPTCHAに連携させる
ここまで来るとGoogle側でする設定は終わっているので、次はNinja Forms側の設定です。
理央後もう少しです！
それではWordPressの管理ページに入りましょう。
WordPress管理ページのダッシュボードに左側にある「Ninja Forms」から「設定」を選びます。
終わったら「設定を保存」をクリックします。
この後、登録したreCAPTCHAを動かす設定をします。
僕がつまずいたのがここ。これも設定しないとreCAPTCHAが動かないので気をつけましょう。
WordPress管理ページのダッシュボードの左側にあるNinja Formsから「ダッシュボード」を選びます。
reCAPTCHAを設定したいフォームを選びます。
お問い合わせフォームの中に入って「メールとアクション」をクリック。
右下にある青い＋（プラス）のマークをクリック。
その中にreCAPTCHA v3があるのでこれを追加。
右上の「完了」のボタンをクリック。
そうするとお問い合わせフォームにreCAPTCHA v3という項目が増えています。これが追加されるいるか確認。確認ができたら忘れずに「完了」を押します。これをしないと設定が完了しません。
理央お疲れ様でした。これでreCAPTCHA v3の設定が完了です。
「お問い合わせページ」に行くと画面の右下にこのような（↓）バッジが出ているはず。出ていれば無事に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のポリシーを表示させる
WordPress管理ページのダッシュボードの左側にあるNinja Formsから「ダッシュボード」を選びます。
作成したフォームをクリック。
このフォームの中に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>貼り付けが終われば、「完了」をクリック。
これでHTMLの貼り付けが終わったので画面上の「公開」をクリックして終わり。
お問い合わせフォームがあるページに行ってこのテキストが追加されているはずです。
ただ使っているテーマにもよりますが、僕が使っているテーマ（SWELL）の場合フォントサイズが大きく目立ちすぎるので、CSSで少しフォントを小さくします。
.recaptcha-policy { font-size: 12px; }このように設定しました。
これくらいのサイズだと見た目がうるさくないのでいいかなぁと思います。
理央お疲れ様です！これで設定終了です。
Ninja FormsでreCaptchaを使っているとこのようなエラーが出ました。
Recaptcha validation failed. Please try again later
ん？何これ？と色々調べても明確な解決策が出てこず3時間くらいかかってようやく直せました。
SWELLを使ってるサイトのみこのメッセージが出て、同じSWELLを使っているサイトでもContact Form7を使っているサイトは問題なくreCaptchaが動いている。
つまり、Ninja FormsをSWELLで使うと不具合が出ることになります。
それで英語でも色々調べてみると、どうもキャッシュのプラグインが悪さをしていると書いてるサイトを発見。でも、私のサイトはキャッシュ系のプラグインは入れていないのでSWELLの設定を疑ったらBINGO！
解決策は
SWELL設定→高速化→ファイルの読み込み→コンテンツに合わせて必要なCSSだけを読み込む
の項目にチェックを入れていたので、これを外したらちゃんと動きました。
SWELLは不要とみなしたものが必要だったということですね。めでたしめでたし。
まとめ
今回はNinja Formsで作ったフォームの中にreCAPTCHA v3を設置する作業をしました。
もうちょっと簡単にまとめたかったのですが、結構やることがいっぱいありましたね。Ninja Formsでスパムに困っている方は是非設置してみてください。
