Javascript 同一页面上的简单联系人表单成功弹出窗口

我有一个带有contact.html和mail.php页面的简单联系人表单。我想要一个成功的弹出窗口在同一页时，点击提交按钮。也许需要使用ajax。如果有人能帮我。非常感谢

mail.php-

<?php
 $name = $_POST['name'];
 $email = $_POST['email'];
 $recipient = "example@gmail.com";
 $subject = "Contact Form";
 $mailheader = "From: $email \r\n";
 mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
 echo "Thank You!" . " -" . "<a href='form.html' style='text-decoration:none;color:#ff0099;'> Return Home</a>";
?>

contact.html-

<form action="mail.php" method="post" id="custom-form">
 <input type="text" placeholder="Name" name="name" required="">
 <input type="text" placeholder="Email" name="email" required="">
 <button class="btn" type="submit" value="send">Submit</button>
</form>

在contact.html中

<form action="mail.php" method="post" id="custom-form">
  <input type="text" placeholder="Name" name="name" required="">
  <input type="text" placeholder="Email" name="email" required="">
  <button class="btn" type="submit" value="send">Submit</button>
</form>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title processing">Loading...</h4>
      </div>
     <div class="modal-body">
       <p class="repons2"></p>
     </div>
   </div>
</div></div>
<script>
  $('#custom-form').submit(function (e) {
    e.preventDefault();
    var form_data = new FormData($(this)[0]);
    var fa = $(this);
    $('#myModal').modal('show');
    $.ajax({
      url: fa.attr('action'),
      type: 'post',
      data: form_data,
      dataType: 'json',
      success: function (response) {
        $('.repons2').html(response.messages)
        $('.processing').html(response.status)
      }
   });
 });
</script>

在mail.php中

<?php
      $name = $_POST['name'];
      $email = $_POST['email'];
      $recipient = "example@gmail.com";
      $subject = "Contact Form";
      $mailheader = "From: $email \r\n";
      if(mail($recipient, $subject, $formcontent, $mailheader)){
          $status="success send";
          $message= "Thank You!" . " -" . "<a href='form.html' style='text- decoration:none;color:#ff0099;'> Return Home</a>";
      }else{
         $status="fail send";
         $message="sending error";
      }
      $data=[
             "status"=>$status,
             "messages"=>$message
           ]
          echo json_encode($data);
?>

---

不要忘记加载jqueryforajax来工作

我建议构建一个默认隐藏的模式。向mail.php发送一个ajax请求，替换模式内容并最终显示模式。@Kruspe您能编写ajax代码吗？实际上，我对javascript、ajax和php还不熟悉。