問題タブ [invisible-recaptcha]

私は最近、Google の新しい Recaptcha の方法、つまり新しい Invisible Recaptcha を使い始めました。recaptcha 属性を送信ボタンに直接アタッチすると、Google の recaptcha API が呼び出され、検証プロセスが開始されるため、このバージョンの実装は少し異なることに気付きました。すべて正常に動作していますが、大きな問題の 1 つは、「Protected by recaptcha」バッジの配置にあります。

recaptcha 構成を送信ボタンに追加すると、画面の右側にバッジが表示され始めます。他のサイトによると、このバッジはホバーされるまでは正方形のレキャプチャ ロゴであり、その後スライドして、私のサイトで最初に表示される大きな長方形になるはずです。

これは、目に見えない recaptcha を実装した後、自分のサイトに表示される画像です。

recaptcha 属性を含む送信ボタンのコードは次のとおりです。

注:やdata-badgeなどの他のオプションは、同じ配置の問題inlineをbottomleft引き起こします。

ボタンを含むフォームのコード:

この recaptcha バッジで 2 つの問題が発生しています。

1. バッジは、バウンディング ボックス/境界線タイプのものの外側に不具合があります
2. また、本来のように、ホバリングするまで部分的に画面外に配置されることもありません。マウスで何らかの方法で操作する前に、完全な長方形が表示されます。カーソルを合わせるまで正方形のロゴが表示されているはずですが、スライドして完全な長方形になります。

基本的に、これを適切に配置して、想定どおりに画面外からスライドインし、境界内に適切に収まるようにする方法を理解する必要があります。

Google Chrome 開発者ツールは、これらがウィンドウの読み込み時に生成されるバッジ div の現在の属性であることを教えてくれます。

あなたが提供できる助けに本当に感謝しています！バッジが必要であるという私の考えが間違っている場合は、修正してください。CSS で強制的に削除しますが、これによりキャプチャ検証プロセスが混乱し、Google のポリシーに違反する可能性があります。

この種の質問が以前に尋ねられたことは知っていますが、答えを得ることができませんでした。お問い合わせフォームがあり、新しい非表示の Google Recaptcha を実装したいと考えています。ただし、<input>a ではなくan を使用しました<button>が、これを行う方法がわかりません。私が持っているお問い合わせフォームのコードは次のとおりです。

次に、Google ReCaptcha ボタンがあります。

任意のヘルプをいただければ幸いです。また、右下の ReCaptcha ロゴを削除していただけないでしょうか。