株式会社まほろばの鈴木（@mahoroba148）です。
WordPressの問い合わせフォームの定番プラグイン「Contact Form 7」
定番プラグインだけあって、アタッカーにも狙われやすくセキュリティ対策が欠かせません。
Contact Form 7 でもreCAPTCHA v3が推奨されています。
問い合わせフォームからの営業が増え、お客様用のお問い合わせと営業専用フォームに分けた頃、当社の問い合わせフォームから全く送信できない事態が発生しました。
当記事では
- Contact Form 7＋reCAPTCHA v3で送信できない問題への対処方法
- 解決に至るまでの原因の切り分け方について
ご紹介していきます。
参考記事：Contact form7とreCAPTCHA v3のスパム判定問題
https://nldot.info/contact-form7-recaptcha-v3-spam/
目次
対処方法
手っ取り早く知りたい方のためにまずは対処方法から。
当社と同じ条件でしたら、直る可能性が高いです。
- 全てスパム判定
- 既存テーマを子テーマにカスタマイズ
- reCAPTCHAマークを特定のページで表示させようとした
対処①Javascriptの非同期を解除する
テーマによってはJavascriptを非同期に設定することができます。
非同期にすると読み込み速度があがるものの、reCAPTCHAに必要なJavascriptも読み込みができず、エラーとなってしまうことがあります。
ちなみに、当社が基盤として使用しているyStandardでは外観＞カスタマイズ＞[ys]高速化から操作できます。
対処②function.phpに書かれたマーク表記の規制を削除する
当社の場合はこの対処②で直りました。
reCAPTCHAを導入すると常にreCAPTCHAマークが表示されてしまいます。
このマークを全ページ非表示にすることもできるのですが、フォームなど個人情報を入力する画面では見えた方が安心感につながるため、問い合わせフォームのみで表示するように設定しておりました。
function load_recaptcha_js() {
if ( ! is_page( 'contact' ) ) {
wp_deregister_script( 'google-recaptcha' );
}
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );もし上記のような記載がある場合は削除すると解決するかもしれません。
ただし、マークは全てのページで表示されてしまうため、気になる場合はマークの非表示設定を行いましょう。
その他の対処方法
- プラグインを再インストール
- 別のreCHAPCHAプラグインで代用する
- テーマを変える（オリジナルなら見直す）
- エラー解除のjavascriptを書き込む など
様々な方法がありました。
よく他の記事で書かれているのは別のプラグインで代用する方法。
しかし、Contact Form 7への適用は有料オプションであることが多いため、対策できていない可能性が高いです。
複数のフォームを管理している場合、再インストールも手間がかかります。
また、再インストール以外の方法で対処しようにも原因がわからなければどれを行えばいいかわかりません。
そのため原因の切り分けが必要です。
原因の切り分け
私が行った原因の切り分け方法を順を追ってみていきましょう。
まず、送信できなかった場合に表示される枠の色を見ます。
私の場合は全てオレンジ枠、つまりはスパムに判定されていることがわかりました。
念のため、スパムに該当する文章を変えてみると、その通りに文章が変わりました。
やはりスパム判定されているようです。
次に
- ブラウザのキャッシュの削除
- 端末を変えて送信
- 友人にもお願いして送信
上記3つを行ってみましたが、結果は変わらずスパム判定でした。
競合しているプラグインがないか探す
最初はGDPRのプラグインと相性が悪いと思っていました。
実際に、プラグインを停止したところ一時的に送信ができてしまったため、勘違いをしてしまいました。
当時の投稿はこちら↓
こうして別のreCHAPCHAプラグインを導入したのですが、スパムメールが届き始めます。
詳細を確認するとフリー版はContact Form 7に対応していないことが発覚しました。
Flamingoを導入
Contact Form 7のヘルプにも書かれていた受信メール保存プラグインです。
Flamingoを導入するとスパム判定されたメールがなぜスパム判定されたのかわかります。
スパム判定は0.1～1.0で振り分けられます。
数字が小さいほどスパム、数字が大きいほど人間です。
スパム判定された問い合わせを見てみると数字が「0.0」になっていました。
この「0.0」という状態は正しくreCHAPCHAが動いていない証拠です。
ほとんどの場合はJavascriptエラーの可能性が高いとのこと。
Javascriptのエラーが出てない
ああ、これで解決か
とコンソールを開いてみるとそんなエラーがひとつもありません。
つまりはJavascriptはちゃんと読み込まれているようです。
テーマの方にJavascriptの非同期設定があるので確認してみましたが、設定していませんでした。
Contact Form 7公式の見解
どうにも原因がわからないのでFlamingoに書かれていた「recaptcha の応答トークンが空です。」というキーワードで検索をかけてみました。
すると公式がこんな発表をしています。
空の reCAPTCHA トークンはいくつか異なった理由により発生します。よくある理由の一つは reCAPTCHA のスクリプトファイルがロードされていないか、あるいは誤動作しているというものです。これはほとんどの場合作りがいいかげんなテーマが原因です。
引用元：reCAPTCHA v3 に関する FAQ
https://contactform7.com/ja/faq-about-recaptcha-v3/
思わず、「作りがいいかげんだと…!?」と声が漏れたことはさておき、とにかくテーマに原因がある可能性が高いのでテーマを疑います。
同じテーマを使っているのに別サイトでは送信できる
yStandardというテーマを使用しています。
カスタマイズありきのテーマのため、非常に扱いやすく、当社で制作する際はこのテーマを基盤することが多いです。
当社の関連サービスも例外ではなく、他サイトでも同様につかっており送信が確認できています。
プラグインも全く同じまでとはいかないものの、ほぼ同様のプラグインを使っており、且つ、原因の切り分け時点でプラグインは違うとみているので子テーマを使用したカスタマイズが原因と断定。
関係がありそうな
- footer.php
- function.php
あたりを見ているとこんな記述が…
//function.php
function load_recaptcha_js() {
if ( ! is_page( 'contact' ) ) {
wp_deregister_script( 'google-recaptcha' );
}
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );上記はreCHAPCHAのマークを「contact」というページだけに表示させるコードです。
reCHAPCHAを導入すると通常、全ページにマークが表示されてしまうのですが、上記のコードを追加すると特定のページだけに表示することができます。
※正確には特定のページだけreCHAPCHAを読み込む処理
もう怪しいのはここしかない…！
そもそも全部のページでreCHAPCHAのマーク非表示に設定してるし、こんな記述はいらない。
パッと消して試してみました。
すると
送信できた！
その後、別環境でも送信したところ問い合わせフォーム・営業専用フォーム両方とも送信することができた。
結論
テーマを疑え
Contact Form 7公式の見解通りの結果となりました…。
不具合が起きるとついプラグインや他人のせいにしたくなってしまいますが、だいたいは自分が原因です。
『イレギュラーは起こるものではなく自分が起こすもの』
そう肝に銘じて自分がカスタマイズした箇所を確認しましょう。
中にはテーマに起因する場合もあるかもしれませんが、その場合、まずは手を加えていないまっさらな状態のテーマを試してみましょう。
それでも不具合が起きるようでしたらテーマの制作者さんにご相談ください。
ホームページのお悩み相談
業者にこんな提案されたんだけどどうかな？
WordPressを今まで一度もアップデートしたことがない
ホームページ制作前のお悩み、制作後の更新方法などを相談だけでもOK！
セカンドオピニオンのようにもご利用いただけます。
＼相談だけしたいなら／
＼実際に作業を依頼するなら／