Improving the Simple Contact Form

Adding Better Error Checking and Basic Spam Protection

A few weeks back, we learned how to build a simple contact form to allow our users to send us feedback directly from a site.

As noted in the comments, there were a few shortcomings with the contact form. Most notably, there was no spam protection whatsoever. Additionally, if the user made a mistake, their message would be lost, which is extremely inconvenient.

To make this contact form ready to use on a real website, we'll be adding both a basic spam protection system and the ability to store the message in a session in case the user makes a mistake.

NOTE: Like all projects built on this blog, this is being presented as a teaching exercise and a demonstration, so be sure to double-check it before using it in a project.

View the Demo | Download the Source

Understanding the Problem, Part 1: Better Error Handling

One of the most annoying things our web form could do is allow us to spend twenty minutes crafting a message, only to realize that we forgot to add the ".com" to our email address and therefore had our information rejected by the application and lost. (By the way, I know the comment form on this blog does that. It's on my to-do list, I swear!)

To save our users a lot of frustration, we'll need to update our contact form to save the information entered before checking for validity. This allows us to return an error message to the user telling them what went wrong, as well as keeping their original message intact.

Understanding the Problem, Part 2: Spam Protection

Because there's still that special kind of asshole that builds robots to find and spam any available web form, we need to guard our form against automated submissions.

The most popular method for deterring robots is to use CAPTCHA, or a type of challenge-response test that essentially proves that a user is human. This form of spam protection is really effective, but can also have the unwanted side-effect of protecting your form against people as well, since the warped letters can be hard to read.

All that a CAPTCHA does, though, is gives the user an instruction (such as, "Type the letters from the image below") and checks their response. Because our form is not granting access to sensitive data, we don't need to generate a bulletproof spam protection service. Therefore, we're going to use a much simpler approach: we're going to ask a basic arithmetic question and check the answer.

Because it takes a relatively smart spambot to interpret a question, we're going to trust that only a human will understand the question, "What is 4 + 5?" If the user gives us the answer, 9, then we know with relative certainty that the message is legitimate.

Solving the Problem

For this project, I'm going to assume that everyone's familiar with the original post. All code will be presented, but the explanation for how the code works will be omitted. Refer to the original post for explanations on the parts of the contact form not covered here.

This project consists of four files:

• index.php — contains our form and error handling
• contact.inc.php — processes submitted messages and returns a status message
• default.css — CSS styles for the form
• beautiful-forms.js — adds JavaScript form validation and cleans up forms (read about it here)

Step 1 — Adding Better Error Handling

Originally, our error handling only involved outputting a basic message and killing the execution of our script. Obviously, this isn't acceptable for a real site, so we're going to improve it.

Saving the Submitted Information in Case of Errors

First and foremost, we want to remove the annoyance of needing to re-enter information in the event of a mistake on the form. To do this, we're going to use session variables.

In order to use sessions, we need to have a session available to us, which we accomplish using session_start() at the very top of any file that will need access to the saved information. In this case, we'll need to add the call to both index.php and contact.inc.php for our script to work.

<?php

// Start the session
session_start();

After we open the session, we remove the whitespace from before and after the form's submitted values using a really handy function called array_map(), which allows us to call a function on each element of an array. We're using it here to call the trim() function on all submitted values in the $_POST superglobal. The return value of array_map() will then be stored in a variable, which we'll simply call $p.

<?php

// Start the session
session_start();

/*
 * If the form was submitted and the "Send" button pressed, 
 * continue processing the data
 */
if($_SERVER['REQUEST_METHOD']=='POST' && $_POST['submit']=='Send')
{
	// Trim all the values to remove unwanted whitespace
	$p = array_map('trim', $_POST);

With our values trimmed and stored, we're ready to save them in the session. To do this, we simply create an array element in the $_SESSION superglobal for each form field and set its value to the submitted information.

<?php

// Start the session
session_start();

/*
 * If the form was submitted and the "Send" button pressed, 
 * continue processing the data
 */
if($_SERVER['REQUEST_METHOD']=='POST' && $_POST['submit']=='Send')
{
	// Trim all the values to remove unwanted whitespace
	$p = array_map('trim', $_POST);

	// Store the posted information as session variables
	$_SESSION['cf_n'] = $p['cf_n'];
	$_SESSION['cf_e'] = $p['cf_e'];
	$_SESSION['cf_w'] = $p['cf_w'];
	$_SESSION['cf_h'] = $p['cf_h'];
	$_SESSION['cf_m'] = $p['cf_m'];

Now the submitted information is available to our script, even if the form submission fails, allowing us to grant our users another chance to get the form right without causing them much grief. We'll get to how this information is used in just a moment.

Using Status Codes to Identify Errors

Next we need to modify our error handling. In the original post, we simply saved an error message in a variable, which was output to the browser using echo() in the event of an error. Our new approach is to catch an error by sending the user back to the form with a status code that identifies it.

For simplicity's sake, we're going to use the following status codes:

• 0 — No error
• 1 — Anti-spam question incorrect or incomplete
• 2 — No name submitted
• 3 — Invalid email submitted
• 4 — No message submitted
• 5 — Sending of message failed
• 6 — Sending of confirmation message failed

Each step in the validation process checks for an individual field's validity. If the field does not meet our criteria for being considered "valid", we send our status code for the error as a URL query string and use header() to direct the user back to the form, where an error message will be displayed.

Modify contact.inc.php to contain the following code:

<?php

// Start the session
session_start();

/*
 * If the form was submitted and the "Send" button pressed, 
 * continue processing the data
 */
if($_SERVER['REQUEST_METHOD']=='POST' && $_POST['submit']=='Send')
{
	// Trim all the values to remove unwanted whitespace
	$p = array_map('trim', $_POST);

	// Store the posted information as session variables
	$_SESSION['cf_n'] = $p['cf_n'];
	$_SESSION['cf_e'] = $p['cf_e'];
	$_SESSION['cf_w'] = $p['cf_w'];
	$_SESSION['cf_h'] = $p['cf_h'];
	$_SESSION['cf_m'] = $p['cf_m'];

	// If the name field was filled out, sanitize the input and store it
	if(!empty($p['cf_n']) && $p['cf_n']!='Name (required)')
	{
		$name = htmlentities(stripslashes($p['cf_n']), ENT_QUOTES);
	}
	else
	{
		// If the name wasn't entered, create an error message
		header("Location: ../?status=2");
		exit;
	}

	// If the email is set, validate and store it
	if(!empty($p['cf_e']) && $p['cf_e']!='Email (required)')
	{
		// Define a regex pattern to validate the email address
		$pattern = "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i";
			if (preg_match($pattern, $p['cf_e']))
			{
				$email = $p['cf_e'];
			}

			else
			{
				// If the email doesn't match the pattern, error
				header("Location: ../?status=3");
				exit;
			}
	}

	// If no email was entered, generate an error message
	else
	{
		header("Location: ../?status=3");
		exit;
	}

	// Check the website field
	if(!empty($p['cf_w']) && $p['cf_w']!='Website (optional)')
	{
		$site = htmlentities(stripslashes($p['cf_w']), ENT_QUOTES);
	}
	else
	{
		// Because the website is optional, no error if empty
		$site = "none";
	}

	// Ensure a message was entered, then sanitize it
	if(!empty($p['cf_m']) && $p['cf_m']!='Enter Your Message Here')
	{
		$message = strip_tags(stripslashes($p['cf_m']));
	}

	// If no message was entered, adds an error message
	else
	{
		header("Location: ../?status=4");
		exit;
	}

	/*
	 * If no errors occurred, send the message
	 */
	$to = "Ennui Design <answers@ennuidesign.com>";
	$subject = "[Ennui Design] Message from the Ennui Design contact form";
	$headers = <<<MESSAGE_HEADER
From: $name <$email>
Content-Type: text/plain
MESSAGE_HEADER;
	$msg = <<<MESSAGE_BODY
Name:  $name
Email: $email
URL:   $site

Message:

$message

--
This message was sent via the contact form on EnnuiDesign.com
MESSAGE_BODY;
	if(!mail($to, $subject, $msg, $headers))
	{
		header("Location: ../?status=5");
		exit;
	}

	// Now send a confirmation email to the user.
	$conf_to  = "$name <$email>";
	$conf_sub = "Thank You for Contacting Us!";
	$conf_headers = <<<MESSAGE_HEADER
From: Ennui Design <donotreply@ennuidesign.com>
Content-Type: text/plain
MESSAGE_HEADER;
		$conf_message = <<<MESSAGE_BODY
Thank you for contacting us! Your message
was sent successfully, and we will get back
to you as quickly as possible.

All the Best,
Ennui Design

answers@ennuidesign.com
www.EnnuiDesign.com
MESSAGE_BODY;
	if(!mail($conf_to, $conf_sub, $conf_message, $conf_headers))
	{
		header("Location: ../?status=6");
		exit;
	}

	// Destroy the session variables
	unset($_SESSION['cf_n'], $_SESSION['cf_e'], $_SESSION['cf_w'], $_SESSION['cf_h'], $_SESSION['cf_m']);

	// Send the user back to the main page
	header('Location: ../?status=0');
	exit;
}

else
{
	/*
	 * If the wrong request method was used or the "Send" button
	 * wasn't pressed (i.e. "Cancel" was pressed), return the user
	 * to the contact form with no message.
	 */
	header("Location: ../");
	exit;
}

?>

Assigning Messages to Status Codes

In index.php, we're going to check if a status code was sent, then use a switch to assign a message to each status code we'll be creating.

Place the following code into index.php:

<?php

// If an error exists, generate a message to correspond
if(isset($_GET['status']))
{
	$class = NULL;
	switch($_GET['status'])
	{
		case 0:
			$class = ' class="success"';
			$error = "Your message was sent successfully!";
			break;
		case 1:
			$error = "Make sure you answer the anti-spam question before sending!";
			break;
		case 2:
			$error = "Please enter your name before sending!";
			break;
		case 3: 
			$error = "Please enter a valid email address!";
			break;
		case 4:
			$error = "Please enter a message before sending!";
			break;
		case 5:
			$error = "Something went wrong while sending your message. Please try again!";
			break;
		case 6:
			$error = "Your message was sent, but the confirmation message failed. Sorry about that!";
			break;
		default:
			$error = "Something unexpected happened. Please try again!";
			break;
	}
	$err_msg = "<h3$class>$error</h3>";
}
else
{
	$err_msg = NULL;
}

?>

Note that in the event of status code 0, we add a class named "success" to the <h3> tag. This is so that our success message doesn't get styled to look like an error.

Using Saved Data to Repopulate Form Fields

If our form encountered an error, we want to place the previously submitted information back into the appropriate fields, as well as display the error message we just stored in the variable $err_msg.

To accomplish this, we need to access the session variables we created in contact.inc.php. At the very top of index.php, before our status code check, we're going to access the session with session_start(), then check if our field variables are set. If so, we'll strip any slashes using stripslashes() and store the value as an easy-to-access variable (i.e. $name for the $_SESSION['cf_n'] variable, $email for the $_SESSION['cf_e'] variable, etc.) for later use.

<?php

session_start();

// Load the saved session info if it exists
$name = (isset($_SESSION['cf_n'])) ? stripslashes($_SESSION['cf_n']) : NULL;
$email = (isset($_SESSION['cf_e'])) ? stripslashes($_SESSION['cf_e']) : NULL;
$web = (isset($_SESSION['cf_w'])) ? stripslashes($_SESSION['cf_w']) : NULL;
$human = (isset($_SESSION['cf_h'])) ? stripslashes($_SESSION['cf_h']) : NULL;
$msg = (isset($_SESSION['cf_m'])) ? stripslashes($_SESSION['cf_m']) : NULL;

// If an error exists, generate a message to correspond
if(isset($_GET['status']))
{

To display the saved information if it exists, we need to add value attributes to our form fields. In the HTML form within index.php, modify the code to contain the following:

	<h1> Simple Contact Form </h1>
	<?php echo $err_msg ?>
	<form action="inc/contact.inc.php" method="post" id="cf">
		<fieldset>
			<legend>Send a Message</legend>
			<label for="cf_n">Name (required)</label>
			<input id="cf_n" name="cf_n" type="text" maxlength="75"
				value="<?php echo $name ?>" />
			<label for="cf_e">Email (required)</label>
			<input id="cf_e" name="cf_e" type="text" maxlength="150"
				value="<?php echo $email ?>" />
			<label for="cf_w">Website (optional)</label>
			<input id="cf_w" name="cf_w" type="text" maxlength="150"
				value="<?php echo $web ?>" />
			<label for="cf_m">Enter Your Message Here</label>
			<textarea id="cf_m" name="cf_m"
				rows="14" cols="45"><?php echo $msg ?></textarea>
			<input type="submit" name="submit" class="submit" value="Send" />
			<input type="submit" name="submit" class="submit" value="Cancel" />
		</fieldset>
	</form>

Now, if we load the form in a browser and enter an incorrect email address or omit a field, we should be given an error message, and the form should still contain the values we entered before submitting.

Step 2 — Adding Spam Protection

Our first step when adding spam protection is to create a field that will be used to determine if a user is human (you may have noticed the variables referring to $human or $_POST['cf_h'] above).

Add the anti-spam field to our form in index.php:

	<h1> Simple Contact Form </h1>
	<?php echo $err_msg ?>
	<form action="inc/contact.inc.php" method="post" id="cf">
		<fieldset>
			<legend>Send a Message</legend>
			<label for="cf_n">Name (required)</label>
			<input id="cf_n" name="cf_n" type="text" maxlength="75"
				value="<?php echo $name ?>" />
			<label for="cf_e">Email (required)</label>
			<input id="cf_e" name="cf_e" type="text" maxlength="150"
				value="<?php echo $email ?>" />
			<label for="cf_w">Website (optional)</label>
			<input id="cf_w" name="cf_w" type="text" maxlength="150"
				value="<?php echo $web ?>" />
			<label for="cf_h">Spam Check: What is 4 + 5?</label>
			<input id="cf_h" name="cf_h" type="text" maxlength="4"
				value="<?php echo $human ?>" />
			<p class="hint">HINT: The answer is 9</p>
			<label for="cf_m">Enter Your Message Here</label>
			<textarea id="cf_m" name="cf_m" rows="14" cols="45"><?php echo $msg ?></textarea>
			<input type="submit" name="submit" class="submit" value="Send" />
			<input type="submit" name="submit" class="submit" value="Cancel" />
		</fieldset>
	</form>

Next, in contact.inc.php, we need to verify that the user did, indeed, answer "9" to the challenge question. To do so, near the top of contact.inc.php just after we save the form information, we can simply add one more check:

	// Store the posted information as session variables
	$_SESSION['cf_n'] = $p['cf_n'];
	$_SESSION['cf_e'] = $p['cf_e'];
	$_SESSION['cf_w'] = $p['cf_w'];
	$_SESSION['cf_h'] = $p['cf_h'];
	$_SESSION['cf_m'] = $p['cf_m'];

	// Make sure the spam protection didn't fail
	if($p['cf_h'] != '9' && $p['cf_h'] != 'nine')
	{
		header("Location: ../?status=1");
		exit;
	}

	// If the name field was filled out, sanitize the input and store it
	if(!empty($p['cf_n']) && $p['cf_n']!='Name (required)')
	{

Our check will allow for both the answer "9" and the answer "nine", because we don't want to confuse anyone. If the form isn't filled out correctly, the user is redirected to the form with a status code. Otherwise, execution continues normally.

Some spam-bots don't acknowledge the header() command, so we use the exit; command just to be safe. In the event that a spam bot is using our contact form, it will either dead-end when the script exits, or it will end up back at the form with no idea that it failed.

This isn't bulletproof, but it works for a small site that just wants to avoid a ton of junk mail.

View the Demo | Download the Source

Summary

This form will allow a user to contact you directly through your site. It also provides usability enhancements to save the user time in the event they make a mistake while submitting the form. Our anti-spam measures are pretty low-impact, which makes it easy for a user to prove they are human, while keeping most of the bots out.

Do you have a better way to prevent spam? Any ideas on bulletproofing this script? Let me know in the comments!

Posted Jun 02, 2009 by Jason Lengstorf.
This entry is filed under instant tip tuesday, email, php, and spam protection.