A complete newcomer to Javascript and PHP... I have now spent more time on the contact form than the rest of entire site put together!!!!

I have a working (so far as I know) contact form. However it has zero in the way of security and came across a honeypot trap at:http://devgrow.com/simple-php-honey-pot/

I have my own contact form with Javascript validation and would like to add the Honey Pot part only. I have my own Javascript error messages so what parts of the example PHP would I need to integrate and whats parts would I leave out?

Below is the Honey Pot example and below that is my contact form.

I think after I finish this contact form I'm going to start to study the various books on Javascript & PHP I bought recently!

Honey Pot Example:
Code:
<html>
<head>
<title>Honey pot test</title>
<!-- This example and tutorial can be found at http://devgrow.com/simple-php-honey-pot -->
<style>
	/* Optional Styling: */
	body { background: #fafafa; font-size: 13px; font-family: Verdana; padding: 40px; }
	fieldset { width: 280px; background: #fff; padding: 10px; display: block; }
	legend { font-size: 18px; margin: 0; }
	input, textarea { margin: 0; padding: 3px; border: 1px solid #aaa; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; width: 278px }
	label { width: 100%; font-weight: bold; float: left; }
	.submit { background: #444; color: #fff; width: inherit; border: none; padding: 5 10px; cursor: pointer; } .submit:hover { background: #000; }
	.msg { padding: 10px; border: 1px solid #ccc; background: #fff; width: 285px; margin: 0 0 20px; }
	.msg.success { border-color: #86a62f; background: #faffec; }
	.msg.error { border-color: #cd5a5a; background: #fff7f7; }
	
	/* Required for Honey Pot: */
	.robotic { display: none; }
</style>
<script type="text/javascript">
	function showpot() {
		document.getElementById("pot").className = "";
		return false;
	}
</script>
</head>
<body>
<?php
	if($_POST){
		$to = 'your-email-here@gmail.com';
		$subject = 'Contact Form Submission';
		$from_name = $_POST['name'];
		$from_email = $_POST['email'];
		$message = $_POST['message'];
		$robotest = $_POST['robotest'];
		if($robotest)
			$error = "You are a gutless robot.";
		else{
			if($from_name && $from_email && $message){
				$header = "From: $from_name <$from_email>";
				if(mail($to, $subject, $message, $header))
					$success = "You are human and your message was sent!";
				else
					$error = "You are human but there was a problem sending the e-mail.";
			}else
				$error = "All fields are required.";
		}
		if($error)
			echo '<div class="msg error">'.$error.'</div>';
		elseif($success)
			echo '<div class="msg success">'.$success.'</div>';
	}
?>
<form method="post" action="">
	<fieldset>
		<legend>Contact Me</legend>
		<p>
			<label>Name:</label>
			<input name="name" type="text" id="name" />
		</p>
		<p>
			<label>E-mail:</label>
			<input name="email" type="text" id="email" />
		</p>
		<p>
			<label>Message:</label>
			<textarea name="message" id="message"></textarea>
		</p>
		<!-- The following field is for robots only, invisible to humans: -->
		<p class="robotic" id="pot">
			<label>If you're human leave this blank:</label>
			<input name="robotest" type="text" id="robotest" class="robotest" />
		</p>
		<p>
			<input type="submit" value="Send Message" class="submit" />
		</p>
	</fieldset>
</form>
<br />
<a href="#" onClick="showpot();">Show honey pot field?</a><br />
<a href="http://devgrow.com/simple-php-honey-pot/">View Tutorial</a>
</body>
</html>
My Contact Form - Work in Progress :
Code:
<!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>Pete's Contact Form with jQuery Validation</title>
<script type="text/javascript" src="js/messages.js"></script>
 
<style type="text/css">

* {font-family: Arial, Helvetica, sans-serif;}
	
body { background-color: #999;}
.form label { font-size: 90%;} 
.required_notification { font-size: 80%;} 
	   

 /*CONTACT FORM - LEFT DIV*/
#input_wrapper { width: 500px;
				padding: 10px 20px 20px 20px; 
				background: #555;
             	background: -moz-linear-gradient(top, #444 0%, #666 50%); /* firefox */
	            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444), color-stop(50%, #666)); /* webkit */
	            border-radius: 3px;
	           -moz-border-radius: 3px;
	           -webkit-border-radius: 3px;
	           -webkit-box-shadow: 0px 2px 2px #333333;
	            box-shadow: 0px 2px 2px #333333;}

/*Padding/margins/borders/outlines settings*/
input, textarea {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;}
	
/*Border Bottom*/		
.form li:first-child, .contact_form li:last-child {
	border-bottom:1px solid #CCC;}
/*Border Bottom*/	

/*Padding/margins/borders/outlines*/


/*No glowing edges to inputs!!!*/
*:focus {outline: none;}
/*No glowing edges to inputs!!!*/
	
/*Header*/	
.form h3 {
	margin:0px;
	display: inline;}
	
.required_notification {
	color: #F06; /*#27AECF*/
	margin:5px 0 0 0; 
	display:inline;
	float:right;}
/*Header*/	


/*Contact form labels*/
.form ul {
    width:500px;
    list-style-type:none;
	list-style-position:outside;
	margin:0px;
	padding:0px;}

.form li{
	color:#FFF;
	padding:10px; 
	border-bottom:1px solid #999;
	position:relative;}
	
	
.form label {
	width:80px;
	margin-top: 2px;
	display:inline-block;
	float:left;
	padding:3px;}
	
#msg {display:none; 
      font-size:75%;
      position:absolute; 
	  z-index:200; 
	  background: url(images/msg_arrow.gif) left center no-repeat; 
	  padding-left:7px;}
	  
#msgcontent {display:block; 
              background: #D6D6D6; 
			  border:2px solid #F06; 
			  border-left:none; 
			  padding:5px; 
			  min-width:192px; 
			  max-width:192px;}
	  
			  
/*Contact form labels*/


/*Contact form inputs*/
.form input:focus, .form textarea:focus { background-color: #EBEBEB;}

/*Contact form text fields*/
.form input { 
    font-family:Arial, Helvetica, sans-serif;
	font-size: 80%;
 	background-color: #D6D6D6;
	/*border:1px solid #aaa;*/ 
	height:20px; 
	width:180px; 
	margin: 0px;
	padding:2px 5px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;}
/*Contact form text fields*/


/*Contact textarea*/
.form textarea { font-family:Arial, Helvetica, sans-serif; 
                         font-size: 80%;
                         width: 240px;
                         height: 100px;
                         padding: 5px 5px;
                         background-color: #D6D6D6;/*padding-right:30px;*/
		                 /*border:1px solid #aaa;*/
		                 border-radius: 2px;
                     	 -moz-border-radius: 2px;
	                     -webkit-border-radius: 2px;}
/*Contact textarea*/	
					 
/*Contact form inputs*/


/*input/textarea placeholder text*/
input::-webkit-input-placeholder { color: #777;}

input:-moz-placeholder { color: #777;}

::-webkit-input-placeholder { color: #777;}
	
:-moz-placeholder { color: #777;}
/*input/textarea placeholder text*/

	
/*sprite email button*/	

input.submit { width: 148px; 
               height: 40px;
	           margin-left: 190px;
	           background-position: 0px 0px;
	           background-color: transparent; /* or #666*/
	           background-image: url(images/email_sprite.png);
	           /*background:transparent url(images/email_sprite.png);*/
	           text-indent: -9999px;
	           display: inline-block; 
	           border:none;
			   outline:none;} 
			   
input.submit:hover { background-position: 0px -40px;}

input.submit:active { background-position: 0px -80px;}

/*sprite email button*/		

/*CONTACT FORM - LEFT DIV*/	
</style>

</head>

<body>
<div id="input_wrapper">
      <form name="form" id="form" class="form" action="" onsubmit="return validate(this)" method="post">
      
        <ul>
        
        <li>
             <h3>Contact Us</h3>
             <span class="required_notification">* Denotes Required Field</span>
        </li>
        
        <li>
          <label for="name">Name:</label>
          <input type="text" name="name" id="name" placeholder="Enter your full name *" />
        </li>
          
        <li>
          <label for="email">Email:</label>
          <input type="text" name="email" id="email" placeholder="Enter your email address *" />
        </li>
      
        <li>
          <label for="telephone">Phone:</label>
          <input type="text" name="landline" id="landline" placeholder="Enter your landline number *" />
        </li>  
          
        <li>  
          <label for="mobile">Mobile:</label>
          <input type="text" name="mobile" id="mobile" placeholder="Enter your mobile number *" />
       </li> 
       
        <li>  
          <label for="message">Message:</label>
          <textarea id="message" name="message" placeholder="Enter your message here...*"></textarea>     
       </li>
       
       <li>
        <input type="submit" value="submit" class="submit"/>
        </li>
       </ul>
      </form>
    </div>
</body>
</html>