Basic Contact Form

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

<?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:

$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.

<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>

Template Contact Form

There are a number of you that requested a php processor file for the contact form. Here is a simple contact form that you can easily integrate to with the Catharsis theme.

<?php

//Retrieve form data. 
//GET - user submitted data using AJAX
//POST - in case user does not support javascript, we'll use POST instead
$name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
$website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];
$message= ($_GET['message']) ?$_GET['message'] : $_POST['message'];

//flag to indicate which method it uses. If POST set it to 1
if ($_POST) $post=1;

//Simple server side validation for POST data, of course, you should validate the email
if (!$name) $errors[count($errors)] = 'Please enter your name.';
if (!$email) $errors[count($errors)] = 'Please enter your email.'; 
if (!$message) $errors[count($errors)] = 'Please enter your comment.'; 

//if the errors array is empty, send the mail
if (!$errors) {

	//recipient
	$to = 'sampleperson@gmail.com';	 // <--------- change your email here
	//sender
	$from = $name . ' <' . $email . '>';

	//subject and the html message
	$subject = 'Message from ' . $name;	
	$message = '
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head></head>
	<body>
	<table>
		<tr><td>Name</td><td>' . $name . '</td></tr>
		<tr><td>Email</td><td>' . $email . '</td></tr>
		<tr><td>Message</td><td>' . nl2br($comment) . '</td></tr>
	</table>
	</body>
	</html>';

	//send the mail
	$result = sendmail($to, $subject, $message, $from);

	//if POST was used, display the message straight away
	if ($_POST) {
		if ($result) echo 'Thank you! I have received your message.';
		else echo 'Sorry, unexpected error. Please try again later';

	//else if GET was used, return the boolean value so that 
	//ajax script can react accordingly
	//1 means success, 0 means failed
	} else {
		echo $result;	
	}

//if the errors array has values
} else {
	//display the errors message
	for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
	echo '<a href="contact.html">Back</a>';
	exit;
}

//Simple mail function with HTML header
function sendmail($to, $subject, $message, $from) {
	$headers = "MIME-Version: 1.0" . "\r\n";
	$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
	$headers .= 'From: ' . $from . "\r\n";

	$result = mail($to,$subject,$message,$headers);

	if ($result) return 1;
	else return 0;
}

?>

Call this template comment.php or processor.php

Next open up the contact page. Find

<form action="#" method="post" name="contact_form">

Change this to:

<form action="#"  method="post" action="contact.php" name="contact_form">

Note that the contact.php must match the name and path of the php processor file. Also make sure that all fields are properly named as in the processor file.

Sazzad

Hey there. I’m Sazzad, a User Experience Developer from New York City. I work with many talented folks who find ways of re-inventing the way users look at the web. I am the founder of the FWPolice and co-founder of Fleech Media. You can follow me on Twitter by the handle @IamShipon1988 .

1 Comment

Leave a Reply

Your email address will not be published.