こんにちは、大宮でWEB開発をしている、TEDASKのToshi Seitoです。

WordPressのお問い合わせフォームでよく利用されるContact form 7ですが、スパム対策でCloudflareのTurnstileを導入することができます。

このホームページのお問い合わせにも設置しているこのCloudflareの機能の一つです。

実は、このTurnstileはContact form 7のインテグレーションの設定から簡単に導入ができるのですが、導入後に表示されないという状況になりました。

その時に裏側ではHTMLのコードが表示されているのは確認できたのですが、表示がされない。

つまり、サイトキーなどは問題ないが、表示だけが上手く行かない状況です。

今回の記事では、そういう状況になった場合に表示できるようにするために確認するべきことを共有したいと思います。

検証でコードが表示されているか

Cloudflare Turnstileの導入方法は割愛しますので、Contact form 7のインテグレーションで間違いなく、サイトキーとシークレットキー、および導入ホスト（ドメイン）があっていることを前提に進めます。

また、Contact form 7のタグは[turnstile]と入れていなくても、自動でフォームの先頭に入るようになっています。

移動したい場合は、[turnstile]を好きな位置にタグを挿入します。

この画像だと見にくいかもしれませんが、これは、ブラウザの「検証」ツールでturnstileと検索した場合に、コードは問題なく表示されているが、お問い合わせフォームには何も表示されていない状態です。

もしこの検証で、turnstileが検索にかからない場合は、導入自体上手くいっていないので、Cloudflare Turnstileの設定を見直してください。

このような状況になった場合に見直すのは、JavaScript関係が疑われます。

キャッシュ機能やプラグインによるJavaScript圧縮

もし使っているテーマにJavaScriptの圧縮機能があったり、キャッシュ系のプラグインを利用している場合は、JavaScript圧縮を一度止めてみましょう。

一般設定の「縮小する」→「Advanced Settings」

JSの項目の「有効化」のチェックを外す。

この設定を保存したあとは、キャッシュを全て一旦パージして、お問い合わせページにTurnstileが表示されるかを確認してみましょう。

実は、Cloudflareを経由している（利用している）場合には、このRocket Loaderが原因の場合があります。

Rocket Loaderは読み込みに時間がかかるJavaScriptを操作する機能のため、WordPressのContact form 7の場合において、表示が阻害されてしまうことがあります。

Rocket Loaderは初期設定ではOFFなので、意図的にスピードアップ対策としてONにしている場合は、OFFにする必要があります。

Cloudflareの対象のドメインを選択したら、「Speed」→「設定」→「コンテンツの最適化」を開きます。

Rocket Loaderを見つけたら、設定をオフにします。

このあとお問い合わせフォームにTurnstileが表示されるかを確認してみましょう。

今回の場合、結果的にはCloudflareのRocket Loderが原因でした。

もしこの2つのやり方でも表示されない場合は、他のJavaScriptでエラーが出ていて影響を受けていることもありますし、Cookie同意関連の機能が邪魔しているなども考えられます。

その場合は、プラグインを一つずつ止めて切り分けが必要になりますが、プロにお願いしたほうが確実に早く解決できる場合が多いので、私も含めてお近くのエンジニアの方に相談するのがおすすめです。

以上、Contact form 7でTurnstileが表示されないときはJavaScriptの圧縮かRocket Loaderが原因の可能性を疑うでした！