Setting up contact form/script on single page website

Question

Something I always seem to have difficulty with for some reason is setting up contact forms and the mail scripts and everything...this time for a single-paged website (my own portfolio) and thus requiring a dynamic solution without pages refreshes or external links ect. Something which I am not very experienced with.

My site is: http://www.samnorris.co.nz

I have been trying to learn from the website of http://www.alwayscreative.net and how they have theirs set up. The form uses a small jQuery plugin on GitHub called FormSentinel to handle the validation side of things - which seems to be working well enough, the submit button is disabled until the form is completed and it prompts for a correct e-mail address, the problem is that nothing happens when the submit/'Transmit' button is clicked.

This is presumably because I have not linked to any PHP script for actually processing the form, as I am unsure where it is actually called from in this scenario. I have a very basic mail.php on the root of my server - but from looking at the AlwaysCreative website the form action links back to the page itself and there is no reference to any PHP or mail scripts in the FormSentinel jquery (or documentation or anything for that matter...)

I'm just a bit confused (okay, a lot confused) as to how or where exactly to establish a link to a PHP processing script for the form without leading to any other external links/pages. With the FormSentinel plugin the page should fade out the form and load in a short "Thankyou" message in place of the containing fieldset but that's not happening either.

Javascript for the form:

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

The form itself:

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

This is my extremely basic mail.php which I simply grabbed off Google somewhere (I am not overly proficient in PHP at the moment, so...)

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

As usual I would greatly appreciate any help with this!

Answer 1

The form appears to post to the root of the site. Your PHP script (usually index.php) would be there and contain an if to check whether the request type was a POST - then handle the mailing part. Otherwise if the request was a GET then output the JS and HTML in your original post.. Is there any reason this has to be in one page/file?