HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated

[vld1]

Hi all,

I have installed hCaptcha into my contact form and it works fine (email is sent only after captcha is checked/validated but how do I stop the page from refreshing on submit if captcha is not checked/validated because all fields value disappear and that is bad for user? Does someone know how I can stop this and just have a popup/text near the captcha to let the user know that is required.


Thank you!

<?php
if(isset($_POST['submit'])):
    if(isset($_POST['h-captcha-response']) && !empty($_POST['h-captcha-response'])):
        // get verify response
        $data = array(
          'secret' => "code",
          '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);
        $verifyResponse = curl_exec($verify);      
    $responseData = json_decode($verifyResponse);  
        if($responseData->success):
      //contact form submission code
    $email_to = "email";
    $email_subject = "title;
    $ip_address=$_SERVER['REMOTE_ADDR'];$geopluginURL='http://www.geoplugin.net/php.gp?ip='.$ip_address;$addrDetailsArr=unserialize(file_get_contents($geopluginURL));
    $country=$addrDetailsArr['geoplugin_countryName'];


     $name = $_POST['name']; // required
    $where = $_POST['where'];
    $email_from = $_POST['email']; // required
    $message = $_POST['message']; // required
    $newsletter = $_POST['newsletter'];
    $hcaptcha = $_POST['h-captcha']; // required
 
    $email_message = "Form details below.<br/><br/><br/>\n\n";
 
   
    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }
 
   
    $email_message .= "IP: ".clean_string($ip_address)."<br/><br/>\n\n";
    $email_message .= "Country: ".clean_string($country)."<br/><br/><br/>\n\n";
    $email_message .= "Name: ".clean_string($name)."<br/><br/>\n\n";
    $email_message .= "Heard from: ".clean_string($where)."<br/><br/>\n\n";
    $email_message .= "Email: ".clean_string($email_from)."<br/><br/>\n\n";
    $email_message .= "Newsletter: ".clean_string($newsletter)."<br/><br/>\n";
    $email_message .= "Message: ".clean_string($message)."<br/><br/>\n";

      // Always set content-type when sending HTML email
      $headers = "MIME-Version: 1.0" . "\r\n";
      $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
      // More headers
      $headers .= 'From:'.$name.' <'.$email.'>' . "\r\n";
      //send email
@mail($email_to, $email_subject, $email_message, $headers);
    $succMsg = header("location:/contact-thank-you");
        endif;
    endif;
endif;
?>

<form method="post"  id="contactform" name="contactform" action="/contact">
                     <div class="textbox-1"><label for="name">Your Name *</label>
                        <input class="textbox" type="text" name="name" title=""
                           oninvalid="this.setCustomValidity('Please Enter Your Name')"
                           oninput="setCustomValidity('')" required>
                     </div>
                     <div class="textbox-1"><label for="email">Your Email *</label>
                        <input class="textbox" type="email" name="email" title=""
                           oninvalid="this.setCustomValidity('Please Enter a Valid Email Address')"
                           oninput="setCustomValidity('')" required>
                     </div>
                     <label>How did you hear about us? (Not necessary, but we appreciate the effort.)</label>
                     <select name="where" class="dropdown" id="where" title="">
                        <option value="-">Click to Choose...</option>
                        <option value="Google Search"> Google Search </option>
                        <option value="Bing Search"> Bing Search </option>
                        <option value="Other Search Engine"> Other Search Engine </option>
                        <option value="Social Media"> Social Media </option>
                        <option value="Blog"> Blog </option>
                        <option value="Q&A Websites"> Q&A Websites </option>
                        <option value="Forum"> Forum </option>
                        <option value="Recommendation"> Recommendation </option>
                        <option value="Other"> Other </option>
                     </select>
                     <br/><br/>
                     <label for="message">Your Message *</label>
                     <textarea name="message" class="textarea" type="textarea" title=""
                        oninvalid="this.setCustomValidity('Please Enter Your Message')"
                        oninput="setCustomValidity('')" required>
</textarea>
                     <br/><br/>
                     <label class="container">
                     <input type="checkbox"  value=""
                        oninvalid="this.setCustomValidity('Please indicate that you have read and accept our Terms of Use and Privacy Policy agreements.')"
                        oninput="setCustomValidity('')" required>
                     </input>
                     <span> I have read and accept the <a class="content-link2" href="/terms">Terms of Use</a> and <a class="content-link2" href="/privacy">Privacy Policy</a> agreements. *</span>
                   
                     </label>
                     <label class="container">
                     <input type="checkbox" name="newsletter" id="newsletter" value="yes">
                     <span>I want to receive e-mails about limited-time special offers.</span>
                   
                     </label>
                     <div class="clr"></div>
                     <br/>
                   <div class="h-captcha" data-sitekey="code" ></div>
                 
                     <div class="bot-cont"><button type="submit" name="submit" class="submit_button" value="Submit">SUBMIT MESSAGE</button></div>
                     <br/><br/>
                  </form>

 

[VBService]

You can, for example, extract the code for captcha into a separate file and call it from the form level using ajax (e.g. fetch) and save the result in a session variable for using in the main code witch checking the correctness of data from the form.