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:
<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>
[COLOR="#FF0000"]<?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>';
}
?>[/COLOR]
<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 :
<!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>
