Contact Me

	Email:

	
	
	

As you can see, the image is actually a PHP file, valid_image.php. In this file, we are going to come up with a random validation string, store it in a session variable, and draw an image with the text in the font we chose. For this to work, you need to give the imagettftext() a relative path to the font from where valid_image.php is saved. If it is the same directory, than just “yourfont.ttf” will do.

So now we have an image with the string, and a session variable holding the string. Now, when the request is sent to contact.php, we will compare the session variable to the value given in the form. If they are the same, then the contacter is a human that could read the image.

Your contact.php should be saved in the same directory as your form (or you could edit the action attribute of the form), and it should look like this:

Steve Love gave me a good tip to unset the session variable after use so that it could not be reused. Thanks!

This tutorial was mainly about the validation technique, but if you want to make this form asynchronous, you can follow the last few steps of my last tutorial, to implement the jQuery and AJAX.

Thanks for reading!

To follow this tutorial, you’ll need the jQuery Library.

Let’s start out web 1.0, with just a simple form with a submit button. You’ll want a simple HTML form that looks like this:

So now that we have a form, we’ll need a PHP page to process that form. What we’ll do is take the message, put it into an email and email it to you (you’ll need to put your email, or whatever email you want to receive contact requests). Put this code into a ‘contact.php’ file:


if (!empty($_POST['contact_text']) && !empty($_POST['contact_email'])) {
$to = 'webmaster@example.com';
$subject = 'Contact Request from '.$_POST['contact_email'];
$message = $_POST['contact_text'];
$headers = 'From: '.$_POST['contact_email']." \r\n" .
'Reply-To: '.$_POST['contact_email']."\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
echo "Thanks for contacting me!";
} else {
echo "Please enter your email and a message.";
}
?>


Basically, that code checks to make sure that both $_POST['contact_email'] and $_POST['contact_text'] are defined, and then it constructs an email to you (webmaster@example.com). In the message is the text that they entered. Then it prints a friendly message.

The only problem with what we have so far is that the contact form is very vulnerable to automatic spam. Not quite as bad as putting your email out there, but it is still pretty easy for spammers to just send a request to your ‘contact.php’ page and bombard you with emails. There is a way to prevent this from happening. It involves using PHP’s $_SESSION superglobal to make sure that the contact-er is using your contact form, and not just a single request to contact.php. You need to add a little PHP code to your contact form to make this work. Because we are going to use the session superglobal, we need to set up the session at the top of your pages. In both the page holding the form AND contact.php, put this code at the top:

Now, what we’re going to do is make a random string (an md5 hash of a random number between 1 and 10000), and put it into the form as a ‘hidden’ input field. We also store the hash in a session variable, so we can compare the two in contact.php. Here’s what your form should look like now.

(Notice the PHP lines and the new ‘input’ tag).

And now in contact.php, we need to make sure that the two keys are the same. This is what contact.php should look like:


session_start();
if (isset($_POST['contact_key'])) {
if ($_POST['contact_key'] == $_SESSION['contact_key']) {
if (!empty($_POST['contact_text']) && !empty($_POST['contact_email'])) {
$to = 'webmaster@example.com';
$subject = 'Contact Request from '.$_POST['contact_email'];
$message = $_POST['contact_text'];
$headers = 'From: '.$_POST['contact_email']." \r\n" .
'Reply-To: '.$_POST['contact_email']."\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
echo "Thanks for contacting me!";
} else {
echo "Please enter your email and a message.";
}
}
}
?>


Great! Now we have a functioning contact form. The only problem is, when people use the form, they are sent to a boring page with only text in it. So let’s make the form asynchronous with javascript. jQuery javascript, actually. The script will wait for the form submit button to be pushed, and then will use AJAX to send a request to contact.php, thus sending the contact request. When that finishes, it will append the response text to the form to give the contact-er a result (good if all fields were filled in, bad if they forgot their email or a message). All you need to do is put a little bit of code into your page with the form.

contactform = $('form#contact');
contactform.submit(function() {
$.post('/contact.php', $(this).serialize(), function(data) {
$('form#contact').append("
"+data);
});
return false;
});


So there we go. Somebody can, with javascript enabled, just press the send button and send the contact request to your email asynchronously, without your putting your email out to be picked up by spam bots. The best thing about this is that when somebody isn’t running javascript in their browser, they will still be able to use the form effectively.

Obviously you’d want to style up your form and maybe change around the ‘submit’ event to make it a little more stylish, but we have here a solid, secure AJAX-PHP contact form which will help make your site more user-friendly and accessible.

UPDATE: If you want to make sure that your form is validated, check out this tutorial.