Hello Cloudflare Community,
I need a solution for Turnstile rendering. I used client site rendering and it is rendering only once at a time on the front end. I use explicit turnstile callback and on the action hook, I inject the Turnstile for rendering, but on the callback, it gives me only once on window.turnstleCb
The code has given below:
public function __construct() {
$this->turnstile_context_id = wp_rand();
add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
add_action( 'wpuf_after_form_render', [ $this, 'render' ] );
}
public function enqueue_scripts() {
wp_register_script(
'ect-wpuf-turnstile-challenges',
'//challenges.cloudflare.com/turnstile/v0/api.js?onload=ectWPUFTurnstileCb',
[],
wp_turnstile()->api_version,
true
);
$site_key = wp_turnstile()->settings->get( 'site_key' );
$script = "window.ectWPUFTurnstileCb = function () {
if ( document.getElementById( 'ect-turnstile-container-{$this->turnstile_context_id}' ) ) {
turnstile.render('#ect-turnstile-container-{$this->turnstile_context_id}', {
sitekey: '" . esc_attr( $site_key ) . "',
callback: function(token) {
var form = document.querySelector('.wpuf-login-form input[type=submit]');
var postForm = document.querySelector('.wpuf-form-add .wpuf-submit-button');
if(form){
form.style.pointerEvents = 'auto';
form.style.opacity = '1';
}
if(postForm){
postForm.style.pointerEvents = 'auto';
postForm.style.opacity = '1';
}
}
});
}
};";
wp_add_inline_script( 'ect-wpuf-turnstile-challenges', $script, 'before' );
wp_enqueue_script( 'ect-wpuf-turnstile-challenges' );
}
public function render() {
$html = sprintf(
'<div id="ect-turnstile-container-%s" data-sitekey="%s" data-theme="%s" data-submit-button="%s"></div>',
$this->turnstile_context_id,
esc_attr( wp_turnstile()->settings->get( 'site_key' ) ),
esc_attr( wp_turnstile()->settings->get( 'theme', 'light' ) ),
esc_attr( wp_validate_boolean( wp_turnstile()->settings->get( 'button_access', 'false' ) ) ),
);
if ( wp_validate_boolean( wp_turnstile()->settings->get( 'button_access', 'false' ) ) ) {
$html .= '<style>
.wpuf-login-form input[type=submit] {
pointer-events: none;
opacity: .5;
}
.wpuf-form-add .wpuf-submit-button{
pointer-events: none;
opacity: .5;
}
</style>';
}
echo ( $html);
}
I gave data-id, data-sitekey, data-theme, and data-submit-button.
Turnstile is working fine on 2 separate pages, but when I give it to 1 page with 2 separate forms, it only renders on 1 form, and on the other form the Turnstile widget isn’t calling.
Please share me the explanation of why it is not rendering.