Question

由于某些原因，我似乎总是遇到困难的是设置联系表单和邮件脚本以及所有内容......这次是针对单页网站（我自己的投资组合），因此需要动态解决方案而不需要刷新页面或外部链接等。我不太熟悉的东西。

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

我一直在尝试从http://www.alwayscreative.net的网站上学习，以及他们如何建立他们的网站。该表单在GitHub上使用一个名为FormSentinel的小jQuery插件来处理事情的验证方面 - 这似乎运行良好，提交按钮被禁用，直到表单完成并提示输入正确的电子邮件地址，问题是单击提交/'传输'按钮时没有任何反应。

这可能是因为我没有链接到实际处理表单的任何PHP脚本，因为我不确定在这种情况下实际调用它的位置。我在我的服务器的根目录上有一个非常基本的mail.php - 但是从查看AlwaysCreative网站，表单操作链接回页面本身，并且没有引用FormSentinel jquery中的任何PHP或邮件脚本（或文档或任何事情......）

我只是有点困惑（好吧，很多困惑）关于如何或在何处确切地建立到表单的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 ，我只是在某个地方抓住了Google（我目前对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!");
?>

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

Answer 1

表单似乎发布到网站的根目录。您的PHP脚本（通常是index.php）将存在并包含if以检查请求类型是否为POST - 然后处理邮件部分。否则，如果请求是GET，则在原始帖子中输出JS和HTML .. 是否有任何原因必须在一个页面/文件中？

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

1 个答案: