reCAPTCHA v2. Need detailed instructions on how to include the verification

Question

I've been struggling with this for a while, and need some help.

I've managed to add a reCAPTCHA checkbox to my online form, but I'm stumped on what to do when it comes to the verification.

I've used the "Automatically render the reCAPTCHA widget" option as described in the Checkbox instructions.

But I'm getting stuck on the verification instructions.

My form code is pretty simple:

<form name="myForm" action="mail.php" onsubmit="return validateForm()" method="POST">
<div>
  <label for="name">Name:</label><br /><input id="name" type="text" name="name" class="formthin" required />
</div>

<div>
  <label for="email">Email:</label><br />
  <input id="email" type="email" name="email" class="formthin" required />
</div>

<div>
  <label for="message">Comments, Questions, Whatever:</label><br />
  <textarea id="message" name="message" rows="4" cols="4" class="formbig" required></textarea>
</div>

<div>
  <div class="g-recaptcha" data-sitekey="site-key"></div>
</div>

<div>
  <input type="submit" value="Submit" class="formsubmit" />
</div>

</form>

I've added the following in between the "<head></head>" tags.

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

So far everything looks good on the page.

For good measure, here is the code in the "mail.php" file:

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent=" From: \n $name \n\n Message: \n $message";
$recipient = "my email address";
$subject = "Website Contact Form";
$mailheader = "From: $email \r\n";
$forward = 1;
$location = "url of thank you page";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
if ($forward == 1) { 
    header ("Location:$location"); 
} 
else { 
    echo "Thank you message."; 
} 
?>

This is where I need help. I'm not sure which of the three options for verification I should use, how to implement the choice, or where the code for the API Response should go.

For instance, if I use the first option, does the "g-recaptcha-reponse" POST parameter go inside my initial <form> tag? The notes on the API Request seems to indicate that I need a second POST method. I'm not sure how to combine or implement it with my current one.

Does the API Response code go in my "mail.php" file? Or in between "<script></script>" tags on my form page? (in the head or below the form?)

Where does my "Secret Key" come into play? I don't see any instructions on how to include it.

I've looked through the forum and found a previous question that seem to be related: "Google reCaptcha v2 (Checkbox) Verification" The original posted code looks very similar to mine. (both on the html page, and the php action script)

The reply was a second php script that looks like it includes the Secret Key, but with no instructions on where that php code should go. Do I place it in the file with the form? Is it added or does it replace the mail.php action script? And if it replaces the script, how is the response from the actual form handled?

Any help would be appreciated. Thank you.

++++++++++++++++++++++++++

I have followed the instructions from the link sent by @Bazaim. These are the steps I took:

Downloaded the "recaptcha-master" folder and added it to my website directory.
ran the "composer" installation scripts in my Terminal.
Moved the "composer.phar" file into the "recaptcha-master" folder.
Added the following to the "composer.json" file:

"require": { "google/recaptcha": "^1.2" }
Added the "require_once..." script to the bottom of my "mail.php" file like this:
setExpectedHostname('my-domain-name.com') ->verify($gRecaptchaResponse, $remoteIp); if ($resp->isSuccess()) { // Verified! } else { $errors = $resp->getErrorCodes(); } ?>

So far so good. When I go to my form, and click the "checkbox" for I am not a robot, I am prompted to do the image identify thing and get the green "check" next to "I am not a Robot."

However, when I submit my form, my "mail.php" no longer functions. It tries to load in the browser window rather than send me an email. In addition, the reCAPTCHA checkbox is not "required" to hit submit.

Hi @Bazaim - thanks for the link. I've made some progress. My response is too long for a comment, so I'm going to edit my original post. — Paul T
My code is not displaying properly in my edits. Here's what my new mail.php file should look like: — Paul T
<?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $formcontent=" From: \n $name \n\n Message: \n $message"; $recipient = "email address"; $subject = "Website Contact Form"; $mailheader = "From: $email \r\n"; $forward = 1; $location = "url of thank you page"; — Paul T
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); if ($forward == 1) { header ("Location:$location"); } else { echo "Thank you message."; } — Paul T

Paul T Paul T · Accepted Answer · 2020-08-09T19:22:12

I got it to work. Here's what I ended up doing:

Removed the extra PHP script from my mail.php file. (the "require_once" content mentioned in the previous posts) My PHP script was working before I added that, so I wanted to get it back to a working version.

I tried to make the reCAPTCHA a requirement so I did another search and found instructions on adding javascript and css and added it to the code on my page. (this was one of the things I was trying to solve in my original post)

JavaScript:

window.onload = function() {
    var $recaptcha = document.querySelector('#g-recaptcha-response');

    if($recaptcha) {
        $recaptcha.setAttribute("required", "required");
    }
};

CSS:

#g-recaptcha-response {
    display: block !important;
    position: absolute;
    margin: -78px 0 0 0 !important;
    width: 302px !important;
    height: 76px !important;
    z-index: -999999;
    opacity: 0;
}

Added to the <head></head> code on my contact page.

Bingo - everything is working.

I'm not sure if the verification information is actually being used. (The other thing I was trying to figure out in my original post) And now I'm not sure if it's actually necessary. reCAPTCHA is required in the form, the form is submitting.

Anyway, thanks to @Bazaim for the help and getting me on track. Hope this helps anyone else who might be having problems with this.

reCAPTCHA v2. Need detailed instructions on how to include the verification

1 Answers