在单页网站上建立联系表单/脚本

由于某些原因，我似乎总是很难设置联系表单和邮件脚本等等……这一次是一个单页网站(我自己的投资组合)，因此需要一个动态的解决方案，没有页面刷新或外部链接等。这方面我不是很有经验。

我的网址是:http://www.samnorris.co.nz

我一直在努力学习http://www.alwayscreative.net的网站，以及他们是如何建立自己的。表单在GitHub上使用一个名为FormSentinel的小jQuery插件来处理验证方面的事情-这似乎工作得很好，提交按钮被禁用，直到表单完成并提示正确的电子邮件地址，问题是当提交/'传输'按钮被点击时什么也没发生。

这大概是因为我没有链接到实际处理表单的任何PHP脚本，因为我不确定在这种情况下它实际上是从哪里调用的。我有一个非常基本的邮件。PHP在我的服务器的根-但从看alwaycreative网站的表单动作链接回到页面本身，并没有参考任何PHP或邮件脚本在FormSentinel jquery(或文档或任何事情…)

我只是有点困惑(好吧，很多困惑)，如何或在哪里建立一个链接到PHP处理脚本的形式，而不导致任何其他外部链接/页面。使用FormSentinel插件，页面应该淡出表单，并在包含字段集的地方加载一个简短的"Thankyou"消息，但这也不会发生。

表单:

的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));
});

表单本身:

    <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>

这是我最基本的mail.php，我只是从谷歌的某个地方抓来的(我现在对PHP不太精通，所以…)

<?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!");
?>

像往常一样，我将非常感谢任何帮助!