Description: In this tutorial we'll learn how to make an advanced contact form.
Skill: Intermediate
Time needed: 20 minutes
If you followed our simple contact form tutorial, but aren't satisfied with the result, you can expand it using this tutorial. In this tutorla we will explain how to make an advanced contact form with error checking. First we'll post the code and then explain it bit by bit.
So, let's move on to the code:
Code:
<?
if($_POST[send]) {
if($_POST['name'] != "NULL" AND $_POST['email'] != "NULL" AND $_POST['website'] != "NULL" AND $_POST['message'] != "NULL") {
if(preg_match("/^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,6}$/i", $_POST['email'])) {
$name = $_POST["name"];
$email = $_POST["email"];
$website = $_POST["website"];
$message = $_POST["message"];
$forminfo =
"Name: $name\n
E-Mail Address: $email\n
Website URL: $website\n
Message: $message\n";
$recipient = "YOURADDRESS@YOURDOMAIN.COM";
$subject = "Contact form from website";
$formsend = mail("$recipient", "$subject", "$forminfo");
echo("
<div align=\"center\">
Your message has been sent successfully! Thank you.
</div>
");
}else{
echo("
<div align=\"center\">
You have specified an invalid e-mail address. Please hit the button below to check your e-mail address.<br>
<br>
<FORM>
<INPUT TYPE=\"button\" VALUE=\"Back\" onClick=\"history.back()\">
</FORM>
</div>
");
}
}else{
echo("
<div align=\"center\">
You have forgotten to fill out one or more fields. Please hit the button below to check your data.<br>
<br>
<FORM>
<INPUT TYPE=\"button\" VALUE=\"Back\" onClick=\"history.back()\">
</FORM>
</div>
");
}
}else{
echo ("
<div align=\"center\">
<form method=\"POST\">
Your Name:<br>
<input type=\"text\" size=\"45\" name=\"name\"><br>
Your E-Mail Address:<br>
<input type=\"text\" size=\"45\" name=\"email\"><br>
Your Website URL:<br>
<input type=\"text\" size=\"7\" name=\"website\"><br>
Your Message:<br>
<textarea name=\"message\" rows=\"7\" cols=\"50\"></textarea><br>
<input name=\"send\" type=\"submit\" value=\"Send\"></td>
</form>
");
}
?>
So, that's a lot of code. Let's start by explaining how it works. First, it checks if all the fields were filled out, and it checks if a valid e-mail address was filled out. If one of the fields was left empty, it returns an error. If an invalid e-mail address was entered, it also returns an error message.
Code:
if($_POST[send]) {
if($_POST['name'] != "NULL" AND $_POST['email'] != "NULL" AND $_POST['website'] != "NULL" AND $_POST['message'] != "NULL") {
if(preg_match("/^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,6}$/i", $_POST['email'])) {
As you can see the first line checks if the user has clicked on the 'Send' button. If they haven't, the form will display the form. But that comes later in this tutorial. If the user has clicked on the send button, the form will check if the following fields were left blank:
Name
E-Mail Address
Website
Message
In this case it checks for all fields, but you can add, remove or edit it so it checks only the fields you want it to check. If that's ok, and nothing was left blank, it checks if a valid e-mail address was entered. It actually checks the format of the e-mail address, not if it excists.
Next stop in the code, are the fields that are submitted:
Code:
$name = $_POST["name"];
$email = $_POST["email"];
$website = $_POST["website"];
$message = $_POST["message"];
The above means that the data filled out in the form will be submitted to the e-mail address specified in the code. It doesn't actually e-mail it, but it defines the values entered.
Now we move on to the fields that are actually e-mailed to us:
Code:
$forminfo =
"Name: $name\n
E-Mail Address: $email\n
Website URL: $website\n
Message: $message\n";
The form as it is displayed above will be displayed in our e-mail address inbox as a message. $name, $email, etc is defined in the first part of this code, as explained above.
Below we'll define our recipient and the subject of the e-mail, so you know it's a message sent from your website:
Code:
$recipient = "YOURADDRESS@YOURDOMAIN.COM";
$subject = "Contact form from website";
$recipient will be your e-mail address, since you are the one who wants to receive all messages.
$subject is the subject of the e-mail message.
The next part is the message that will be displayed on the user's screen once they've submitted the message and all fields were filled out correctly:
Code:
echo("
<div align=\"center\">
Your message has been sent successfully! Thank you.
</div>
");
You can edit this in any way you like, it's just an echo that's displayed on the screen.
Now, when the user has submitted an invalid e-mail address the following message will be displayed:
Code:
}else{
echo("
<div align=\"center\">
You have specified an invalid e-mail address. Please hit the button below to check your e-mail address.<br>
<br>
<FORM>
<INPUT TYPE=\"button\" VALUE=\"Back\" onClick=\"history.back()\">
</FORM>
</div>
");
Also this can be edited in every way you'd like to edit it, as long as you don't edit the }else{ tags. Everything in between the echo fields is the message that will be displayed on the screen, so that's the things you can edit.
Now for the last error check, the checking for empty fields:
Code:
}
}else{
echo("
<div align=\"center\">
You have forgotten to fill out one or more fields. Please hit the button below to check your data.<br>
<br>
<FORM>
<INPUT TYPE=\"button\" VALUE=\"Back\" onClick=\"history.back()\">
</FORM>
</div>
");
The above message is the same as the other message, but now it outputs that the user has forgotten to fill out one or more fields.
And now for the last part of this code, the form itself:
Code:
}
}else{
echo ("
<div align=\"center\">
<form method=\"POST\">
Your Name:<br>
<input type=\"text\" size=\"45\" name=\"name\"><br>
Your E-Mail Address:<br>
<input type=\"text\" size=\"45\" name=\"email\"><br>
Your Website URL:<br>
<input type=\"text\" size=\"7\" name=\"website\"><br>
Your Message:<br>
<textarea name=\"message\" rows=\"7\" cols=\"50\"></textarea><br>
<input name=\"send\" type=\"submit\" value=\"Send\"></td>
</form>
");
}
As you can see the names of the forms are related to the names of first part of this code. You should keep these names related since the script won't work if you don't. An example:
Quote:
|
<input name=\"send\" type=\"submit\" value=\"Send\"></td>
|
Is related to:
If you change the name of the input form, then the code above doesn't know the user clicked the send button and thus it doesn't execute the code.
So, that's everything you need to do, and know, to create an advanced contact form. We hope you've learned something from this tutorial.