stefashwell.com

In Depth Contact Form Part 3 - Better Error Checking

Part 3 of the contact form tutorial looks back at the error checking in place previously, and asks the question "How can we make it better?".

Previously, the error checking appeared on its own in a very un-user-friendly unstyled blank page. It does not take a genious to work out that this is not the best way to go. What we really want is for the form to be displayed again, with error messages in place and any information already entered repopulated in the form.

If you do not already have the files from the previous tutorials, get them here.

To do this, we will first need to merge the two files into on PHP file. So, the PHP code from the previous tutorial is at the top, and the HTML form is at the bottom. For this to work we will also need to change some of the code.

First, change this line in the HTML:

<form action="handle_contact.php" method="post">

To:

<form action="./" method="post">

This will tell the form to submit the information entered to the same page again (itself).

Next, this line needs to be changed:

<input type="submit" value="Send" />

To:

<input type="submit" name="submit" value="Send" />

The PHP code will use the "name" when processing.

OK, now we have changed a few things, but more needs to be added. Next up we'll go to the top of the script and just after "<?php" we'll add the following line:

if ( $_POST['submit'] ) {

$valid = 1;

This line checks to see if the form has been submitted. If it has the script will continue, but if not it will skip whatever is inside the "if" block. We need to close this if statement by going to the end of the PHP code and adding:

}

Do this just before the "?>" and where the HTML starts. The valid variable we just declared will be used in the error checking as explained below.

Next job it to alter the error checking statements. Before they looked something like this:

$company = $_POST['company'];

if ( empty($company) ) {
echo 'You did not enter your company, please <a href="contact.html">go back</a> and make sure you enter it';
die();
}

We will change this to the following:

$company = $_POST['company'];

if ( empty($company) ) {
$valid = 0;
$company_error = 'You did not enter your company';
}

This no longer echo's an error to the screen right away nor ends the script from running. The $valid variable is changed to 0, because an error occured and so the information is not valid.

Repeat this process for each of the required fields. After doing so we will need to check to see if an error has occured before sending an email. Above the block of code that sends the email add this line:

if ( $valid == 1 ) {

This checks to see if the $valid variable is still 1. If an error had occured above it would have been changed to 0 and so an email would not be sent this time. This is another if statement which will need "closing" after the email sending block with a "}".

Now lets turn our attention to the HTML down the page. We want to display the error messages with the form. I'll take company as an example again here. The code currently looks like this:

<label for="company">Company:</label><br />
<input type="text" name="company" value="" size="20" /><br />
<br />

We'll change it to this:

<label for="company">Company:</label><br />
<input type="text" name="company" value="<?php echo $company; ?>" size="20" /><br />
<?php echo $company_error; ?><br />

By adding the contents of the $company variable to the value of the field, if information has already been entered it'll be displayed again (so the user will not have to enter it again). Similarly with $company_error, if an error occured above the error message will be displayed.

You can do this for each of the fields so they all display any errors or current values.

And that's about it! Hopefully this will help you provide better error checking and feedback for your users!

Downloads
You can download the full script associated with this tutorial here