I have encountered a problem when trying to implement reCAPTCHA v3 onto a website to prevent spam emails.
The problem I currently have is that the reCAPTCHA gives me an error that loos like this:
Uncaught (in promise) Ogiltigt åtgärdsnamn. Namnet får endast innehålla bokstäverna A–Za–z eller _. Ta inte med användarspecifik information.
Since I'm in Sweden the error code for some reason is not in English but a rough translation makes the error something like this:
Uncaught (in promise) Invalid action name. The name may only contain the letters A–Za–z or _. Do not include user-specific information.
At recaptcha_sv.js:361 and at contact.html:1
I believe it has something to do with the email using a "@" symbol as well as a ".", example "[email protected]", or that the name uses a space or something like this. I have googled for hours but just cant simply find my answers or the root for the problem.
To give some more context to the problem I will show the code but not the keys for the recaptcha.
contact.html
<body>
<!-- Formuläret för att skicka ett E-Mail via sidan -->
<div class="contact-container" id="contact">
<div class="contact">
<h1>Kontakta oss här!</h1>
<form method="post" accept-charset="UTF-8" class="contact-form" id="contact-form">
<input type="hidden" value="recaptchaResponse" id="recaptchaResponse">
<input class="form-control" type="text" name="name" id="name" placeholder="Namn" required>
<input class="form-control" type="text" name="email" id="email" placeholder="E-Mail" required>
<input class="form-control" type="tel" name="tel" id="tel" placeholder="Telefonnummer" required>
<input class="form-control" type="text" name="reg" id="reg" placeholder="Regnummer" required>
<textarea name="msg" id="msg" cols="30" rows="10" placeholder="Medelande" required></textarea>
<button type="submit" value="Skicka Mail">Skicka Mail</button>
</form>
</div>
</div>
</div>
</body>
<script src="https://www.google.com/recaptcha/api.js?render=my-own-site-key"></script>
<script src="/js/init.js"></script>
</html>
The init.js
window.addEventListener("load", function(){
"use strict";
const form = document.querySelector(".contact-form")
form.addEventListener("submit", function(event){
event.preventDefault()
let fields = document.querySelectorAll(".contact-form .form-control")
let valid = true;
for (var i = 0; i < fields.length; i++){
if(fields[i].value === ""){
valid = false;
}
}
if (valid){
grecaptcha.ready(function(){
grecaptcha
.execute("my-own-site-key", {
action: "contact-form"
})
.then(function(token){
let recaptchaResponse = document.getElementById("recaptchaResponse")
recaptchaResponse.value = token
fetch("/sendmail.php", {
method: "POST",
body: new FormData(form),
})
.then((response) => response.text())
.then((response) => {
console.log(response)
})
})
})
}
})
})
Lastly the sendmail.php
<?php
function isValid(){
if(
$_POST["name"] != "" &&
$_POST["tel"] != "" &&
$_POST["email"] != "" &&
$_POST["msg"] != "" &&
$_POST["reg"] != ""
) {
return true;
}
return false;
}
// Declare variables
$success_output = '';
$error_output = '';
if (isValid()){
$recaptcha_url = "https://www.google.com/recaptcha/api/siteverify"; // URL to the reCAPTCHA servers
$recaptcha_secret = "my-little-secret-key" // reCAPTCHA secret key
$recaptcha_response = $_POST["recaptchaResponse"]; // reCAPTCHA response from the servers, added to form during runtime
$recaptcha = file_get_contents($recaptcha_url."?secret=".$recaptcha_secret."&response=".$recaptcha_response); // send request to reCAPTCHA servers
$recaptcha = json_decode($recaptcha); // decode the response
if($recaptcha->success == true && $recaptcha->score >= 0.5 && $recaptcha->action == "contact-form"){
// Send the email
$Name = $_POST["name"];
$Tel = $_POST["tel"];
$MailFrom = $_POST["email"];
$Message = UTF8_decode($_POST["msg"]);
$Reg = $_POST["reg"];
$MailTo = "[email protected]";
$Subject = "".$Name." | Thissite.se";
$Headers = array(
'From' => $MailTo,
'Reply-To' => $MailTo,
'MIME-Version' => '1.0',
'Content-type' => 'text/html',
'charset' => 'UTF-8',
'X-Mailer' => 'PHP/' . phpversion()
);
$Msg = 'Namn: ' . $Name . '<br />Telefonnummer: ' . $Tel . '<br />E-mail: ' . $MailFrom . '<br />Regnummer: ' . $Reg . '<br /><br />Meddelande: ' . wordwrap($Message, 50);
$test = mail($MailTo, $Subject, $Msg, $Headers);
if ($test === true) {
$success_output = "message was sent successfully!";
header("Location: redirect.html");
} else {
$error_output = "mail error";
echo "Meddelandet kunde inte skickas, vänligen kontakta oss på följande mail. ([email protected])";
}
} else {
// reCAPTCHA failed, dont send mail
$error_output = "probably a robot";
echo "Vi tror att du är en robot, är du inte en robot så vänligen kontakta oss på följande mail. ([email protected]) "
}
}
// Output error or success message
$output = [
'error' => $error_output,
'success' => $success_output
];
echo json_encode($output);
?>