「お客様から、スマホで問い合わせフォームを送信できないと言われた」
「入力内容に問題はないはずなのに、送信ボタンを押すとエラーになる」
このようなトラブルが起きている場合、問い合わせフォームに設置したreCAPTCHAが原因になっている可能性があります。
reCAPTCHAは、迷惑メールや自動送信を防ぐために役立つ仕組みです。しかし、設定や実装方法によっては、迷惑メールだけでなく本来問い合わせをしてくれるはずのスマホ利用者まで拒否してしまうことがあります。
特に、スマートフォンでは通信環境の変化、ブラウザの制限、JavaScriptの読み込み遅延などが発生しやすく、パソコンでは正常に送信できるフォームでも問題が起こることがあります。
この記事では、ホームページの問い合わせフォームがreCAPTCHAによって送信できなくなる原因と、スマホ利用者向けの改善方法を、ホームページ制作会社の視点から分かりやすく解説します。
reCAPTCHAとは？
reCAPTCHAとは、問い合わせフォームを操作しているのが人間か、自動送信プログラムであるかを判定するGoogleの仕組みです。
問い合わせフォームに設置することで、次のような迷惑行為を減らせます。
- 営業メールの自動送信
- 海外からの大量のスパム送信
- フォームを利用した不正アクセス
- 短時間に繰り返される大量送信
reCAPTCHAには、チェックボックスを押す「reCAPTCHA v2」や、利用者の操作状況から自動的に危険度を判断する「reCAPTCHA v3」などがあります。
reCAPTCHA v2とv3の違い
v2は「私はロボットではありません」というチェックボックスや画像認証を表示する方式です。v3は基本的に利用者の操作を必要とせず、アクセスごとにスコアを付けて自動送信の可能性を判定します。
Googleは、reCAPTCHA v3について、利用者に認証操作を求めずにリクエストのスコアを返す仕組みとして案内しています。
スマホでreCAPTCHAから送信できない主な原因
reCAPTCHAの認証情報が期限切れになっている
フォームを開いてから送信するまでに時間がかかると、reCAPTCHAが発行した認証情報の有効期限が切れることがあります。
Googleの公式ドキュメントでは、reCAPTCHAのレスポンストークンは1回限り有効で、発行から2分で期限切れになると説明されています。
例えば、スマホ利用者が次のような操作をした場合は注意が必要です。
- 入力途中で電話やLINEに切り替えた
- 会社名や住所を確認するため別のアプリを開いた
- 問い合わせ内容を時間をかけて入力した
- 送信前に入力内容を何度も確認した
スマホではアプリを切り替えながら入力することが多いため、パソコンよりも認証情報が期限切れになりやすい傾向があります。
送信ボタンを押した時点で新しい認証情報を取得する実装になっているかを確認することが重要です。
JavaScriptが正常に読み込まれていない
reCAPTCHAはJavaScriptを使用して動作します。そのため、スクリプトの読み込みに失敗すると、認証処理が完了せずフォームを送信できません。
主な原因には次のようなものがあります。
- 通信速度が遅く、読み込みが完了していない
- JavaScriptを遅延読み込みする設定と競合している
- キャッシュ系プラグインがスクリプトをまとめている
- 広告ブロックやコンテンツブロッカーに遮断されている
- Cookieやトラッキングを厳しく制限している
WordPressでは、表示速度を改善するプラグインによってJavaScriptの読み込み順序を変更した結果、reCAPTCHAだけが正常に動かなくなるケースがあります。
JavaScriptの遅延、圧縮、結合、不要スクリプト削除などを設定した後は、必ず実際のスマートフォンからフォーム送信をテストしてください。ページが表示されているだけでは、フォームが正常に動いているとは限りません。
reCAPTCHAのサイトキーとドメインが合っていない
reCAPTCHAのサイトキーは、登録したドメインと組み合わせて使用します。
Googleの公式ドキュメントでも、Webサイト用のキーは登録したドメインやサブドメインに関連付けられると説明されています。
次のような変更後に送信できなくなった場合は、ドメイン設定を確認しましょう。
- テスト環境から本番環境へ移行した
- wwwありからwwwなしへ変更した
- 独自ドメインを変更した
- ホームページをリニューアルした
- 問い合わせフォームだけ別のサブドメインに設置した
ホームページは表示できていても、reCAPTCHA側に現在のドメインが正しく登録されていなければ、認証エラーになる可能性があります。
reCAPTCHA v3の判定基準が厳しすぎる
reCAPTCHA v3では、利用者の操作に応じてスコアが付けられます。ホームページ側では、そのスコアが設定値を下回った場合に送信を拒否します。
この判定基準を厳しくしすぎると、通常の利用者まで自動送信と判断されることがあります。
特に、次のような利用者はスコアが低くなる可能性があります。
- プライベートブラウズを利用している
- Cookieを制限している
- VPNや共有回線を利用している
- 短時間でフォームへ直接アクセスした
- 広告ブロック機能を利用している
迷惑メールを完全に防ごうとして判定を厳しくしすぎると、問い合わせ件数まで減少する可能性があります。
スパム対策では、セキュリティを強くするだけでなく、正常な利用者が送信できているかを確認する必要があります。
エラーが表示されず、利用者が原因を判断できない
実際によくあるのが、送信ボタンを押しても反応がないケースです。
画面上に「reCAPTCHAの認証に失敗しました」と表示されれば、利用者は再読み込みなどを試せます。しかし、ボタンが動かないだけでは、通信中なのか、入力内容に問題があるのか、ホームページが故障しているのか判断できません。
その結果、利用者は問い合わせを諦めてしまいます。
フォームのエラーは、利用者が次に何をすればよいか分かる文章で表示することが大切です。
スマホ利用者向けに実施したい改善方法
送信時にreCAPTCHAを実行する
reCAPTCHA v3やInvisible reCAPTCHAを利用する場合は、ページを開いた時点ではなく、送信操作に近いタイミングで認証処理を実行します。
ページ表示時に取得した認証情報を長時間保持すると、利用者が入力している間に期限切れになる可能性があるためです。
問い合わせ内容の入力に数分かかることを前提に、送信ボタンを押した時点で新しいトークンを取得する構成が適しています。
送信中であることを画面に表示する
スマホでは、送信ボタンを押してから処理が完了するまで時間がかかることがあります。
送信中に何も変化がないと、利用者がボタンを何度も押したり、ページを閉じたりする原因になります。
送信ボタンを押した後は、次のような表示を行いましょう。
- 「送信しています」と表示する
- 送信ボタンを一時的に押せなくする
- 読み込み中のアニメーションを表示する
- 完了画面へ移動するまで操作を促さない
送信完了を明確に伝える
フォーム送信後は、同じ画面に小さく完了メッセージを表示するだけでなく、専用の送信完了ページへ移動させる方法がおすすめです。利用者が「送信できたか分からない」と不安になるのを防げます。
エラー時に再送信できるようにする
reCAPTCHAの認証に失敗した場合でも、入力内容を消さずに再送信できるようにします。
長い問い合わせ内容を入力した後に、エラーによってすべて消えてしまうと、再入力してもらえる可能性は大きく下がります。
エラーメッセージには、例えば次のような案内を表示します。
「認証処理に失敗しました。通信環境をご確認のうえ、ページを再読み込みせず、もう一度送信ボタンを押してください。」
再読み込みが必要な場合は、入力内容が消える可能性があることも伝えましょう。
reCAPTCHA以外のスパム対策を組み合わせる
スパム対策をreCAPTCHAだけに依存すると、判定を厳しくせざるを得なくなることがあります。
次のような対策を組み合わせることで、利用者への負担を減らしながら迷惑メールを抑えられます。
- 非表示項目を使ったハニーポット対策
- 短時間での連続送信を制限する
- 送信禁止ワードを設定する
- 海外IPからの大量送信を制限する
- フォームごとに送信回数を記録する
- 迷惑メール判定サービスを併用する
ハニーポットとは
通常の利用者には見えない入力欄をフォーム内に用意し、その項目に文字が入力された場合に自動送信プログラムと判断する方法です。利用者に画像認証などの操作を求めずに対策できます。
Google Cloudの案内でも、操作を必要とするCAPTCHAは利用者の負担を増やし、コンバージョン率を下げる可能性があることや、すべての利用者にとって利用しやすいとは限らないことが示されています。
別の問い合わせ方法も用意する
フォームに不具合が起きたときのために、電話、メール、LINEなどの連絡方法も掲載しておきましょう。
ただし、「フォームが使えなければ電話してください」と記載するだけでは不十分です。営業時間外に問い合わせたい人や、電話が苦手な人もいます。
次のように複数の選択肢を用意すると安心です。
- 電話番号をタップして発信できるようにする
- メールアドレスを掲載する
- 公式LINEへのリンクを設置する
- フォーム下部にエラー時の連絡先を記載する
問い合わせフォームに障害が発生しても、連絡手段が一つ残っていれば、見込み客を完全に取りこぼさずに済みます。
制作会社が確認するスマホ向けテスト項目
問い合わせフォームを公開するときは、管理画面上の設定確認だけでなく、実際の端末から送信テストを行います。
最低限、次の環境で確認することをおすすめします。
- iPhoneのSafari
- iPhoneのGoogle Chrome
- AndroidのGoogle Chrome
- Wi-Fi接続
- 4Gまたは5G接続
- プライベートブラウズ
また、正常に送信できるかだけでなく、次の状態も確認します。
- 入力に5分以上かけても送信できるか
- 入力途中で別のアプリを開いても送信できるか
- 入力エラー後に内容が残るか
- 送信ボタンを連続で押しても二重送信されないか
- 通信が遅い場合に送信中の表示が出るか
- 認証失敗時に分かりやすい案内が表示されるか
制作担当者のパソコンで一度送信できただけでは、十分な動作確認とはいえません。
よくある失敗
迷惑メールが減っただけで安心してしまう
reCAPTCHAを導入して営業メールが減ると、対策が成功したように見えます。
しかし、正常な問い合わせも同時に拒否している場合、管理者側では問題に気づきにくくなります。送信されなかった問い合わせは、受信履歴に残らないためです。
導入前後で問い合わせ件数が急に減った場合は、集客状況だけでなくフォームの動作も確認しましょう。
WordPressプラグインを更新していない
問い合わせフォームやreCAPTCHA連携プラグインが古いままだと、WordPress本体や他のプラグインとの組み合わせによって不具合が発生することがあります。
ただし、更新ボタンをすぐに押すのではなく、バックアップを取得したうえで更新し、更新後にフォームをテストすることが重要です。
エラー内容を記録していない
「送信できませんでした」と表示するだけでは、管理者も制作会社も原因を特定できません。
利用者には分かりやすい文章を表示しつつ、サーバー側では次の情報を記録すると原因調査に役立ちます。
- エラーが発生した日時
- reCAPTCHAのエラーコード
- 使用されたフォーム
- ブラウザや端末の種類
- プラグインやサーバー側の処理結果
個人情報や問い合わせ本文を必要以上にログへ保存しないなど、情報管理への配慮も必要です。
まとめ｜reCAPTCHAは導入後の送信テストが重要
reCAPTCHAは問い合わせフォームのスパム対策に有効ですが、設定を厳しくしすぎたり、スマートフォンでの動作確認が不足したりすると、正常な問い合わせまで送信できなくなることがあります。
特に確認したいポイントは次のとおりです。
- 送信時に新しい認証情報を取得しているか
- JavaScriptの高速化設定と競合していないか
- サイトキーとドメインが一致しているか
- reCAPTCHA v3の判定基準が厳しすぎないか
- エラー後も入力内容を残して再送信できるか
- iPhoneとAndroidの実機で確認しているか
問い合わせフォームは、設置されていることではなく、利用者が問題なく送信できることが重要です。
aswebでは、ホームページの制作だけでなく、問い合わせフォームの不具合調査、迷惑メール対策、WordPressの更新、公開後の運用サポートにも対応しています。
初期費用0円、月額9,900円からの月額制ホームページ制作で、パソコン操作が苦手な方も原稿作成や更新作業を丸投げでご相談いただけます。埼玉県春日部市を中心に、オンラインで全国対応が可能です。
「スマホから問い合わせを送信できないと言われた」「迷惑メールを減らしたいが、お客様の操作は増やしたくない」という場合は、現在のフォームの状態を含めてお気軽にご相談ください。
