Ajax contact form within one-page HTML5 design not functioning

Question

I purchased a web template but there is no post-purchase support. It is a one-page HTML5 design. The menu buttons link to page anchors within the index.html (page_ABOUT, page_SERVICES, etc). The site is designed so that the linked page anchors slide smoothly into place between static z-indexed images. A working demo of the template CAN BE SEEN HERE.

My issue involves the about_CONTACTS page anchor. I have other contact pages on other sites that work well, but those are PHP pages (i.e., contact.php). In order to stay within the confines of this design, I need to be able to make the about_CONTACTS page function within the single HTML page. (Opting to create a separate PHP contact page breaks the design's slide function and causes a page reload.) The block of code for the about_CONTACTS page form is:

<form id="ajax-contact-form" action="javascript:alert('success!');">
<div class="clear"></div>
<label>Your full name:</label>
<INPUT class="textbox left " type="text" name="name" value="">
<div class="clear"></div>
<label >E-Mail:</label>
<INPUT class="textbox left" type="text" name="email" value="">
<div class="clear"></div>
<label >Phone Number:</label>
<INPUT class="textbox left" type="text" name="phone" value="">
<div class="clear"></div>
<label >Message:</label>
<TEXTAREA class="textbox left" NAME="content" ROWS="5" COLS="25"></TEXTAREA>
<div class="clear"></div>
<label>Captcha:</label>
<img src="captcha/captcha.php" style="margin:3px 0px; width:100px; height:32px; float:left;">
<INPUT class="textbox" type="text" name="capthca" value="" style=" width:90px; float:left; margin-left:10px; margin-top:2px">
<div class="clear"></div>
<INPUT class="pin" type="submit" name="submit" value="submit">
</form>

The JavaScript between the head tags is:

<script type="text/javascript">                                     
$(document).ready(function()
{ 
  $("#ajax-contact-form").submit(function() { 
    var str = $(this).serialize();      
    $.ajax({ 
      type: "POST", 
      url: "contact.php", 
      data: str, 
      success: function(msg)
      { 
        if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
        { 
          result = '<div class="notification_ok">Your message has been sent. Thank you!<br> <a href="#" onclick="freset();return false;">send another mail</a></div>'; $("#fields").hide(); 
        }
        else { 
          result = msg; 
        } 
        $("#note").html(result); 
      } 
    }); 
    return false; 
   }); 
});

function freset()
{   
  $("#note").html('');  
  document.getElementById('ajax-contact-form').reset();
  $("#fields").show();
}

</script>

The form calls for contact.php, the contents of which CAN BE SEEN HERE. Contact.php calls for the inclusions of contact_config.php (contents of file CAN BE SEEN HERE) and functions.php (contents CAN BE SEEN HERE).

I placed the intended send/receive email address in contact_config.php:

<?php
// To
define("WEBMASTER_EMAIL", 'email@companyname.com');
?>

As so:

<?php
// To
define("WEBMASTER_EMAIL", 'me@mydomain.com');
?> 

Would you please advise why the submit button does not respond to a click and why no mail is being sent? I've never used this type of form before and while I'm sure I'm meant to edit something else, I'm at a loss as to what and where to edit. (I have taken great care to be sure that captchas are entered correctly. I am receiving neither error messages nor success messages. There is no response at all, when attempting to submit a message via the contact form.)

Answer 1

As per the comments, the solution is along the following lines:

a) change your form tag from

<form id="ajax-contact-form" action="javascript:alert('success!');">

to

<form id="ajax-contact-form" action="contact.php" method="post">

Your version is invalid - the action should specify where the form sends its data to, and the method is required in order to force a postback (otherwise it uses GET by default, which your PHP is not set up to deal with (you are reading $_POST variables).

b) check the values of $_SESSION['captcha_keystring'] and $_POST["capthca"] to make sure they really contain what you think they do. e.g

e.g. (just for the purposes of debugging - don't leave this in for production use!):

$error .= "Captcha keystring: ".strtolower($_SESSION['captcha_keystring']);
$error .= " User-entered captcha: ".strtolower($_POST['capthca']);

if(isset($_SESSION['captcha_keystring']) && strtolower($_SESSION['captcha_keystring']) != strtolower($_POST['capthca']))
{
  $error .= "Incorect captcha.<br />";
}

Also make sure that your HTML captcha textbox has the correct name attribute (name="capthca") to match your PHP $_POST["capthca"].