Skip to main content
M
mercafe
Participating Frequently
March 4, 2020
Answered

Re-direct with Recaptcha v3

  • March 4, 2020
  • 1 reply
  • 4191 views

Good evening all, just wondering if someone can help out a bit here! We've got a test contact form set up with ReCaptahca V3 on it, (the Recaptcha logo is drifting outside of the contact form which is a bit annoying but that can be fixed later!), but when the form is filled in the page should redirect to ta thank you page, at the moment it isn't which I'm guessing is to do with the PHP page we were given, which I think is a bit of a mishmash of two solutions?

 

Any help/guidance here would be much appreciated!

 

The contact form is here 

 

http://merlinsbakerycafe.co.uk/full-design-test-message-test.php

 

Thanks!

This topic has been closed for replies.
Correct answer osgood_

That's great, thanks to both for the responses – the HTML code is now updated ot the above, and the smae with the PHP and it seems to be working ok – so now it's just a case of putting in the Recaptcha V3 coding into both files and getting it to send the message and re-direct 


Alright, so now you need to add back in the Google recaptcha code. Start by adding the below <script></script> block, in bold, to the form page, directly before the closing </body> tag, near the end of the page.

 

Add YOUR RECAPTCHA SITE KEY where indicated in the code. You need to keep the site key wrapped in quotes '  ' in the second instance, as shown below:

 

<script src="https://www.google.com/recaptcha/api.js?render=YOUR RECAPTCHA SITE KEY"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('YOUR RECAPTCHA SITE KEY' , {action: 'homepage'}).then(function(token) {
document.getElementById('token').value = token;
})
})
</script>

 

 

Now add an input field to your form directly before the closing </form> tag:

 

<input type="hidden" id="token" name="token">

</form>

 

This form field will be automatically populated with your site key by the javascript you added.

 

Now you have to add the recaptcha code to the 'ContactMail-new.php' page. The code in bold below (apart from the opening and closing <?php  ?> tags) is what should already exit in your php page, so you just need to copy and add the code which is NOT in bold, so every thing looks like below.

 

Add your RECAPTCHA SECRECT KEY where indicated in the php code below (keep the '  ' around the secret key):

 

If successful your 'pages/contact_sent.html' page will be included in the 'ContactMail-new.php' page. You need to create a similar page for a failed result - 'pages/contact_failed.html' and put some message in that file plus a button back to the page the form is located on.

 

