Ajax Contact Form with one-page design HTML 5

[Grammy]

This is non-SMF related; based on this topic, I hope it's okay to post it here.

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. (I ditched the music, right out of the gate, very cheesy.)

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 and not break its flow, 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:

Code Select Expand

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

Code Select Expand

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

Code Select Expand

    <?php
    // To
    define("WEBMASTER_EMAIL", '[email protected]');
    ?>

As so: 

   

Code Select Expand

<?php
    // To
    define("WEBMASTER_EMAIL", '[email protected]');
    ?>

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.)  No mail arrives.  I am seeing no console errors.

Thank you for any insight and help.

[Grammy]

In this portion of code contained in contact.php, would someone please show me the correct way to echo out the values of $_SESSION['captcha_keystring'] and $_POST["captcha"]?  I'm not quite sure where to place it within the string or how to express it.   

Code Select Expand

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


if(!$error)
{

$mail = mail(WEBMASTER_EMAIL, $subject, $message,
     "From: ".$name." <".$email.">\r\n"
    ."Reply-To: ".$email."\r\n"
    ."X-Mailer: PHP/" . phpversion());

if($mail)
{
echo 'OK';
}

[Suki]

You are using .serialize() to send the entire form which means your $_POST var will be a serialized string. $_POST['captcha'] won't be set and thus, the script will never gonna pass beyond this check:

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


You have two options, either leave the .serialize() call and perform a call to unserialize() on your .php script to get the real data  or don't pass the form data as a serialize string.

Your contact.php needs to be almost completely re-written to  avoid security risks.  It will also need to be changed if you want to have proper response form the server, for example, put a header to indicate the response its plain text  or use json which is more handy for cases like this.

As for the way to print $_POST and $_SESSION  since you are using ajax, it becomes somehow difficult to do so. You can echo the vars but you won't see anything on the browser itself, you will have to use console.log() on your javascript code to "print" the server response and use your browser inspection tools to see it.

[Grammy]

Thank you, Suki.  This has been difficult for me because the form came "out of the box" with the template I purchased and having to keep it within the confines of an HTML page (as a page anchor) and do so without breaking the one-page design or causing page reloads has made me feel very restricted.

The form's opening tag calls the action to be this: 

Code Select Expand

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

Was I correct to change it to this (or should I have left it as it was?

Code Select Expand

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

(I couldn't understand why the template designer had the action as a JavaScript alert; but it just felt as if the action should have been relative to the contact.php page.  Also, I wasn't sure if the method should be "post" instead of "get".)

I'll study what you've mentioned I should try and thank you again!

[Suki]

I assume the alert() bit was just a dummy thing the creator added to the form.

Since you are suing javascript/ajax it doesn't really matter what you put as ation inside the form, the javascript code will overwrite that part:

The return false at the end of this:

$("#ajax-contact-form").submit(function() {

tells the browser to ignore whatever action the form has.