Fluent FormsでreCAPTCHAを設定する方法

WordPressのお問い合わせフォームで使われる「Fluent Forms」。スパム対策として reCAPTCHA(リキャプチャ)を設定する方も多いと思いますが、

「設定したはずなのに、reCAPTCHAのマークが全然表示されない・・・」

というご相談をいただいたので、その原因と解決までの流れを備忘録としてまとめておきます。

こんな症状に困っていました

• Google reCAPTCHAの管理画面で対象ドメインのサイトキー・シークレットキーを発行し、Fluent Forms側にも設定した
• Fluent Formsの設定画面で「ReCAPTCHAは有効です」という緑色のメッセージも表示されている
• なのに、実際のお問い合わせページを見てもreCAPTCHAのマーク(右下に出るはずのアイコン)がどこにも見当たらない

１．以前使っていたContact Form 7を無効化

以前使用していた Contact Form 7 (CF7) にもreCAPTCHAが設定されていたので無効化。
CF7を無効化した際、CF7が読み込んでいたreCAPTCHA用のスクリプトも一緒に読み込まれなくなったことを確認。

２．フォームに「reCAPTCHAフィールド」を追加

管理画面の設定でAPIキーを登録するだけでは、フォームにreCAPTCHAは表示されません。

フォームの編集画面(フォームビルダー)を開いて、「入力フィールド」の「先端分野」を開き、「再キャプチャ」という専用のフィールドを、フォームの中にドラッグ&ドロップで追加。

イメージとしては、こんな感じ。

• APIキーの登録 = reCAPTCHA機能の「電源を入れる」作業
• フィールドの追加 = その機能を「このフォームで実際に使う」ための配置作業

３．「バッジを表示する」設定を「はい」にする

reCAPTCHAフィールドを追加したフォームの「入力のカスタマイズ」を開き、「Render ReCaptcha V3 badge(reCAPTCHA V3バッジを表示する)」という項目を「はい」にする。

reCAPTCHA v3は、そもそも「見えないreCAPTCHA(Invisible reCAPTCHA)」と呼ばれる仕組みで、ユーザーの目に見える操作(チェックボックスを押すなど)を必要としません。
そのため、この「バッジ表示」設定を「いいえ」にしていると、機能自体は裏側で動いていても、画面上には何も表示されない、という状態になります。

reCAPTCHA v3はもともとユーザーへの表示を必須としていません。
バッジを表示しない場合は、フォーム付近に「このサイトはreCAPTCHAによって保護されています」といった注記を入れることが、Googleの利用規約上推奨されています。

４．ブラウザキャッシュ・ページキャッシュをクリア

上記の設定をすべて直したにもかかわらず、それでもマークが表示されないという場合、キャッシュ系プラグインが原因のことがあります。

• LiteSpeed Cache
• WP-Optimize
• WP Rocket
• W3 Total Cache

などのキャッシュ系プラグインがインストールされている場合は、そちらのキャッシュもクリア。

今回のトラブルシューティングまとめ

同じような症状に困っている方は、次の順番で確認してみることをおすすめします。

1. 以前使っていた別のフォームプラグイン(CF7など)の設定が影響していないかを確認する
2. Fluent Formsのフォーム編集画面で「reCAPTCHA」フィールドが追加されているか確認する
3. reCAPTCHAフィールドの詳細設定で、「Render ReCaptcha V3 badge」の項目が「はい」になっているかを確認する
4. それでも直らない場合は、キャッシュ系プラグイン(LiteSpeed Cache、WP-Optimizeなど)のキャッシュをクリアして確認してみる