<?php
//set recaptcha url/secret-key/response
$recapture_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'YOUR RECAPTCHA SECRECT KEY';
$recaptcha_response = $_POST['token'];
//send information to recaptcha url
$recaptcha = file_get_contents($recapture_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
$recaptcha = json_decode($recaptcha);
//check if recaptcha has been successful
if($recaptcha->success==true) {
if($recaptcha->score >= 0.5) {
// if recaptcha is successful and score is equal or more than 0.5 process the form information

 

 

 

$name = htmlspecialchars($_POST['Name']);
$email = htmlspecialchars($_POST['email']);
$message = htmlspecialchars($_POST['message']);
if(empty($name) || empty($email) || empty($message)) {
$error = true;
$status = "Failed";
}
elseif(filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
$error = true;
$status = "Failed";
}
// if no form errors are set then send the form information to the email address
if(!isset($error)) {
$formcontent=" From: $name \n Email: $email \n Message: $message";
$recipient = "RECIPIENT EMAIL ADDRESS";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
$status = "Successful";
}

 

 

 

 

}
// if recaptcha fails set a status
else {
$status = "Failed";
}
}

// if status is successful then include the contact_sent.html page
if($status === "Successful") {
include('pages/contact_sent.html');
}
else {
// if status is failed then include the contact_failed.html page
include('pages/contact_failed.html');
}
?>

 

 

 

 

Thats it!

 

1 reply

O
osgood_
Brainiac
March 5, 2020

Your form 'action' is incorrect:

'pages/contact-sent.html'


I'm assuming that is where your php form processing code is housed, so it should be a .php extention NOT an .html extention
'pages/contact-sent.php'

Try that and see what happens.

Correct the form submit button code as well from this:
<input name="submit" type="submit" id="submit" formaction="ContactMail-new.php" formmethod="POST" value="Contact us!">
 
To this:
<input type="submit" id="submit" name="submit" value="Contact us!">



 

 

    M
    mercafeAuthor
    Participating Frequently
    March 5, 2020

    Thanks for the reply there 🙂

     

    ContactMail.php is where the processing code is, and contact-sent.html is the page that a viewer would see once the email is sent

     

    So you would go from the contact page > details submitted > ContactMail.php checks the results > presuming everytthing is fine it then sends an email to us with the submitted message and then redirects to the thank you page

     

    So that's basically what we're trying to do here – whether it would be easier to achieve that with V2 of Captcha is the question I guess?

    O
    osgood_
    Brainiac
    March 5, 2020

    Thanks for the responses both, the action is now changed – as for the php file, this is what it currently contains:

     

    <?php // Check if form was submitted:
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['recaptcha_response'])) {

    // Build POST request:
    $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
    $recaptcha_secret = 'xxxxxxxxxxxxx';
    $recaptcha_response = $_POST['recaptcha_response'];

    // Make and decode POST request:
    $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
    $recaptcha = json_decode($recaptcha);

    // Take action based on the score returned:
    if ($recaptcha->score >= 0.5) {
    // Verified - send email
    } else {
    // Not verified - show form error
    }

    } ?>

     

    We really appreciate the help by the way!


    Well there is nothing in your php file which would actually process the form information and send it to an email address?

     

    I would start by getting the form to work correctly initially then worry about the kind of spam security protection you are going to use:

     

    Lets start by setting up the form code correctly: (Make sure your form code is exactly the same as below, copy and paste if you need to).

     

    <form action="ContactMail-new.php" method="post" name="contactform" id="contactform" title="Contact us" autocomplete="on">
    <p>
    <label for="Name">Name:</label>
    <input type="text" name="Name" id="Name">
    </p>
    <p>
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
    </p>
    <p>
    <label for="textarea">Please enter your comments/queries here:</label>
    <br />
    <textarea name="message" cols="30" rows="4" id="textarea"></textarea>
    </p>
    <p>
    <input type="submit" id="submit" name="submit" value="Contact us!">
    </p>
    </form>

     

     

    Keep a copy of the file 'ContactMail-new.php' and then delete all of the code in the orginal ContactMail-new.php file and insert the below php code into it.

     

    Replace recipient-email-address in the php code below with the email address where you want the form information to be sent to, keep the " " around the email address.

     

    <?php
    $name = htmlspecialchars($_POST['Name']);
    $email = htmlspecialchars($_POST['email']);
    $message = htmlspecialchars($_POST['message']);
    if(empty($name) || empty($email) || empty($message)) {
    $error = true;
    $status = "Failed";
    }
    elseif(filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
    $error = true;
    $status = "Failed";
    }
    if(!isset($error)) {
    $formcontent=" From: $name \n Email: $email \n Message: $message";
    $recipient = "recipient-email-address";
    $subject = "Contact Form";
    $mailheader = "From: $email \r\n";
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
    $status = "Successful";
    }
    ?>


    <?php if($status === "Successful") {
    include('pages/contact-sent.html');
    }
    else {
    include('pages/contact-failed.html');
    }
    ?>

     

     

    Create a 'contact-failed.html' page in your 'pages' folder and include in that page the message/messages/graphics that you would like the user to see if the proccess fails - along with the 'failed message' you'll also need a button to take them back to the form page.

     

    If the processs is successful your 'pages/contact-sent.html' will be included/appear and the form information will be delivered to the email address you inserted into the php code, assuming your server supports the php mail function.

     

    Once you get the form working you can then decide what spam security solution best works and incorprate that.

     

     

     

     

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices