Support » Plugin: G-Forms hCaptcha » Event or Trigger to know when hCaptcha has loaded?

  • Resolved bw10

    (@bw10)


    Hi there, I was wondering if there is a similar function, hook or method to detect when hCaptcha has been rendered on the form like there is for reCaptcha within Gravity forms. (gform_post_recaptcha_render).

    I have a custom script I ran for reCaptcha that slightly modified the output to make it WCAG 2.1 compatible and I’d like to do the same here.

    Any help would be appreciated!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Kevin

    (@webandappeasy)

    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.

    Thread Starter bw10

    (@bw10)

    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>
    Plugin Author Kevin

    (@webandappeasy)

    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.

    Thread Starter bw10

    (@bw10)

    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>
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.