http://codecanyon.net/item/ajax-contact-form/full_screen_preview/50846

I bought this contact form that validates and produces a message when its complete. The validation messages are all in with the form.

But when I try to integrate it into my page "contact.html", the validation messages popup in a new window "contact.php" and I dont know how to get it to work.

I have tried putting it all into one file "contact.php" but then the validation messages appear at the bottom of the page.

Here is the code, please someone explain it to me and tell me where the html goes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HDF</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/contact-pop.css" />
<link type="text/css" rel="stylesheet" href="css/multibox.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="java/jquery.nivo.slider.js" type="text/javascript"></script>

<link href="css/contact.css" rel="stylesheet" type="text/css" /> 
<!-- AJAX Contact Form Stylesheet -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="java/jquery.jigowatt.js"></script><!-- AJAX Form Submit -->

<!--The java files below are used for the pop-up image on the planning and portfolio pages -->
<script src="java/mootoolsfull.js" type="text/javascript"></script>
<script src="java/overlay.js" type="text/javascript"></script>
<script src="java/multibox.js" type="text/javascript"></script>
<!--END -->

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
</head>
<body>               

                    <div id="contact">

                    <h1><abbr title="Asynchronous Javascript and XML">Hollways</abbr> Contact Form</h1>

                    <div id="message"></div>

                    <form method="post" action="contact.php" name="contactform" id="contactform">

                    <fieldset>

                    <legend>Please fill in the following form to contact us</legend>

                    <label for="name" accesskey="U"><span class="required">*</span> Your Name</label>
                    <input name="name" type="text" id="name" size="30" value="" />

                    <br />
                    <label for="email" accesskey="E"><span class="required">*</span> Email</label>
                    <input name="email" type="text" id="email" size="30" value="" />

                    <br />
                    <label for="phone" accesskey="P"><span class="required">*</span> Phone</label>
                    <input name="phone" type="text" id="phone" size="30" value="" />

                    <br />
                    <label for="subject" accesskey="S">Subject</label>
                    <select name="subject" id="subject">
                      <option value="General">General</option>
                      <option value="Accounts">Accounts</option>
                      <option value="Estimate">Estimation</option>
                      <option value="Sales">Sales</option>
                      <option value="Technical">Technical</option>
                    </select>

                    <br />
                    <label for="comments" accesskey="C"><span class="required">*</span> Your comments</label>
                    <textarea name="comments" cols="40" rows="3" id="comments" style="width: 350px;"></textarea>

                    <p><span class="required">*</span> Are you human?</p>

                    <label for="verify" accesskey="V">&nbsp;&nbsp;&nbsp;3 + 1 =</label>
                    <input name="verify" type="text" id="verify" size="4" value="" style="width: 30px;" /><br /><br />

                    <input type="submit" class="submit" id="submit" value="Submit" />

                    </fieldset>

                    </form>

                    </div>

</body>
</html>

<?php

if(!$_POST) exit;

// Email address verification, do not edit.
function isEmail($email) {
    return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i",$email));
}

if (!defined("PHP_EOL")) define("PHP_EOL", "\r\n");

$name     = $_POST['name'];
$email    = $_POST['email'];
$phone   = $_POST['phone'];
$subject  = $_POST['subject'];
$comments = $_POST['comments'];
$verify   = $_POST['verify'];

if(trim($name) == '') {
    echo '<div class="error_message">Attention! You must enter your name.</div>';
    exit();
} else if(trim($email) == '') {
    echo '<div class="error_message">Attention! Please enter a valid email address.</div>';
    exit();
} else if(trim($phone) == '') {
    echo '<div class="error_message">Attention! Please enter a valid phone number.</div>';
    exit();
} else if(!is_numeric($phone)) {
    echo '<div class="error_message">Attention! Phone number can only contain digits.</div>';
    exit();
} else if(!isEmail($email)) {
    echo '<div class="error_message">Attention! You have enter an invalid e-mail address, try again.</div>';
    exit();
}

if(trim($subject) == '') {
    echo '<div class="error_message">Attention! Please enter a subject.</div>';
    exit();
} else if(trim($comments) == '') {
    echo '<div class="error_message">Attention! Please enter your message.</div>';
    exit();
} else if(!isset($verify) || trim($verify) == '') {
    echo '<div class="error_message">Attention! Please enter the verification number.</div>';
    exit();
} else if(trim($verify) != '4') {
    echo '<div class="error_message">Attention! The verification number you entered is incorrect.</div>';
    exit();
}

if(get_magic_quotes_gpc()) {
    $comments = stripslashes($comments);
}


// Configuration option.
// Enter the email address that you want to emails to be sent to.
// Example $address = "joe.doe@yourdomain.com";

//$address = "example@themeforest.net";
$address = "dan_dixon84@yahoo.co.uk";


// Configuration option.
// i.e. The standard subject will appear as, "You've been contacted by John Doe."

// Example, $e_subject = '$name . ' has contacted you via Your Website.';

$e_subject = 'You\'ve been contacted by ' . $name . '.';


// Configuration option.
// You can change this if you feel that you need to.
// Developers, you may wish to add more fields to the form, in which case you must be sure to add them here.

$e_body = "You have been contacted by $name with regards to $subject, their additional message is as follows." . PHP_EOL . PHP_EOL;
$e_content = "\"$comments\"" . PHP_EOL . PHP_EOL;
$e_reply = "You can contact $name via email, $email or via phone $phone";

$msg = wordwrap( $e_body . $e_content . $e_reply, 70 );

$headers = "From: $email" . PHP_EOL;
$headers .= "Reply-To: $email" . PHP_EOL;
$headers .= "MIME-Version: 1.0" . PHP_EOL;
$headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
$headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;

if(mail($address, $e_subject, $msg, $headers)) {

    // Email has sent successfully, echo a success page.

    echo "<fieldset>";
    echo "<div id='success_page'>";
    echo "<h1>Email Sent Successfully.</h1>";
    echo "<p>Thank you <strong>$name</strong>, your message has been submitted to us.</p>";
    echo "</div>";
    echo "</fieldset>";

} else {

    echo 'ERROR!';

}
?>
Member Avatar for iamthwee

Are you running this from localhost?

Member Avatar for Zagga

Hi,

This form is designed to show any validation (or success) messages under the form as it prints the form first (although this may be changed by the CSS or JavaScript files). To change this you will need to reorder the PHP so messages are displayed somewhere else.

The form also sends the data to contact.php as defined on line 38. If you want to send the results somewhere else (contact.html) you can edit this line, but that will remove all validation as validation is done in contact.php.

If you bought the script from someone, I suggest you contact the author for assistance.

Sorry I found the problem, there is a n query file that places the messages where they should go and this wasn't conflicting with some other jquery files that stopped it working. Stripped it down to bare bones and it works great

Thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.