This guide takes you through the process of creating a contact us form on your webiste. The examples use PHP to process the form inputs.
Most websites have a "Contact Us" form whereby visitors can submit a question
or comment. In many cases, the information submitted is emailed to the website owner.
This guide will take you through the steps of creating a contact form for your own website.
It is assumed you have a basic understanding of HTML.
Creating a contact form, or any form in general, consists of two tasks:
- Creating an input form using HTML into which visitors can enter information
- Writing a script to handle the form details once they have been submitted
This article provides a guide for each step, starting with the input form.
The input form enables visitors to input their details. The one used below
employs simple HTML using tables.
<form action="script_name.php" method="POST">
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td>Full name</td>
<td><input type="text" size="30" maxlength="80" name="name" /></td>
</tr>
<tr>
<td>Email address</td>
<td><input type="text" size="30" maxlength="80" name="email" /></td>
</tr>
<tr>
<td>Message</td>
<td><textarea name="message" cols="29" rows="5"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit" value="Submit Message" /></td>
</tr>
</table>
</form>This form has four inputs, name, email, message, and the submit button.
When the submit button is pressed by the visitor, the variables are sent using the POST method
to script_name.php [1] [2].
You will note that script_name.php has a .php extension rather than an HTML extension. The
reason for this will be discussed in the next section.
Now that the form has been written, you need a script that can handle the submitted details.
This script uses a .php extension because it uses the scripting language PHP to handle the
form submission. Alternatives include
a CGI script or ASP script. PHP has been chosen here because it is widely supported by hosting
companies. If you are unsure whether your web host supports PHP, just ask your host, or check
out the package details section of their website.
The script will consist of three sections
- Variable collection and validation
- Emailing the data to yourself
- Display of confirmation that the details have been submitted
The code below contains comments in the form:
// comment goes here
<?php
if (isset($_POST['submit'])) {
// Collect variables
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
// Send email
$body = "The following feedback has been submitted:\n\n";
$body .= "Name: $name\n";
$body .= "Email: $email\n";
$body .= "Message: $message";
mail ("you@yoursite.com","Feedback Received",$body,"From: you@yoursite.com");
// Output confirmation
echo "<p>Your message has been received.</p>";
}
?>
The outputted email will take the format:
The following feedback has been submitted:
Name: Bob Smith
Email: bobsmith@hotmail.com
Message: I think your site is great!
The script first checks that the form has been submitted. If it has,
it saves the submitted POST variables as PHP variables. It then
constructs the body of the email message. The code \n is used
to start a new line within the email. The script then sends the email
using the mail() function, which takes the form mail("Your email address","subject","body","headers") [3].
Finally, the script outputs a message to the user.
This script can be placed within normal HTML tags, i.e.
<html>
<body>
<h1>Contact Us</h1>
<?php
// Code goes here ..
?>
</body>
</html>
While this script does the job, it isn't 100% robust. It doesn't validate whether
the user has submitted appropriate details, or even if the user has submitted variables at all.
Depending on your server settings, the script may also struggle if a user submitted a
message that contained single or double quotation marks.
Below is a slightly better script. This version employs simple validation for the form
inputs. While it isn't bullet proof, it should serve the needs of most small websites.
<?php
if (isset($_POST['submit'])) {
// Collect variables
$name = stripslashes($_POST['name']);
$email = stripslashes($_POST['email']);
$message = stripslashes($_POST['message']);
// Validate variables
$okay = true;
if (strlen($name)==0) {
$okay = false;
echo "<p>Please input a valid name.</p>";
}
if (strlen($message)==0) {
$okay = false;
echo "<p>Please input a valid message.</p>";
}
if (eregi("\r", $email) ||
eregi("\n", $email) ||
eregi("%0a", $email) ||
eregi("%0d", $email) ||
eregi("Content-Type:", $email) ||
eregi("to:", $email) ||
!eregi("@", $email) ||
!eregi("\.", $email) ||
eregi("cc:", $email)) {
$okay = false;
echo "<p>Please input a valid email address.</p>";
}
// If all is well, send the email
if ($okay == true) {
// Send email
$body = "The following feedback has been submitted:\n\n";
$body .= "Name: $name\n";
$body .= "Email: $email\n";
$body .= "Message: $message";
mail ("you@yoursite.com","Feedback Received",$body,"From: $email");
// Output confirmation
echo "<p>Your message has been received.</p>";
} else {
echo "<p>Click back on your browser to resubmit the form.</p>";
}
}
?>
This version ensures that the visitor has submitted their name and a message by checking
that the string length of their inputs are greater than zero. It also verifies that the email
address contains a @ and . but at the same time does not contain harmful code that could be used in the email
headers. Unlike the previous script, this sends you the email with the visitor's email
address as the sender. This is convenient when you want to send a quick reply.
Well there you have it! Your first contact us form. Comments and questions can be
directed to webmaster@walshaw.com.
[2] This script does not use any client-side validation using JavaScript. While this would be
convenient to a visitor, client-side validation isn't required, and it would only create unnecessary confusion here.
The use of client-side form validation will be the subject of a future how to guide.
[3] You could set the mail header to be "From: $email" so that the website visitor will
appear in your email client as the sender. This, however, would require validation to ensure
the visitor doesn't submit malicious code as their email address.
