Posted on: Wednesday, June 6th, 2007

Ok so you want to build a simple form that takes basic contact information from your clients and sends it to a given email address (or addresses), so where do you start? Well you have taken the first step by reading this tutorial.

I am writing this tutorial in response to the amount of forum postings I have seen on the matter recently so here we go

Step one:The form.

The form we are building will be very basic, it will gather the information, validate the email address then send a formatted plain text email to the specified email address.
The fields I will be collecting from the page are: Name, email and comments. These are the staple requirement of most pages on the net.

We start off our page by putting our usual DOCTYPE information:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PHP Form Example</title>
</head>
<body>

Now we start our contact page, with our header and open the form control:

<h1>Contact Us </h1>
<form action="<?php $SERVER['PHP_SELF']; ?>" method="post" name="contact_us" id="contact_us">

Next we add out form fields remembering to give each one a label, if you remember we are using just 3 fields here, name, email and comment.

We then add the ‘Submit’ button and close the form.

<p>
<label for="name">Name</label>
<input type="text" name="name" id="name">
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email">
</p>
<p>
<label for="comment">Comment</label>
<textarea name="comment" id="comment"></textarea>
</p>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
</form>

Note: I always add the paragraph tags around the form controls as it makes them easier to style with css.

And thats it for the form so now we close the page:

</body>
</html>

Step 2: The PHP

Now we will create some simple PHP that will check the email address to see whether it is valid, then if it is send the comments, if not then return an error

We always start by opening PHP with its FULL tag

<?php ?>

Then within these tags we add our code.

First we check that the user has clicked the ‘Submit’ button

if(isset($_POST['Submit'])) {

Then we define are variables for use in the sending later on

$name = $_POST['name'];
$email = $_POST['email'];
$comment = $_POST['comment'];

Now we can define where we want the email to be sent to and what the Subject of the email should be

$sendto = "example@email.com"; //enter your email address here
$subject = "A new comment has arrived via your site";

Next we build the body of our email

$body = 'A new comment has arrived via your website from: '.$name.' ('.$email.')
Name: '.$name.'
Email: '.$email.'
Comment
---------------------------------------'.
$comment;

Now we have all of the building blocks of our PHP mail() command, we could simply slot them in to place as shown below, but we also want some email address validation.

mail($sendto, $subject, $body, "From:".$email);

So first we have to add our php email address validator, (download it here and upload it to the same directory as the contact us page (right click and save as). REMEMBER TO CHANGE THE FILE TYPE TO .php!)

First we incude the file, then we check our email address. If the email address is valid we send the mail, if not an error is returned

include("emailvalidator.php");
if (check_email_address($email)) {
mail($sendto, $subject, $body, "From:".$email);
echo "Mail sent successfully!";
} else {
echo "The email address you supplied in invalid please try again";
}

We then close the ‘if’ statement from the submit button and close our php tag

}
?>

So now the full code you should have is:

<?php
if(isset($_POST['Submit'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$comment = $_POST['comment'];
$sendto = "example@email.com"; //enter your email address here
$subject = "A new comment has arrived via your site";

$body = 'A new comment has arrived via your website from: '.$name.' ('.$email.')n
Name: '.$name.'n
Email: '.$email.'n
Commentn---------------------------------------n'.
$comment;
include("emailvalidator.php");
if (check_email_address($email)) {
mail($sendto, $subject, $body, "From:".$email);
echo "Mail sent successfully!";
} else {
echo "The email address you supplied in invalid please try again";
}
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<h1>Contact Us </h1>
<form action="<?php $SERVER['PHP_SELF']; ?>" method="post" name="contact_us" id="contact_us">
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name">
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email">
</p>
<p>
<label for="comment">Comment</label>
<textarea name="comment" id="comment"></textarea>
</p>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>

You should now have a fully functioning form ready for styling with CSS (further tutorial to follow). If you have any problems simply leave a comment below and I will reply as soon as possible.

Remember: Change the $sendto variable to your email address!

EDIT

You also need to create a page called sucess.php and upload it to the same directory as your contact us page. The script automatically re-directs to the new page after completing.

The page should say something like ‘Thank you for submitting your comment, we will be in touch sooner than you think. Please continue to browse our site.

Popularity: 100% [?]

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]