Good stuff!
Now, take this script, change your email address accordingly and save it as “contact.php” in your MAMP “htdocs” folder .
Then navigate to http://localhost:8888/contact.php, fill out the form and submit it.
If everything goes well, you should receive a mail with the appropriate details and you should be redirected to the same page, namely: http://localhost:8888/contact.php?success=1
You should also see a message at the top of the contact form which says “Mail sent successfully”.
<?php
$name = '';
$email = '';
$landline = '';
$mobile = '';
$message = '';
if ($_POST['s'] == 's'){
$name = filter_var($_POST['name'],FILTER_SANITIZE_STRING);
$email = filter_var($_POST['email'],FILTER_SANITIZE_STRING, FILTER_VALIDATE_EMAIL);
$landline = filter_var($_POST['landline'], FILTER_SANITIZE_STRING);
$mobile = filter_var($_POST['mobile'], FILTER_SANITIZE_STRING);
$message = filter_var($_POST['message'],FILTER_SANITIZE_STRING);
$robotest = $_POST['robotest'];
if($robotest){
exit("Sorry, we think you're a bot!");
}
if (empty($name)){
$error .= "You didn't enter a name <br />";
}
if (empty($email)){
$error .= "You didn't enter an email address <br />";
} elseif (!eregi("^[_a-z0-9-]+(\\.[_a-z0-9-]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,})\\.?$", $email)){
$error .= "The email address appears to be invalid <br />";
}
if (empty($landline)){
$error .= "You didn't enter a landline number <br />";
} elseif (!eregi("^[0-9()+\\s-]+$", $landline)){
$error .= "Phone number can only contain digits, spaces, brackets, plus or minus <br />";
}
// Optional Field
if (!empty($mobile) && !eregi("^[0-9()+\\s-]+$", $mobile)){
$error .= "Mobile number can only contain digits, spaces, brackets, plus or minus <br />";
}
if (empty($message)){
$error .= "You didn't enter a message <br />";
}
if (empty($error)) {
$toaddress = "your mail address here";
$fromaddress = "From:". $email;
$mailcontent = "Name: ". $name. "\
".
"Email: ". $email. "\
".
"Landline: ". $landline. "\
".
"Mobile: ". $mobile. "\
\
".
$message;
mail($toaddress, "Website Contact Form", $mailcontent, $fromaddress);
header("location:" . $_SERVER['PHP_SELF'] . "?success=1");
}
}
?>
<!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*/
.robotic { display:none; }
.success {font-size: 15px; color: white; margin: 0 0 15px 5px; border: solid 1px green; padding:10px;}
.error {font-size: 15px; color: yellow; margin: 0 0 15px 5px; border: solid 1px yellow; padding:10px;}
/*CONTACT FORM - LEFT DIV*/
</style>
</head>
<body>
<div id="input_wrapper">
<?php
if ($_GET['success']){
echo('<div class="success">Your message has been sent successfully!<br />We will be in touch soon.</div>');
} else if (isset($error)){
echo('<div class="error">' . $error. '</div>');
}
?>
<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 *" value="<?php echo htmlspecialchars($name, ENT_QUOTES); ?>" />
</li>
<li>
<label for="email">Email:</label>
<input type="text" name="email" id="email" placeholder="Enter your email address *" value="<?php echo htmlspecialchars($email, ENT_QUOTES); ?>"/>
</li>
<li>
<label for="telephone">Phone:</label>
<input type="text" name="landline" id="landline" placeholder="Enter your landline number *" value="<?php echo htmlspecialchars($landline, ENT_QUOTES); ?>"/>
</li>
<li>
<label for="mobile">Mobile:</label>
<input type="text" name="mobile" id="mobile" placeholder="Enter your mobile number *" value="<?php echo htmlspecialchars($mobile, ENT_QUOTES); ?>"/>
</li>
<li>
<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Enter your message here...*"><?php echo htmlspecialchars($message, ENT_QUOTES); ?></textarea>
</li>
<!-- The following field is for robots only, invisible to humans: -->
<li class="robotic">
<label for="robotest">If you're human leave this blank:</label>
<input type="text" id="robotest" name="robotest" class="robotest" />
</li>
<li>
<input type="hidden" value="s" name="s" />
<input type="submit" value="submit" class="submit"/>
</li>
</ul>
</form>
</div>
<script>
// form validation function //
function validate(form) {
var name = form.name.value;
var email = form.email.value;
var message = form.message.value;
var nameRegex = /^[a-zA-Z]+(([\\'\\,\\.\\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
var emailRegex = /^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$/;
var messageRegex = new RegExp(/<\\/?\\w+((\\s+\\w+(\\s*=\\s*(?:".*?"|'.*?'|[^'">\\s]+))?)+\\s*|\\s*)\\/?>/gim);
if(name == "") {
inlineMsg('name','Please enter your name!',2);
return false;
}
if(!name.match(nameRegex)) {
inlineMsg('name','Please enter an invalid name!',2);
return false;
}
if(email == "") {
inlineMsg('email','<strong>Error!</strong> Please enter your email!',2);
return false;
}
if(!email.match(emailRegex)) {
inlineMsg('email','<strong>Error!</strong> This email is invalid!',2);
return false;
}
if(message == "") {
inlineMsg('message','Please enter your message!');
return false;
}
if(message.match(messageRegex)) {
inlineMsg('message','This message is invalid!');
return false;
}
return true;
}
// START OF MESSAGE SCRIPT //
var MSGTIMER = 20;
var MSGSPEED = 5;
var MSGOFFSET = 3;
var MSGHIDE = 3;
// build out the divs, set attributes and call the fade function //
function inlineMsg(target,string,autohide) {
var msg;
var msgcontent;
if(!document.getElementById('msg')) {
msg = document.createElement('div');
msg.id = 'msg';
msgcontent = document.createElement('div');
msgcontent.id = 'msgcontent';
document.body.appendChild(msg);
msg.appendChild(msgcontent);
msg.style.filter = 'alpha(opacity=0)';
msg.style.opacity = 0;
msg.alpha = 0;
} else {
msg = document.getElementById('msg');
msgcontent = document.getElementById('msgcontent');
}
msgcontent.innerHTML = string;
msg.style.display = 'block';
var msgheight = msg.offsetHeight;
var targetdiv = document.getElementById(target);
targetdiv.focus();
var targetheight = targetdiv.offsetHeight;
var targetwidth = targetdiv.offsetWidth;
var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
msg.style.top = topposition + 'px';
msg.style.left = leftposition + 'px';
clearInterval(msg.timer);
msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
if(!autohide) {
autohide = MSGHIDE;
}
window.setTimeout("hideMsg()", (autohide * 1000));
}
// hide the form alert //
function hideMsg(msg) {
var msg = document.getElementById('msg');
if(!msg.timer) {
msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
}
}
// face the message box //
function fadeMsg(flag) {
if(flag == null) {
flag = 1;
}
var msg = document.getElementById('msg');
var value;
if(flag == 1) {
value = msg.alpha + MSGSPEED;
} else {
value = msg.alpha - MSGSPEED;
}
msg.alpha = value;
msg.style.opacity = (value / 100);
msg.style.filter = 'alpha(opacity=' + value + ')';
if(value >= 99) {
clearInterval(msg.timer);
msg.timer = null;
} else if(value <= 1) {
msg.style.display = "none";
clearInterval(msg.timer);
}
}
// calculate the position of the element in relation to the left of the browser //
function leftPosition(target) {
var left = 0;
if(target.offsetParent) {
while(1) {
left += target.offsetLeft;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.x) {
left += target.x;
}
return left;
}
// calculate the position of the element in relation to the top of the browser window //
function topPosition(target) {
var top = 0;
if(target.offsetParent) {
while(1) {
top += target.offsetTop;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.y) {
top += target.y;
}
return top;
}
// preload the arrow //
if(document.images) {
arrow = new Image(7,80);
arrow.src = "images/msg_arrow.gif";
}
</script>
</body>
</html>
Does that work for you?
Welcome to the wonderful world of abstinence
I had such a raving non-hangover this morning I got up at 6:30!