Skip to main content
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

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!">



 

 

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?

BenPleysier
Community Expert
March 5, 2020

As osgood_ has explained, you are sending the form to the wrong location

<form action="pages/contact-sent.html" method="post" name="contactform" id="contactform" title="Contact us" autocomplete="on">

You are sending the form to the final step intead of ContactMail.php

 

The flow

1. submit contact form > validate (reCaptcha + JS) >
      a) when OK > action file (ContactMail.php)
      b) when not OK > send error message.

2. in ContactMail.php > validate (server code) >
      a) when OK > thank you page (contact-sent.html)
      b) when not OK > send error message.

 

In other words, change the action to ContactMail.php

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!