0

long-time lurker here and this is my first time posting and asking for help from your great minds. I need some help with integrating hCaptcha successfully with my HTML/PHP Contact Form as the title says. I am working on a website for a client and have a Contact Form on each page of the site that pops up when the 'email' icon is clicked. The text fields for Name, Phone Number, and Message are all required and the form doesn't send unless they are filled in, and a message pops up telling the user to fill them out if left blank when the 'Send' button is pressed, however I haven't been able to implement the captcha to that effect.

At the moment, if a user fills out all required fields and successfully completes the captcha, the form's action mail.php is completed, which sends an email and redirects the user to a special Thank You landing page. However, if the form's fields are filled out successfully, but the captcha is not completed, hitting the 'Send' button redirects the user to WEBSITE/mail.php which loads a white screen. The form is not sent as an email, which is still protecting against spam I suppose. I made it so an error message pops up on mail.php telling the user to hit the back button and complete the captcha to send their message. Then if they hit the back button on the browser, it will take them to the previous page, and if they press the email icon to pop-up the Contact Form, their message is still there, thankfully. Please help me fix this so that a similar message pops up on the Contact Form to notify the user to complete the captcha when the 'Send' button is pressed and the captcha has not been completed, and only let mail.php fire when all fields + captcha have been validated.

Here is the code, thanks in advance for all your help:

Contact Form:

<form action="mail.php" method="POST" class="form-container">
<font id="popup-contact-header"><b>Please use this form to send us an email or call or text <a href="tel:555PHONE#">(555) PHONE#</a> and we'll get back with you <abbr title="As Soon As Possible" style="text-decoration:none;">ASAP</abbr>!</b></font><br><br>
<b>Name:<font color="#FF0000">*</font></b><br>
<input type="text" name="name" style="font-size:12pt;max-width:250px;height:25px;border:1px solid black;padding:3px;text-align:center;" required><br>
<b>Email Address:</b><br>
<input type="text" name="email" style="font-size:12pt;max-width:250px;height:25px;border:1px solid black;padding:3px;text-align:center;"><br>
<b>Phone Number:<font color="#FF0000">*</font></b><br>
<input type="text" name="phone" style="font-size:12pt;max-width:250px;height:25px;border:1px solid black;padding:3px;text-align:center;" required><br>
<b>Request Phone Call:</b><br>
Yes:<input type="checkbox" value="Yes" name="call">
No:<input type="checkbox" value="No" name="call"><br>
<b>Message:<font color="#FF0000">*</font></b><br>
<textarea name="message" rows="6" cols="24" style="font-size:12pt;border:1px solid black;padding:3px;" required></textarea>
<div class="h-captcha" data-sitekey="MY_PERSONAL_SITEKEY" id="Contact-Captcha"></div>
<button type="submit" class="btn" value="send">Submit</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button><br>
<font id="popup-contact-required"><b><font style="color:#FF0000;">*</font>Required Field</b></font>
</form>

mail.php

<?php
$data = array(
            'secret' => "MY_SECRET_KEY_HERE",
            'response' => $_POST['h-captcha-response']
        );
$verify = curl_init();
curl_setopt($verify, CURLOPT_URL, "https://hcaptcha.com/siteverify");
curl_setopt($verify, CURLOPT_POST, true);
curl_setopt($verify, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($verify, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($verify);
// var_dump($response);
$responseData = json_decode($response);
if($responseData->success) {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $call = $_POST['call'];

$message = $_POST['message'];
$formcontent=" From: $name \n Phone: $phone \n Call Back: $call \n Message: $message";
$recipient = "boss@website.com";
$subject = "Website Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
header("Location: http://www.website.com/thanks");
} 
else {
$message = "Please hit the Back button to complete the Captcha and submit your message";
echo "<script type='text/javascript'>alert('$message');</script>";
}
?>
  • I had previously had this in mail.php under 'else' trying to make the captcha be validated before the php fired off, but it did not work for me: ``` $("form").submit(function(event) { var hcaptchaVal = $('[name=h-captcha-response]').value; if (hcaptchaVal === "") { event.preventDefault(); alert("Please complete the hCaptcha"); } }); ``` – Searching4Sofia Jan 31 '22 at 04:26
  • Hint: use ajax to validate the captcha before form submission. – Ken Lee Jan 31 '22 at 04:40
  • @Ken Lee Thank you for the hint, but I am sorry I have no experience with ajax, I tried to research this but could not find how to do it. Could you please steer me in the direction of a starting point? I appreciate your time and help. – Searching4Sofia Jan 31 '22 at 22:26

0 Answers0