Submitting form doesn't work after using Recaptcha v3

Question

I'm trying to use Recaptcha v3 on my form but submitting the form only works when Recaptcha is removed. When Recaptcha is enabled, I can click on the submit button but nothing happens. I don't even get an error message in the console even though I can see the protected by reCAPTCHA logo in the frontend on the bottom right. I'm using Laravel 6.

My form template looks like this:

    <div class="row mt-150">
    <div class="col-12 text-center text-white">
        <h1>Contact</h1>
    </div>
</div>
<div class="row justify-content-center">
    <div class="col-md-4 col-sm-12">
        <form action="{{route('contact_form')}}" method="POST">
            @csrf
            <div class="form-group">
                <label for="email" class="text-white">Email address</label>
                <input type="email" class="form-control" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="textarea" class="text-white">Message</label>
                <textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
            </div>
            <input type="submit"
                    id="submitButton"
                    class="g-recaptcha btn btn-primary"
                    data-sitekey="MY-PUBLIC-KEY"
                    data-callback='onSubmit'
                    data-action='submit'
                    name="submit">
        </form>
    </div>
</div>

<script src="https://www.google.com/recaptcha/api.js"></script>

There is also an app.js included which contains the captcha callback function:

function onSubmit(token) {
  document.getElementById("submitButton").submit();
}
window.onSubmit = onSubmit;

Can someone give me a hint what I'm doing wrong implementing recaptcha? I tried to do it just like this:

Google reCaptcha v3

Answer 1

This will not work because you are trying to trigger submit() on a button. Give the form an id and then trigger submit() on the form

<form action="{{route('contact_form')}}" method="POST" id="contactForm">
    @csrf
    <div class="form-group">
        <label for="email" class="text-white">Email address</label>
        <input type="email" class="form-control" id="email" name="email" required>
    </div>
    <div class="form-group">
        <label for="textarea" class="text-white">Message</label>
        <textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
    </div>
    <input type="submit"
        id="submitButton"
        class="g-recaptcha btn btn-primary"
        data-sitekey="MY-PUBLIC-KEY"
        data-callback='onSubmit'
        data-action='submit'
        name="submit">
</form>

Then in javascript get the form and trigger submit on it

function onSubmit(token) {
  document.getElementById("contactForm").submit();
}
window.onSubmit = onSubmit;