Having issue implementing google recaptcha v3 in my php form

Question

I am trying to use recaptcha to validate authenticity of my user before submitting the form but i am having issue that my page just refreshes when clicked on "book now" button rather than showing captcha.

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

This is code snippet from my form ending-
 <div class="row mb-3">
                <!-- Number of Persons -->
                <div class="col-md-3">
                    <label for="persons" class="form-label">Number of Persons</label>
                    <input type="number" id="persons" name="persons" class="form-control" required min="1" placeholder="Enter number of persons">
                    <div class="invalid-feedback">Please enter the number of persons.</div>
                </div>

                <!-- Number of Rooms -->
                <div class="col-md-3">
                    <label for="rooms" class="form-label">Number of Rooms</label>
                    <input type="number" id="rooms" name="rooms" class="form-control" required min="1" placeholder="Enter number of rooms">
                    <div class="invalid-feedback">Please enter the number of rooms required.</div>
                </div>
            
                
                <div class="col-md-3">
                    <label for="check-in" class="form-label">Check-in Date</label>
                    <input type="date" id="check-in" name="check_in_date" class="form-control" required>
                    <div class="invalid-feedback">Please select a check-in date.</div>
                </div>
                <div class="col-md-3">
                    <label for="check-out" class="form-label">Check-out Date</label>
                    <input type="date" id="check-out" name="check_out_date" class="form-control" required>
                    <div class="invalid-feedback">Please select a check-out date.</div>
                </div>
                    
            </div>  

            <div class="mb-3">
                <label for="special-requests" class="form-label">Special Requests</label>
                <textarea id="special-requests" name="special_requests" class="form-control" rows="5" placeholder="Enter any special requests"></textarea>
            </div>
         
            <div class="text-center">
        <button 
            class="g-recaptcha btn btn-primary" 
            data-sitekey="my-site-key" 
            data-callback="onSubmit" 
            data-action="submit" 
            type="button">
            Book Now
        </button>
        <button type="submit" name="submit1" class="btn btn-primary" style="display: none;">Submit Hidden</button>
    </div>
        </form>

I handle form submission using php code on same page like

code snippet - 

  <?php
if (isset($_POST['submit1'])) {
    // Validate form inputs
    $errors = [];

    // Retrieve form data
    $title = $_POST['title'] ?? '-';
    $fullName = $_POST['name'] ?? '-';
    $employeeId = $_POST['Employee'] ?? '-';
    $designation = $_POST['Designation'] ?? '-';
    $posting = $_POST['posting'] ?? '-';
    $email = $_POST['email'] ?? '-';
    $phone = $_POST['phone'] ?? '-';
    $persons = $_POST['persons'] ?? '-';
    $rooms = $_POST['rooms'] ?? '-';
    $checkInDate = $_POST['check_in_date'] ?? '-';
    $checkOutDate = $_POST['check_out_date'] ?? '-';
    $specialRequests = $_POST['special_requests'] ?? '-';

    // Email content
    $subject ="Guest  House Booking";
    $body = "
    <h3>Booking Details</h3>
    <p><strong>Title:</strong> $title</p>
    <p><strong>Full Name:</strong> $fullName</p>
    <p><strong>Employee ID:</strong> $employeeId</p>
    <p><strong>Designation:</strong> $designation</p>
    <p><strong>Posting:</strong> $posting</p>
    <p><strong>Email:</strong> $email</p>
    <p><strong>Phone:</strong> $phone</p>
    <p><strong>Number of Persons:</strong> $persons</p>
    <p><strong>Number of Rooms:</strong> $rooms</p>
    <p><strong>Check-in Date:</strong> $checkInDate</p>
    <p><strong>Check-out Date:</strong> $checkOutDate</p>
    <p><strong>Special Requests:</strong> $specialRequests</p>
    ";

at end i have this js

<script>
   function onSubmit(token) {
     document.getElementById("first-form").submit();
   }
 </script>

first-form is id of my form I need help on opening recaptcha when book now is clicked and only submitting the form on successful validation of recaptcha

I have tried the offical google documentation which refers to add js then add a button over my original hidden button and making a js button which does form submission. I have also tried to consult chatgpt which gave me some code

user29169858 · Accepted Answer · 2025-01-13 01:02:34Z

It looks like you want to trigger the reCAPTCHA when clicking "Book Now" and only submit the form if reCAPTCHA passes. From your code, I see you have the correct setup for reCAPTCHA, but you might be missing the crucial part of form submission.

Here's a quick fix:

Remove type="button" from the "Book Now" button.
Update the onSubmit function to ensure that it submits the form only after reCAPTCHA validation.

Here's how you can modify the JavaScript:

<script>
   function onSubmit(token) {
     document.getElementById("first-form").submit();  // Submit the form after validation
   }
</script>

The button should trigger the onSubmit callback when clicked:

<button 
    class="g-recaptcha btn btn-primary" 
    data-sitekey="your-site-key" 
    data-callback="onSubmit" 
    data-action="submit">
    Book Now
</button>

Make sure you also verify the reCAPTCHA response on the server-side (PHP) by sending the token to Google for validation. Let me know if that clears things up!

Collectives™ on Stack Overflow

Having issue implementing google recaptcha v3 in my php form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related