This tutorial will show you step-by-step how to make a PHP contact form that allows the user to choose which department they would like to send the email to. This is useful when you have multiple departments such as support, sales etc.
This contact form has no validation or spam control so I highly recommend you don't put it on a live server. A second part covering validation will be coming within the next day or two, follow us on twitter to find out when it's released.
First we'll start with our HTML. Create a file named index.html.
index.html<!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=UTF-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <title>PHP Contact form</title> </head> <body> <div id="container"> <form action="send.php" method="post"> <fieldset> <label for="recipient">Select department: </label> <select name="recipient" id="department"> <option value="sales@some-company.com">Sales</option> <option value="customer_service@some-company.com">Customer Service</option> <option value="support@some-company.com">Support</option> <option value="marketing@some-company.com">Marketing</option> </select> <label for="name">Name: </label> <input type="text" name="name" id="name"/> <label for="email">Email Address: </label> <input type="text" name="email" id="email"/> <label for="subject">Subject: </label> <input type="text" name="subject" id="subject"/> <label for="message">Message: </label> <textarea name="message" id="message" rows="10" cols="30"></textarea> <input type="submit" name="submit" value="Send Message!"/><input type="reset" value="Reset Form!"/> </fieldset> </form> </div><!--close container--> </body> </html>
As you can see we're referencing an external stylesheet (style.css), the CSS will just make the form a bit more user friendly. Then we have our form. We have a label for each field in the form so the user knows what they are being asked for. The select is used to allow the user to select the department they wish to contact. The form then asks for a name, email address, message subject and the message itself followed by a submit button and reset button in case the user needs to start over again.
When the submit button is clicked the form contents will be sent to the file send.php which will send the message to the department they specified. Next we'll make our style.css file. Create a new file names style.css in the same directory as your index.html. In style.css put the following:
style.css
label {
display:block;
}
textarea {
display:block;
}
This just makes sure that all labels and textareas are on a line of their own and not shared with any other form elements. Now we'll start work on send.php. Again make a new file in the same directory as index.html and call it send.php. Once you make send.php, put the following PHP in there:
send.php
<?php
if(isset($_POST['submit'])){
$recipient=$_POST['recipient'];
$name=$_POST['name'];
$email=$_POST['email'];
$subject=$_POST['subject'];
$message=$_POST['message'];
$headers = "From: $email" . "\r\n" . "Reply-To: $email" . "\r\n";
if(mail($recipient,$subject,$message,$headers)){
echo "Thank you $name, we'll be in touch shortly.";
}else{
echo "Sorry, there was a problem sending your message";
}
}else{
header("location:index.html");
}
?>
The first thing the PHP does is check to see if the submit button has been clicked, it takes the 'submit' value from the name we gave it earlier. If the submit button hasn't been presses and the user has went to send.php from their browser then they will be redirected back to index.html. If they have clicked the button the first thing that happens is that we assign variables to the parameters passed by the form, as you can see we're using $_POST as opposed to $_GET, this is because we set the forms method as post.
We assign the form values to variables to make it easier to work with. We assign the variables by typing the variable name e.g. $name then we tell it what it's equal to e.g. $name=$_POST['name'], we get the $_POST['name'] from the name attribute on the text input. So if the inputs name was 'email' our $_POST would be $_POST['email']. The variable $headers contains the from and reply to email address, we'll use the email address the user gave us for both.
Next we send the email and if it has been sent successfully it thanks the user using their name and if there was a problem it notifies the user. If you only want the user to send their message to one email address take out the select element in index.html and replace $recipient=$_POST['recipient']; with $recipient='yourname@yourdomain.com';
So that's how to make a pretty simple PHP contact form. Next time we'll add some PHP server-side validation and a some of jQuery for client-side.
If you have any problems, questions or suggestions leave a comment below and we'll get back to you. Also don't forget we're giving away 5 TypeKit invites between now and Friday, to be in for a chance of winning all you need to do is leave a comment.
Jem
Aye, nothing like a big, open spammy security hole to really liven things up.