Contact From 7にTurnstileを追加したら面倒だった話

仕事の話です。
とあるサイトのお問い合わせフォームにTurnstileを追加しようとしたら面倒なことになったって話です。

↑のやつ
よくあるやつなんですが・・・
お問い合わせフォームがContact From 7で作られているのでインテグレーションの箇所に、キーを設定するだけでOKなはずなんですよ・・・
設置のしかたは調べるとでてきますわ。
自分もそうやって設置したんです。

Turnstileが表示されない

Cloudflare経由でキーを取得してWordpressのお問い合わせにあるインテグレーションにキーを設置して、さらに、[turnstile]っての追加すればOK
ってだいたいのサイトは書いてるのですが、その通りにやったにも関わらず表示されない・・・

はて？なぜ？

デベロッパーツールとうで確認するとそれっぽ⇒[turnstile]のコードはいるがしかし表示されない・・・

どうもAPIと通信してなさそう・・・なぜ・・・

とりあえずfunctions.phpに下記を追加

add_action('wp_footer', function() {
  echo '<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>';
});

add_action('wp_footer', function() {

echo '<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>';

});

これでなんとか表示された。

ちなみになぜかダークな色のが表示されたが、

[turnstile theme:light]

にしたらライトな色で表示された。

あとはCSSで中央表示にした。

.wpcf7-turnstile.cf-turnstile {
  display: flex !important;
  justify-content: center;
}

.wpcf7-turnstile.cf-turnstile {

display: flex !important;

justify-content: center;

}

「Simple CAPTCHA Alternative with Cloudflare Turnstile」っていうプラグインで表示する方法もあるので、functions.phpとか触りたくない人はこっちでやればいいと思う。

これも使い方をググればでてくる。

あー疲れた・・・