Highlighted

Re-direct with Recaptcha v3

Community Beginner ,
Mar 04, 2020

Copy link to clipboard

Copied

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!

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!

 

TOPICS
Code, How to, Other, Server side applications

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Re-direct with Recaptcha v3

Community Beginner ,
Mar 04, 2020

Copy link to clipboard

Copied

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!

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!

 

TOPICS
Code, How to, Other, Server side applications

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 04, 2020 0
LEGEND ,
Mar 05, 2020

Copy link to clipboard

Copied

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



 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 05, 2020 2
Community Beginner ,
Mar 05, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 05, 2020 0
LEGEND ,
Mar 05, 2020

Copy link to clipboard

Copied

But pages/contact-sent.html never gets evoked as you need a method like clicking a button to evoke it.

 

If your php processing code is in a seperate file - ContactMail.php - to your form code its best to apply all of your logic in that file, ie:

 

<?php 

if(form process successful) {

include('contact-sent.html');

}

else {

include('contact-failed.php');

}

?>

 

If you include the php code in the same file as your form code and point the form action to the file where the form is housed you can use a php redirect to - pages/contact-sent.html IF the form process is successful.

 

It might be an idea to post your php code here and see if someone can understand what is happening.

 

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 05, 2020 1
Adobe Community Professional ,
Mar 05, 2020

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 05, 2020 1
Community Beginner ,
Mar 05, 2020

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 05, 2020 0
Adobe Community Professional ,
Mar 05, 2020

Copy link to clipboard

Copied

Have a look at https://www.youtube.com/watch?v=zGNH_lbpmm8 where the action takes place in the same document as the form.

 

Don't forget to validate the inputs in the serverside (PHP) code as well.


Ben
This tutorial is about how to install Google reCaptcha v3 on the website. reCAPTCHA learns by seeing real traffic on our site and returns a score (1.0 is ver...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 05, 2020 1
LEGEND ,
Mar 05, 2020

Copy link to clipboard

Copied

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.

 

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 05, 2020 1
Community Beginner ,
Mar 06, 2020

Copy link to clipboard

Copied

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 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 06, 2020 0
LEGEND ,
Mar 06, 2020

Copy link to clipboard

Copied

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!

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 06, 2020 1
LEGEND ,
Mar 06, 2020

Copy link to clipboard

Copied

Just looking at your current page you already have the javascript at the top of the page. Delete it and use it how I have instructed in my previous email as you do not have a form field with the id  'recaptachaResponse' that was removed when the form code was updated.

 

Remove the below javascript from your current page where the form is located and follow the instruction in my previous email.

 

 

 

 

<script src="https://www.google.com/recaptcha/api.js?render=XXXXXXXXXXXXXXXXXXXX"></script>
	  
<script>
grecaptcha.ready(function() {
grecaptcha.execute('XXXXXXXXXXXXXXXXXXXXXXXXXXXX', { action: 'contact' }).then(function (token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
});
});
</script>	

 

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 06, 2020 2
LEGEND ,
Mar 06, 2020

Copy link to clipboard

Copied

No need for this post, everything was sorted before the post was published.

 

 

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 06, 2020 1
Community Beginner ,
Mar 06, 2020

Copy link to clipboard

Copied

Thank you very much for those replies, that has indeed worked!!!

 

Thanks very much again to yourself and Ben above for all your help and of course patience too with a few questions which you've no doubt heard quite a few times before, but your time, help and advice is very much appreciated! 

 

Thanks again

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 06, 2020 1
osgood_ LATEST
LEGEND ,
Mar 06, 2020

Copy link to clipboard

Copied

OK great, good job.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 06, 2020 1