細かく調べてきれていないので直接的な回避策は不明ですが、別方向からの対応が可能だったのでメモとして。
前提
- WordPressでContact Form 7使用
- Contact Form 7でフォームを作り、送信ボタンを押すと送信完了画面に遷移させる
- プラグインのInvisible reCAPTCHAをインストールしてContact Form 7に適用させる
上記で以下の問題が発生しました。
- ボタンを押しても送信完了画面に移動しない
- 送信自体はできている
なお、送信完了画面への遷移は以下のページの仕組みを利用しています。
仮説
- Invisible reCAPTCHAを入れると、Contact Form 7で用意されているwpcf7mailsentのイベントが起きない
おそらくですが上記のようになってしまうのかなと思います。
対応策
- Invisible reCAPTCHAをあきらめて、Contact Form 7で用意されているreCAPTCHAの設定を使う
Invisible reCAPTCHAの導入は全ページに表示されるロゴを消したいがためでしたが、後述する理由によりInvisible reCAPTCHAをやめてContact Form 7で用意されているreCAPTCHAの設定を使う方法で十分対応可能です。
reCAPTCHAのバナーは消去可能
上記に書かれているように、フローの中に以下の文言を組み込めばバナーは消してもよいという規約に変更されています。
This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply.
フローというのはボタン(フォーム送信やコメント投稿などの最終的なアクションに用いるボタン)付近での設置でよい模様ですが、この点具体例がマニュアルにはないのでやや不明確です。
意図としてはボタンを押してreCAPTCHAが動作するまでの間の目に付く箇所ということで良いとは思いますが。
reCAPTCHAのバナーの消し方
/*Note: if you choose to hide the badge, please use*/
.grecaptcha-badge { visibility: hidden; }
CSS用の記述として少し手を加えていますが、前項のマニュアルでは上記のようにして消すように書かれています。
今回の調査時にopacity:0;を設定すると書いているページが検索でいくつかでてきましたが、個人的にはお勧めできません。
opacityは見えなくなるだけでバナーは存在しており、その下にある要素を選択できなくなってしまう、あるいは意図せず透過したバナーを間違って押してしまう問題が起こりうるためです。
仮にopacityで対応するならpositionかz-indexを操作する必要がありますが、これをするならそもそもopacityは必要ありませんし。
結び
2018.12.18のV3へのアップデート時に変更されたようで、一気に使いやすくなりました。
Contact Form 7 の場合、インライン設置が使えるInvisible reCAPTCHAの方がサイトに組み込み易い部分はあるのですが、通常のreCAPTCHAを使った現在の形も十分に使いやすい状態ではと思います。
6人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
