Event or Trigger to know when hCaptcha has loaded?

Hi,

I think you can just use the gform_post_render hook.
I use that hook in the inline JavaScript to render the hCaptcha field.
It should be loaded in the bottom of your body.

Otherwise you could use the ensure_hcaptcha_js function from the hCaptcha_Field class. This function prints the inline script.

Please let me know if this helps you or not.

Can you provide an example of how to use ensure_hcaptcha_js?

I tried this, and it didn’t work.

<script type="text/javascript">
jQuery(document).on('ensure_hcaptcha_js', function(){

console.log('run');
 
});
</script>

If you want to use it in JS that won’t work indeed as it is a public function within a class in PHP.

The ensure_hcaptcha_js prints out the HTML for the inline script:

public function ensure_hcaptcha_js(){
		?>
		<script type="text/javascript">
			( function( $ ) {
				$( document ).bind( 'gform_post_render', function() {
					$( '.h-captcha' ).each( function( index, elem ) {
						if( ! $( elem ).html().length ) {
							hcaptcha.render( elem );
						}
					} );
				} );
			} )( jQuery );
		</script>

		<?php
	}

So you could use the gform_post_render in JS.

Thanks!

I ended up adding this to the form itself as a hidden field:

<script>
jQuery(document).on('gform_post_render', function(event, form_id, current_page){
if(form_id == #) {
jQuery('.ginput_container_hcaptcha iframe').on('load', function(){
var gcaptcharesponse = jQuery(".ginput_container_hcaptcha textarea[id^='g-recaptcha-response']"); 
var hcaptcharesponse = jQuery(".ginput_container_hcaptcha textarea[id^='h-captcha-response']"); 
jQuery(gcaptcharesponse).attr({ 'aria-hidden': true, 'aria-label': "do not use", 'aria-readonly': true }); 
jQuery(hcaptcharesponse).attr({ 'aria-hidden': true, 'aria-label': "do not use", 'aria-readonly': true });
});
}
});
</script>