Javascript 在单页网站上设置联系人表单/脚本

由于某些原因，我似乎总是很难设置联系人表单、邮件脚本和所有内容……这一次是针对单页面网站（我自己的产品组合），因此需要一个动态解决方案，而不需要页面刷新或外部链接等。一些我不是很有经验的东西

我的网站是：

我一直在努力学习的网站，以及他们是如何建立自己的。表单在GitHub上使用了一个名为FormSentinel的小jQuery插件来处理验证方面的事情——这似乎工作得很好，在表单完成并提示输入正确的电子邮件地址之前，submit按钮是禁用的，问题是当单击submit/“Transmit”按钮时什么也没有发生

这大概是因为我没有链接到任何实际处理表单的PHP脚本，因为我不确定在这个场景中实际从何处调用它。我在服务器的根目录上有一个非常基本的mail.php，但是从AlwaysCreative网站上看，表单操作链接回到页面本身，在FormSentinel jquery中没有任何php或邮件脚本的参考（或文档或其他相关内容…）

我只是有点困惑（好吧，非常困惑），不知道如何或在哪里为表单建立指向PHP处理脚本的链接，而不导致任何其他外部链接/页面。使用FormSentinel插件，页面应该淡出表单并加载一条简短的“谢谢”消息来代替包含的字段集，但这也不会发生

表单的Javascript：

;(function($) {

  var formSentinel = {
    submitting: false,
    fields: [],
    rules: {
      required: /./,
      requiredNoWhitespace: /\S/,
      email: /\S/
    },
    init: function(form) {
      this.fields = form.elements;
      $('#submit-btn').removeClass('success').attr('disabled', 'disabled');
      for (var i = 0; i < this.fields.length; i++) {
        if ($(this.fields[i]).val() === '') {
          $(this.fields[i]).bind('focus', function() {
            formSentinel.statusListener(form);
          }); 
          $(this.fields[i]).bind('blur', function() {
            formSentinel.statusListener(form);
          });
        }
        $(this.fields[i]).bind('keydown, keyup', function() {
          var self = $(this);
          formSentinel.statusListener(form);
          if (self.hasClass('invalid') || self.hasClass('valid')) {
            self.bind('keydown', function() {
              formSentinel.fieldListener(this);
            });
          }
        });
      }
      $(form).submit(function () {
        if (formSentinel.submitting === false) {
          formSentinel.submitListener(this);
          $('html, body').animate({scrollTop: $(form).offset().top}, 800);
        }
        return false;
      });

},
fieldListener: function(field) {
  var className = field.className;
  var classRegExp = /(^| )(\S+)( |$)/g;
  var classResult;
  while (classResult = classRegExp.exec(className)) {
    var oneClass = classResult[2];
    var rule = this.rules[oneClass];
    if (typeof rule != "undefined") {
      if (!rule.test(field.value)) {
        $(field).addClass('invalid').removeClass('valid');
      }
      else {
        $(field).addClass('valid').removeClass('invalid');
      }
    }
  }
},
statusListener: function(form) {
    var failure = false;
  for (var i = 0; i < this.fields.length; i++) {
    var className = this.fields[i].className;
    var classRegExp = /(^| )(\S+)( |$)/g;
    var classResult;
    while (classResult = classRegExp.exec(className)) {
      var oneClass = classResult[2];
      var rule = this.rules[oneClass];
      if (typeof rule != "undefined") {
        if (!rule.test(this.fields[i].value)) {
          failure = true;
        }
      }
    }
  }
  if (failure === true) {
    $('#submit-btn').removeClass('success').attr('disabled', 'disabled');
  }
  else {
    $('#submit-btn').addClass('success').removeAttr('disabled');
  }
},
submitListener: function(form) {
    var failure = false;
    formSentinel.submitting = true;
  for (var i = 0; i < this.fields.length; i++) {
    var className = this.fields[i].className;
    var classRegExp = /(^| )(\S+)( |$)/g;
    var classResult;
    while (classResult = classRegExp.exec(className)) {
      var oneClass = classResult[2];
      var rule = this.rules[oneClass];
      if (typeof rule != "undefined") {
        if (!rule.test(this.fields[i].value)) {
          $(this.fields[i]).removeClass('valid').addClass('invalid');
          failure = true;
        }
        else {
          $(this.fields[i]).removeClass('invalid').addClass('valid');
        }
      }
    }
  }
  if (failure) {
    $('#msg').fadeOut().remove();   
    $('#cf-header').after('<div id="msg" style="display: none;">Your form was not submitted. Please make sure that you have filled out the highlighted fields correctly.</div>');
    $('#msg').fadeIn();
     //}
    formSentinel.submitting = false;
    return false;
  }
  else {
    $.ajax({
        type: 'POST',
        url: '/',
        data: $(form).serialize(),
        success: function(data) {
          if ($(data).find('#success-msg').length > 0) {
            var successMsg = $(data).find('#success-msg');
              $('#msg, p.error, #cf-fieldset').fadeOut().remove();
              $('#cf-header').after('<div id="msg" style="display: none;"></div>');
              $('#msg').html(successMsg);
              $('#msg').fadeIn();
          }
          else if ($(data).find('#error-msg .error').length > 0) {
            var errorMsg = $(data).find('#error-msg .error');
              $('#msg').fadeOut().remove();
              $('#cf-header').after('<div id="msg" style="display: none;"></div>');
              $('#msg').html(errorMsg);
              $('#msg').fadeIn();
          }
          formSentinel.submitting = false;
        }
    });
      }
    }
  }
  $.fn.formSentinel = function() {

    return this.each(function() {
      formSentinel.init(this);
    });

  };

})(jQuery); 


