Invisible reCAPTCHA

Hello guys,
How can I integrate the invisible reCAPTCHA
in the canvas contact form?

thank you

Hello guys,
it works!

thank you

What is the callback function name that needs to be added in order to make this work?

<button
class="g-recaptcha"
data-sitekey="my-sitekey-here"
data-callback="my-function-here">
Submit
</button>

What goes in "my-function-here"? Thanks.

This simply gives me a popup message that says "callback working" and the rest of the form doesn't seem to function.

I have a test page up here: https://www.livemusicpros.com/test2.html

Can you let me know what I am doing wrong? Thanks!

I have 2 contact forms on the same page. Could that be causing an issue? I distinguished between recaptcha_callback1 and recaptcha_callback2, but when I click the button, it doesn't function properly as a contact form any more. This is the code I'm using for the buttons:

<script type="text/javascript">function recaptcha_callback1(){$('.button').prop("disabled", false);}</script>
<button class="button button-border nomargin button-rounded button-large noleftmargin topmargin-sm g-recaptcha" data-sitekey="6Lf69iwUAAAAALcEtZfJt0iL2ye5G7TyboY5bs-S" data-callback="recaptcha_callback1" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">Email Us Now</button>

<script type="text/javascript">function recaptcha_callback2(){$('.button').prop("disabled", false);}</script>
<button type="submit" id="quick-contact-form-submit" name="quick-contact-form-submit" class="btn btn-danger nomargin g-recaptcha" data-sitekey="6Lf69iwUAAAAALcEtZfJt0iL2ye5G7TyboY5bs-S" data-callback="recaptcha_callback2" value="submit">Send Message</button>

Otherwise all I have done is modify quickcontact.php and sendemail.php with my sitekey. I've confirmed that the code is not commented out, and also that my server is functioning correctly when it comes to PHP. Getting tons of spam so really would love to solve this issue ASAP. Thank you so much!

Still trying to get this to work. I changed the code to this to separate the buttons from the recaptcha (see below), but now the form hangs on the spinning loading wheel once the button is clicked and nothing is sent.

<script type="text/javascript">function recaptcha_callback1(){alert("callback1 working");$('.button').prop("disabled", false);}</script>
<div class="g-recaptcha" data-sitekey="6Lf69iwUAAAAALcEtZfJt0iL2ye5G7TyboY5bs-S" data-callback="recaptcha_callback1">
<button class="button button-border nomargin button-rounded button-large noleftmargin topmargin-sm" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">Email Us Now</button>

<script type="text/javascript">function recaptcha_callback2(){alert("callback2 working");$('.button').prop("disabled", false);}</script>
<div class="g-recaptcha" data-sitekey="6Lf69iwUAAAAALcEtZfJt0iL2ye5G7TyboY5bs-S" data-callback="recaptcha_callback2">
<button type="submit" id="quick-contact-form-submit" name="quick-contact-form-submit" class="btn btn-danger nomargin" value="submit">Send Message</button>

Any help would be greatly appreciated. Thank you.

I figured out that 2 captcha codes on the same page does not work, so that is a problem.

BUT, the invisible reCAPTCHA still does not work correctly with the template. Using the code you provided, the callback works, but the button is not enabled afterward.