May I contribute a bit here?, this is a
contact form I made for a webpage some while ago.
Snippet Name: My contact form?
Keywords: contact, form, err, is, this, like, bloggin?
Description(Optional): read above :P
Its with AJAX, also, its posted on a blog (not yet, I was just working on it :P) where im user, i wont put the link as I dont want to have the name "spammer" on my head so.
So... we will have these files:
index.php <- Will show up the HTML and that stuff
contactform.js <- Will send the AJAX (also, some stuff with jQuery)
jquery.js <- For effects and that stuff
contactform.php <- Will be the file that will be called by contactform.js
loading.gif <- A gif that will replace the form while the message is sent
We will just use 3 fields, so the code doesnt get messy; Name, email, and message (finally, lol).
Alright so, I would like first to start with
index.php file:
Code:
<?php
session_start();
$_SESSION['token']=md5(rand()); // We add this so we get "protected" from bots
?>
<html>
<head>
<title>My contact form</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="contactform.js"></script>
</head>
<body>
<div id="form">
<p>Name:<input type="text" id="name"></p>
<p>Email:<input type="text" id="email"></p>
<p>Message:<textarea id="message"></textarea></p>
<input type="hidden" value="<?php echo $_SESSION['token']; ?>" id="token">
<a href="#" id="send">Send</a>
</div>
<div id="loading" style="display: none;">
<img src="loading.gif">
</div>
<div id="mess" style="display: none;">
</div>
</body>
</html>
Alright, now its time for
contactform.js:
Code:
$(document).ready(function(){
var sending = false;
// we define the var "sending" so we can check that the user doesnt click the send button many times.
var showmess = false;
// this is to hide the "mess" div
$('#send').click(function(){
// when any item with the id send is clicked;
if(sending==false){
if(showmess){
$('#mess').slideToggle();
// we hide it.
}
// we check that the "form" isnt beeing "submited"
sending = true;
var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();
var token = $('#token').val();
// we take the vals from the inputs (also, the token so we can verify it on contactform.php)
var send = jQuery.parseJSON('{"name":"'+name+'","email":"'+email+'","message":"'+message+'","token":"'+token+'"}');
// "prepare" the Json
$.ajax({
type: "POST",
url: "contactform.php",
data: send,
dataType: "json",
beforeSend: function(obj){
// before send, we will want to slide the div with ID form, and show the loading one (wich is actually hidden)
$('#form').slideToggle();
$('#loading').slideToggle();
},
success: function(json){
// we check here what we got from the server side, and depending on what happened, what we will show.
$('#loading').slideToggle();
if(json.status==1){
$('#form').html('Message sent.');
$('#form').slideToggle();
}else{
showmess = true;
$('#form').slideToggle();
sending = false;
$('#mess').html(json.message);
$('#mess').slideToggle();
}
}
});
}
});
});
Now
contactform.php:
Code:
<?php
// we start the session and get the headers for the "return"
session_start();
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 10 Jul 2000 02:00:00 GMT');
header('Content-type: application/json');
// we add this, as im running this script on my localhost, it takes ms to load and i cant see the js effects
sleep(1);
if(!isset($_SESSION['token'])){
// if token isnt there, then.. probably, a bot, or someone trying to play around, we show him what we got!
die();
}else{
// if not.. then we check that the token we got from the html, is the same that we got in the session
$token = isset($_POST['token'])? $_POST['token'] : '';
if($token != $_SESSION['token']){
// if its not the same, then we kick him back.
$return['status'] = 0;
$return['message'] = 'Invalid token.';
echo json_encode($return);
die();
}else{
// but if not, we start getting the variables via POST (the json did this possible)
$name = isset($_POST['name'])? trim($_POST['name']) : '';
$phone = isset($_POST['phone'])? trim($_POST['phone']) : '';
$email = isset($_POST['email'])? trim($_POST['email']) : '';
$message = isset($_POST['message'])? trim($_POST['message']) : '';
// we get a $return variable, that will be an array (json.message on the js is $return['message'])
$return = array();
$return['message'] = '';
$return['status'] = 0;
// we make some validations
if(!preg_match('/^[a-zA-ZáéíóúÁÉÍÓÚÀÈÌÒÙàèìòù ]{2,20}$/', $name)){
$return['message'].='Name\'s not valid!.<br>';
}
if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
$return['message'].='Invalid email.<br>';
}
if(strlen($message)<10 || strlen($message)>500){
$return['message'].='Invalid message.';
}
// if $return['message'] == '', means that theres no errors; we send the message
if($return['message']==''){
// $to would be changed by the email u want the mail to head.
$to = 'my@Email.com';
// well.. the rest of it.. read about mail() function lol.
$title = 'New message';
$mess = '<html><head></head><body>' .$name . ' sent a message, the email is: '.$email.'.'.'<br>Message was:<br>'.$message.'</body></html>';
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: w.e' . "\r\n" . 'Reply-To: ' . $email . "\r\n";
@Mail($to,$title,$mess,$headers);
$return['status'] = 1;
}
// and now, we do an echo with the encoded json of $result, then die.
echo json_encode($return);
die();
}
}
Im guessing i dont need to post the entire jquery.js code, so, im just gonna attach the code working (just tested it, again

)
Cheers!
BTW: on my localhost it will say Message sent, even if it wasnt, as im using @ in the mail function, it wont show me that it couldnt do it...