$('#request-form').formSentinel();

$('a[href^="mailto:"]').each(function() {
    var self = $(this);
    var obscuredEmail = this.href.replace(/mailto:/g, '');
    var unobscuredEmail = obscuredEmail.replace(/\/at\//g, '@');
    self.attr('href', 'mailto:' + unobscuredEmail).text(self.text().replace(obscuredEmail, unobscuredEmail));
});

；（函数（$）{
var formSentinel={
提交：错误，
字段：[]，
规则：{
必填项：/。/，
requiredNoWhitespace:/\S/，
电子邮件：/\S/
},
init：函数（形式）{
this.fields=form.elements；
$（“#提交btn”）.removeClass（'success'）.attr（'disabled'，'disabled'）；
对于（var i=0；i0）{
var successsg=$（数据）.find（“#success msg”）；
$（'#msg，p.error，#cf fieldset'）.fadeOut（）.remove（）；
$（'#cf header'）。在（''）之后；
$（'#msg'）.html（successsg）；
$（'#msg'）.fadeIn（）；
}
else if（$（数据）.find（'#error msg.error'）.length>0）{
var errorMsg=$（数据）.find（'#error msg.error'）；
$（'#msg'）.fadeOut（）.remove（）；
$（'#cf header'）。在（''）之后；
$（'#msg'）.html（errorMsg）；
$（'#msg'）.fadeIn（）；
}
formSentinel.submitting=false；
}
});
}
}
}
$.fn.formSentinel=函数（）{
返回此值。每个（函数（）{
formSentinel.init（本）；
});
    <form action="#request-form" method="post" id="request-form" class="form" autocomplete="off">
    <input type="hidden" name="consultForm" value="consultForm">          
    <div class="contact-heading project"><h4 id="cf-header">Send direct transmission</h4></div>                  
    <hr class="contactrule" />

    <fieldset id="cf-fieldset">

      <div class="form-field">
      <label for="name">Full Name</label>
        <input type="text" name="name" id="name" placeholder="Full Name" class="requiredNoWhitespace " value="">            
      </div>

      <div class="form-field">
      <label for="email">Email</label>
        <input type="email" name="email" id="email" placeholder="Email" class="requiredNoWhitespace " value="">            
      </div>

      <div class="form-field">
      <label for="phone">Phone Number</label>
        <input type="text" name="phone" id="phone" placeholder="Phone Number" class="requiredNoWhitespace " value="">            
      </div>

      <div class="form-field">
      <label for="type">Project Details</label>
        <input type="text" name="message" id="type" placeholder="Your Message or Project Details" class="requiredNoWhitespace " value="">            
      </div>

      <button type="submit" name="submit" class="submit" id="submit-btn">Transmit</button>
   </fieldset>
 </form>

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$formcontent=" From: $name \n Phone: $phone \n Message: $message";
$recipient = "theperfectpixels@gmail.com";
$subject = "Sam Norris - Design & Development";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
?>