Contact Form 7 と WP Rocket の互換性について

Contact Form 7 は多くの WordPress サイトで使用されている定番のフォームプラグインですが、WP Rocket との組み合わせで互換性の問題が発生することがあります。この記事では、私が直面したオレンジ色のエラー問題と、その解決方法について共有します。

問題の概要

Contact Form 7 を利用中に、フォーム送信時にオレンジ色のエラーが表示されるようになりました。このエラーは通常、スパムとしてフォーム送信が判定されている場合に発生します。

調査ポイント

まず、WP Rocket の「遅延読み込み」設定を確認しました。以下のスクリプトについては、既に主要な設定がされていました。

/jquery-?0-9.(.min|.slim|.slim.min)?.js
Hammer.min.js
/wp-content/plugins/contact-form-7/
にもかかわらず、フォーム送信は失敗し続けました。

原因の特定

さらに調査を進めた結果、原因は reCAPTCHA のスクリプト読み込みが遅延されていることにあると判明しました。WP Rocket のキャッシュ設定で遅延読み込みの対象となっていた以下のスクリプトが影響していました。

https://www.google.com/recaptcha/api.js
https://www.gstatic.com/recaptcha/releases/
reCAPTCHA のスクリプトが遅延されると、Contact Form 7 のスパム判定機能が正しく動作せず、オレンジのエラーが表示されていたのです。

解決方法

この問題を解決するために、以下の手順を実施しました。

WP Rocket の「遅延読み込み」設定を調整
WP Rocket の管理画面で以下のスクリプトを「遅延読み込み」の除外リストに追加しました。

https://www.google.com/recaptcha/api.js
https://www.gstatic.com/recaptcha/releases/

キャッシュのクリア
設定を変更した後、WP Rocket のキャッシュをすべてクリアしました。また、ブラウザのキャッシュもクリアして動作確認を行いました。

結果

設定変更後、フォーム送信が正常に動作するようになりました。Contact Form 7 のエラーも解消され、スパム判定に関連する問題は発生しなくなりました。

まとめ

WP Rocket の「遅延読み込み」機能はサイトパフォーマンス向上に有効ですが、特定のスクリプト（特に reCAPTCHA）の動作に悪影響を及ぼす場合があります。Contact Form 7 を使用していて類似の問題が発生した場合は、WP Rocket の設定を確認し、reCAPTCHA 関連スクリプトを除外リストに追加することで解決できるかもしれません。

もしこの記事が役立ったら、「いいね」やコメントでフィードバックをお願いします！