PHP Ajax Formular mit reCaptcha nicht senden

Question

Ich habe Formular mit Ajax und ReCaptcha Validierung. Ich habe einige Probleme, die reCaptcha arbeiten zu lassen. Ich bekomme immer die Fehlermeldung "Please click the reCAPTCHA box" von sendmail.php (Fehler 400). Was fehlt mir hier?

Html:

<div class="modal-body"> 
    <div class="statusMsg"></div> 
    <form id="contactform" action="sendmail.php" method="post"> 
    <div class="form-group"> 
     <label for="inputName">Name</label> 
     <input type="text" class="form-control" id="inputName" placeholder="Enter your name" /> 
    </div> 
    <div class="form-group"> 
     <label for="inputPhone">Phone</label> 
     <input type="phone" class="form-control" id="inputPhone" placeholder="Enter your phone no." /> 
    </div> 
    <div class="form-group"> 
     <label for="inputEmail">Email</label> 
     <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email" /> 
    </div> 
    <div class="form-group"> 
     <label for="inputMessage">Message</label> 
     <textarea name="comment" class="form-control" id="inputMessage" placeholder="Enter your message"></textarea> 
    </div> 
    <div class="messages"></div> 
    </form> 
</div> 

<div class="modal-footer"> 
    <div class="captcha-box"> 
    <div class="g-recaptcha" data-theme="dark" data-sitekey="6LdqpBIUAAAAAAq17acWDx1oHuJsrQOdVQFb88rh"> </div> 
    </div> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="submit" class="btn btn-primary" id="buttonid">SUBMIT</button> 
</div> 

js:

<script> 
    $(function() { 
    // Get the form. 
    var form = $('#contactform'); 

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

    // Set up an event listener for the contact form. 
    $('#buttonid').click(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. 
      $('#inputName').val(''); 
      $('#inputMail').val(''); 
      $('#inputMessage').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.'); 
      } 
     }); 
    }); 
    }); 
</script> 

sendmail.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 = "will@additlater.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 { 
     http_response_code(400); 
     echo "Robot verification failed. Please try again."; 
     } 

    } 

    // If the Google Recaptcha box was not clicked 
    else { 
    http_response_code(400); 
    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."; 
} 
?> 

Answer 1

ich es gelöst. Es scheint, dass ein paar Dinge falsch waren.

1. Wie KyleS erwähnt, muss die reCapthca-Box innerhalb der <form> sein.
2. Formular-Eingabefelder müssen eine name="" haben, damit .serialize() funktioniert.

Danach funktioniert der Code jetzt wie vorgesehen.