In this tutorial we will be looking in detail into how to design a simple form and what methods we can use to process the data submitted. We will then advance onto creating a contact form which emails the results onto a specified email address.

Designing an HTML Form

First we have to start off the form structure. This is done by using the tags.

<form action="form_submit.php" method="post"> </form>

<form></form>as the simple starting and ending tags. But as you can see there are attributes inside the starting tag these are just some of the attributes that are available. Here is what the attributes I have used mean.

ACTION

Action is used to show where the form will be processed. In our case it will submit the form and the details to form_submit.php if the action is left blank it will indicate that the form is being processed on the same page as the form.

METHOD

There are 2 ways to submit a form. GET and POST.

GET ($_GET)

The GET method is used to submit the data into a URL encoded format. In our example if we set the method to GET the outcome result would submit the form to.

form_submit.php?form_field1_name=value&form_field2_name=value

etc.

POST ($_POST)

The POST method is the preferred way of processing a form. As unlike the GET method the data is not shown in the URL.

NAME The name variable is used so that the form can be referenced to from style sheets and scripts.

Now let’s add some fields to the form. In our case we will add 2 single line text boxes, one multi-line text box a drop down box and a submit button. Inside the form tags insert the following.

<input type="text" size="20" name="name" value="Full Name" /><br />
<input type="text" size="20" name="email_address" value="Email Address" /><br />
<textarea cols="30" rows="10" name="message">Contact Message</textarea><br />
<select size="1" name="subject">
	<option>General Contact</option>
	<option>Technical Contact</option>
</select><br />
<input type="submit" value="Submit Button" name="submit" /><br />

For more information on elements that can be used for form fields visit

http://www.w3.org/TR/html401/interact/forms.html#h-17.4

Once you have it all together save it as form.html. So far you should have the following.

<form action="form_submit.php" method="post" name="simple_form_design">
	<input type="text" size="20" name="name" value="Full Name" /><br />
	<input type="text" size="20" name="email_address" value="Email Address" /><br />
	<textarea cols="30" rows="10" name="message">Contact Message</textarea><br />
	<select size="1" name="subject">
		<option>General Contact</option>
		<option>Technical Contact</option>
	</select><br />
	<input type="submit" value="Submit Button" name="submit" />
</form>

This completes the HTML form section. Now if you upload form.html and visit the page it should look something like the image below.

So now we have got the form interface where the user can enter the data we need to create the page where the data entered is processed.

form_submit.php

This is in the file that we put in the action attribute (form_submit.php). So let’s start by setting some variables

$send_to_email = “your_email@website.com;

This is the email address to which the contact form will send the message to. Now we know where we are emailing the form data to we must retrieve the fields from the form.

$form_name = $_POST['name'];
$form_email_address = $_POST['email_address'];
$form_subject = $_POST['subject'];
$form_message = $_POST['message'];

$_POST is an array which combines all the form fields. So we can access them using PHP.  So for the sake of making it look prettier we will assign them to some more friendly names.

Once we have assigned the variables we need to actually check that the form has been submitted so that people can’t just visit form_submit.php directly and send a blank email. To check this we will look to see if the submit button has been passed over.

if ($_POST['submit'])
{

In this we are opening an if statement to see if $_POST[‘submit’] has a value which if you look back at the html form the value is Submit Button.

This next session goes though the $_POST array checking for any form fields that have been left blank using the function empty.

foreach ($_POST as $form_field_name => $form_field_value)
{

The foreach function is used to cycle through an array splitting the key and value into accessible strings

$_POST['KEY'] = VALUE;

In this case we are assigning the key to $form_field_name and the value of the array to $form_field_value. Next we will check to see if the value is empty.

if (empty($form_field_value))
{

Again we are using the empty function. Using this function empty is defined as being one of the following:

“” (an empty string)

0 (0 as an integer)

“0″ (0 as a string)

NULL

FALSE

array() (an empty array)

echo $form_field_name . " was left blank.";
break 1;

In this bit if a form field has been found empty we will display the field name that was left blank and then add “ was left blank. Onto the echo after the form field name. The Break function escapes from loops such as the foreach we are running if an empty field is found. For more information on the break command visit http://www.php.net/break

 }
}
$headers = "From: " . $form_name . " <" . $form_email_address . ">\r\n" .
"X-Mailer: PHP/" . phpversion();

Now we have finished with sorting out the form fields lets start putting together the email. All email messages have headers, most are automatically created by the server but there are a few that we must include, who the email will be sent from and the type of message. The type of message in our case is sent via PHP we are including the version of php we are running as well using phpversion();.

On the first line we are creating the standard email address including the contact name such as,

Bill Anderson

So we are getting both the name and email address from the details submitted in the form and putting them in to create the format required.

Now for the final section where we actually use the mail function to send the email.

$send_mail = mail($send_to_email, $form_subject, $form_message, $headers);

}

The mail format is (to, subject, message, headers(optional), additional_parameters(optional). So we are putting in all the variables we have created into the relevant locations. $send_to_email in the to section, $form_subject for the subject of the email message, $form_message for the message and finally $headers for the optional headers.

So that it in total the form_submit.php should look something like this.

<?php

$send_to_email = "your_email@website.com";
$form_name = $_POST['name'];
$form_email_address = $_POST['email_address'];
$form_subject = $_POST['subject'];
$form_message = $_POST['message'];
if ($_POST['submit'])
{
	foreach ($_POST as $form_field_name => $form_field_value)
	{
		if (empty($form_field_value))
		{
			echo $form_field_name . " was left blank.";
			break 1;
		}
	}
	$headers = "From: " . $form_name . " <" . $form_email_address . ">\r\n" .
	"X-Mailer: PHP/" . phpversion();
	$send_mail = mail($send_to_email, $form_subject, $form_message, $headers);
}

?>

In the future I will be expanding on this tutorial to implement some safety features such as time restrictions between multiple submissions. Logging of IP addresses to help prevent spam and creating a CAPTCHA.

I hope you liked my tutorial, and if you need someplace to start messing around with PHP.