ajax、reCAPTCHA v2のjquery連絡フォーム - 無効な場合はフォームを消去します

Question

GoogleのjConnect/ajax連絡フォームをGoogle reCAPTCHA v2で使用することになりましたが、reCAPTCHAが入力されなかったり無効な場合はユーザーはすべてを再度入力する必要があります。 reCAPTCHAもロードに非常に時間がかかりますので、簡単に見落とすことができます。フォームをクリアするのを防ぐにはどうしたらいいですか？

入力フィールドの値にいくつかのPHPコードを配置し、私が理解していないhtmlentitiesについていくつかの解決策を見つけましたが、フォームのあるページを.htmlファイルのままにしたいと思います。フォームを消去しないようにすることはできますか、または.htmlファイルを.phpファイルにする必要がありますか？ここで

は私のフォームです：

<?php 
// If the form was submitted 
if ($_SERVER["REQUEST_METHOD"] == "POST") { 

    // If the Google Recaptcha box was clicked 
    if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){ 
     $captcha=$_POST['g-recaptcha-response']; 
     $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=MYKEY&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']); 
     $obj = json_decode($response); 

     // If the Google Recaptcha check was successful 
     if($obj->success == true) { 
      $name = strip_tags(trim($_POST["name"])); 
      $name = str_replace(array("\r","\n"),array(" "," "),$name); 
      $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL); 
      $message = trim($_POST["message"]); 
      if (empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) { 
      http_response_code(400); 
      echo "Oops! There was a problem with your submission. Please complete the form and try again."; 
      exit; 
      } 
      $recipient = "I-removed-this@for-now.com"; 
      $subject = "New message from $name"; 
      $email_content = "Name: $name\n"; 
      $email_content .= "Email: $email\n\n"; 
      $email_content .= "Message:\n$message\n"; 
      $email_headers = "From: $name <$email>"; 
      if (mail($recipient, $subject, $email_content, $email_headers)) { 
      http_response_code(200); 
      echo "Thank You! Your message has been sent."; 
      } 

      else { 
      http_response_code(500); 
      echo "Oops! Something went wrong, and we couldn't send your message. Check your email address."; 
      } 

     } 

     // If the Google Recaptcha check was not successful  
     else { 
     echo "Robot verification failed. Please try again."; 
     } 

    } 

    // If the Google Recaptcha box was not clicked 
    else { 
    echo "Please click the reCAPTCHA box."; 
    }  

} 

// If the form was not submitted 
// Not a POST request, set a 403 (forbidden) response code.   
else { 
    http_response_code(403); 
    echo "There was a problem with your submission, please try again."; 
}  
?> 

そして、こちらのフォームに行くapp.jsです：

<div class="row"> 
      <form id="ajax-contact" class="contact-form" role="form" method="post" action="mailer.php"> 
       <div class="col-sm-4 col-sm-offset-2"> 
        <div class="form-group"> 
         <label for="name">Name *</label> 
         <input type="text" name="name" id="name" class="form-control" placeholder="Name" required/> 
        </div> 
       </div> 
       <div class="col-sm-4"> 
        <div class="form-group"> 
         <label for="email">Email *</label>                     
         <input name="email" id="email" class="form-control" placeholder="Email" required/> 
        </div> 
       </div> 

       <div class="row contact-wrap mymessage2"> 
       <div class="col-sm-8 col-sm-offset-2"> 
        <div class="form-group"> 
         <label>Message *</label> 
         <textarea name="message" id="message" class="form-control" rows="8" placeholder="Type your message here." required></textarea> 
        </div>  
        <div class="form-group"> 
         <div class="g-recaptcha" data-sitekey="6LeehAsUAAAAAILDfzizJ23GHH7yPGxWBFP_3tE7"></div> 
        </div> 
        <div class="form-group"> 
         <p> 
          <button type="submit" name="submit" class="btn btn-primary btn-lg">Submit Message</button> 
         </p> 
        </div> 
       </div> 
        <div class="row"> 
         <div class="col-sm-8 col-sm-offset-2"> 
          <div id="form-messages"></div> 
         </div> 
        </div> 
      </form> 

そしてここでは、フォームによって呼び出されmailer.phpです。

$(function() { 

    // Get the form. 
    var form = $('#ajax-contact'); 

    // Get the messages div. 
    var formMessages = $('#form-messages'); 

    // Set up an event listener for the contact form. 
    $(form).submit(function(e) { 
     // Stop the browser from submitting the form. 
     e.preventDefault(); 

     // Serialize the form data. 
     var formData = $(form).serialize(); 

     // Submit the form using AJAX. 
     $.ajax({ 
      type: 'POST', 
      url: $(form).attr('action'), 
      data: formData 
     }) 
     .done(function(response) { 
      // Make sure that the formMessages div has the 'success' class. 
      $(formMessages).removeClass('error'); 
      $(formMessages).addClass('success'); 

      // Set the message text. 
      $(formMessages).text(response); 

      // Clear the form. 
      $('#name').val(''); 
      $('#email').val(''); 
      $('#message').val(''); 
     }) 
     .fail(function(data) { 
      // Make sure that the formMessages div has the 'error' class. 
      $(formMessages).removeClass('success'); 
      $(formMessages).addClass('error'); 

      // Set the message text. 
      if (data.responseText !== '') { 
       $(formMessages).text(data.responseText); 
      } else { 
       $(formMessages).text('Oops! An error occured, and your message could not be sent.'); 
      } 
     }); 

    }); 

}); 

私は本当にあなたの助けに感謝します！

Answer 1

PHPのreCaptchaのケースが正常に動作し、正常に応答しています。それはそのそれらの両方へhttp_response_code(400);