For any website having a decent contact form is very important. With hundreds of structured contact forms out there, we barely get a chance to really make the form the way we want. As a designer or a developer, having that freedom is very important because we want to make masterpieces that define who we are and leave traces of ourselves. To help you with that, here is an idiots guide (I’m not calling you an idiot, just describing how simple this tutorial is) to creating a simple php contact form.

Getting Started

Before we even begin, we need to first decide what we want in the contact form. A general contact form has an input field for the senders name, e-mail, website, subject and a text area. Some even have drop-down options for subject field or even to select the priority level of the message you are sending. Once you decide what you want, we can get started.

The PHP processing file

This is a very important file. This php file will be the mastermind in sending/submitting the forms. Let’s call this file process.php. Many would call this the mail.php but why really? The main purpose of this file is to process the submitted information right? So why not name it properly. But if you really like, you can call it whatever you wish.

Now let’s start with the must have for any php file <?php and ?>. In this we will enter the information for all form fields we will have

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php
//Collecting Basic Information 
$name = $_POST['name'];
$email = $_POST['email'];
$website= $_POST['website'];
$subject= $_POST['subject'];
$message= $_POST['message'];
 
//The Form Content 
$formcontent = "From: $name n E-Mail: $email n Web-Site: $website n Subject: $subject n Message: $message";
 
//Who is this going to 
$recipient = "you@domain.com";
 
//Mail Subject 
$mailheader = "A Message From $name rn";
mail($recipient,$subject,$formcontent,$mailheader) or die ("Error Processing Mail!");
 
//Message Sent Notice 
echo "Thank you for contacting me. Your Message has been submitted successfully";
?>

<?php
//Collecting Basic Information
$name = $_POST['name'];
$email = $_POST['email'];
$website= $_POST['website'];
$subject= $_POST['subject'];
$message= $_POST['message']; 

//The Form Content
$formcontent = "From: $name n E-Mail: $email n Web-Site: $website n Subject: $subject n Message: $message"; 

//Who is this going to
$recipient = "you@domain.com"; 

//Mail Subject
$mailheader = "A Message From $name rn";
mail($recipient,$subject,$formcontent,$mailheader) or die ("Error Processing Mail!"); 

//Message Sent Notice
echo "Thank you for contacting me. Your Message has been submitted successfully";
?>

The content is quite self explanatory but for those that do not understand here’s a brief explanation. At first what we did was get the data from the input field (in this case the posted data). Like I mentioned before, you can always have dropdown options. Dropdowns, luckily, are processed the same way as any input field:

1

$dropdown = $_POST['dropdown'];

$dropdown = $_POST['dropdown'];

You can also have radio buttons and check buttons for “I agree to the terms and conditions” fields. Next we took that data and compiled it in a format that we would like to see when we receive the email. Next we decided who the recipient is. So please do replace you@domain.com with your correct email. Next we went ahead and assigned a custom message header respectively named $mailheader. We always want a message header that is friendly, so why not make it our self right? For those who have more than website in which they have a contact form, I would recommend you put the web-site’s name at the beginning instead of “A Message From.” It makes it a lot easier to keep track of where the message is coming from. The $mailis the main process that handles sending the information. Now for the grand finale, the thank you message. When a guest doesn’t know that their message has been submitted, they will 87% of the time re-submit the form (87 is a number from the top of my head that I think more than likely fits this case). You can always use javascirpt re-direct or place a small link to take the visitor back to the previous page.

The Form

Here is the part where you have actual freedom to customize. Thanks to the invention of CSS and (I hate to admit it) Tables, we have been able to customize the look and feel of forms for years. Now primarily using CSS, forms come in many styles, colors and even shapes. Yes I said it shapes. You can check out the styles by simply searching our best friend: Google. I’m not going to waste your time explaining how you can customize your fields, so instead I’ll link you to HTMLForums. Here is a basic look at non-styled form for our simple contact form.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<form action="process.php" method="POST">
<label for="name">Your Name:</label>
 
<input id="name" title="Type you name" type="text" name="name" />
 
<label for="email">Your E-Mail:</label>
 
<input id="email" title="Type in you website" type="text" name="email" />
 
<label for="website">Your Website:</label>
 
<input id="website" title="Type in you website" type="text" name="website" />
 
<label for="subject">Your Website:</label>
 
<input id="subject" title="Type in you website" type="text" name="subject" />
 
<label for="dropdown">DropDown</label>
<select name="dropdown"> <option value="Support">Support Department</option></select>
<select name="dropdown"><option value="HTML">HTML Help</option></select>
<select name="dropdown"><option value="Beer">Buy Me Beer</option></select>
 
<label for="message">Your Message</label>
 
<textarea name="message" rows="6" cols="25"></textarea>
 
<input type="submit" value="Send" /><input type="reset" value="Clear" />
 
</form>

<form action="process.php" method="POST">
<label for="name">Your Name:</label>

<input id="name" title="Type you name" type="text" name="name" />

<label for="email">Your E-Mail:</label>

<input id="email" title="Type in you website" type="text" name="email" />

<label for="website">Your Website:</label>

<input id="website" title="Type in you website" type="text" name="website" />

<label for="subject">Your Website:</label>

<input id="subject" title="Type in you website" type="text" name="subject" />

<label for="dropdown">DropDown</label>
<select name="dropdown"> <option value="Support">Support Department</option></select>
<select name="dropdown"><option value="HTML">HTML Help</option></select>
<select name="dropdown"><option value="Beer">Buy Me Beer</option></select>

<label for="message">Your Message</label>

<textarea name="message" rows="6" cols="25"></textarea>

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

</form>

Download?

Normally I would provide you with a download link, but since we are still working on getting this website’s new look and feel the way we want, we don’t have much time in our hand. But this is something we will do once we’re done. So stay tuned!

Quick Question

Before I leave I would really like to know if you guys want us to provide you with some CSS styling for forms (contact and search). You can tell us either by e-mailing us or by replying to this post.