Support » Plugin: Contact Form 7 » Change reCAPTCHA badge position

  • Resolved jirsbek

    (@swah)


    According to Google Developers docs there is an option to change the badge position to bottomright, bottomleft or inline. Is it possible set this parameter when using Contact Form 7 reCAPTCHA integration?

    Thank you for the plugin.

    Best regards

Viewing 2 replies - 31 through 32 (of 32 total)
  • For anyone looking for a different solution for this, involves changing the recaptcha.php module for the plugin though but gives more flexibility I believe.

    There are two function in the module that need to be edited:

    function wpcf7_recaptcha_enqueue_scripts() {
      $service = WPCF7_RECAPTCHA::get_instance();
    
      if ( ! $service->is_active() ) {
        return;
      }
    
      $url = add_query_arg(
        array(
          // 'render' => $service->get_sitekey(),
          'render' => 'explicit' // Render the widget explicitly, needed if setting grecaptcha.render parameters
        ),
        'https://www.google.com/recaptcha/api.js'
      );
    
      wp_enqueue_script( 'google-recaptcha', $url, array(), '3.0', true );
    }

    and

    function wpcf7_recaptcha_onload_script() {
      $service = WPCF7_RECAPTCHA::get_instance();
    
      if ( ! $service->is_active() ) {
        return;
      }
    
      if ( ! wp_script_is( 'google-recaptcha', 'done' ) ) {
        return;
      }
    
    ?>
    <script type="text/javascript">
    ( function( grecaptcha, sitekey ) {
      var wpcf7recaptcha = {
        clientId: null,
    
        render: function() {
          this.clientId = grecaptcha.render(
            'google-recaptcha',
            {
              'badge' : 'bottomleft',
              'sitekey' : sitekey,
              'size' : 'invisible'
            }
          );
        },
    
        execute: function() {
          grecaptcha.execute(
            // sitekey,
            this.clientId, // use client ID returned by grecaptcha.render instead.
            { action: 'homepage' }
          ).then( function( token ) {
            var forms = document.getElementsByTagName( 'form' );
    
            for ( var i = 0; i < forms.length; i++ ) {
              var fields = forms[ i ].getElementsByTagName( 'input' );
    
              for ( var j = 0; j < fields.length; j++ ) {
                var field = fields[ j ];
    
                if ( 'g-recaptcha-response' === field.getAttribute( 'name' ) ) {
                  field.setAttribute( 'value', token );
                  break;
                }
              }
            }
          } );
        }
      };
    
      //grecaptcha.ready( wpcf7recaptcha.execute );
      grecaptcha.ready( function() {
        wpcf7recaptcha.render();
        wpcf7recaptcha.execute();
      } );
    
      document.addEventListener( 'wpcf7submit', wpcf7recaptcha.execute, false );
    
    } )( grecaptcha, '<?php echo esc_js( $service->get_sitekey() ); ?>' );
    </script>
    <?php
    }

    if you hide recaptcha does it work the same way?

Viewing 2 replies - 31 through 32 (of 32 total)
  • The topic ‘Change reCAPTCHA badge position’ is closed to new replies.