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() {
grecap
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!">
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?
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.
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
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!
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.
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.
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
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!
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>
Copy link to clipboard
Copied
No need for this post, everything was sorted before the post was published.
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
Copy link to clipboard
Copied
OK great, good job.