Home Forums Porto Template reCAPTCHA v3 Issue

This topic contains 3 replies, has 2 voices, and was last updated by  Support2 1 month, 3 weeks ago. This post has been viewed 200 times

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10029010

    JohnAlan
    Participant

    Thanks for adding reCAPTCHA v2 & v3 support into Porto – excellent!

    However, to work correctly reCAPTCHA v3 has to be on every page of a website, not just the page(s) with the contact form on them. This let’s reCAPTCHA score the visitor by their actions even before they get to the contact form page.

    This is not essential, it can be on the form page(s) only, but it works better and is designed to be included on every page of a site.

    Perhaps your instructions should include this information, with instructions on how to implement it site-wide?



    Template Version: 7.3.0
    #10029013

    Support2
    Keymaster

    Hello,

    To include the Google Recaptcha v3 in all pages, just add the scripts of recaptcha like the code below (in all pages):

    <!-- Theme Initialization Files -->
    <script src="js/theme.init.js"></script>
    
    <script id="google-recaptcha-v3" src="https://www.google.com/recaptcha/api.js?render=YOUR_RECAPTCHA_SITE_KEY"></script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

    As you mentioned, include in all pages is not essential but will improve the score of google recaptcha to detect bots.
    We will update our documentation with this information and instructions about how to add in all pages.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10029238

    JohnAlan
    Participant

    Thanks, that’s great!

    What I also did is hide the reCAPTCHA badge on all pages except the contact page.

    On the contact page give the body tag a unique ID: –

    <body id=”contactpage”>

    and then in custom.css: –

    /* hide Google reCAPTCHA badge on all except contact page */
    body:not(#contactpage) .grecaptcha-badge {
    visibility: hidden !important;
    }

    /* and also disable scroll to top on contact as it clashes */
    body#contactpage .scroll-to-top {
    visibility: hidden !important;
    }

    Hope this helps anyone else wanting to do the same!


    #10029239

    Support2
    Keymaster

    Hello JohnAlan,

    Thanks for share your code with us!

    If you need further assistance, feel free to contact us.

    Kind Regards,

    Rodrigo.


Viewing 4 posts - 1 through 4 (of 4 total)