Contact forms are used in just about every website out there to allow users to email you directly through an easy form. This form will take the users info, once submitted, format it into a nice email, and send it to an email address we will specify.

I thought this would be a great starting block so we’ll cover a few basic principals of HTML form submitting:

• Basic HTML form fields
• Form Methods
• PHP handling
• Javascript validation

 

Download the tutorial files to follow along:

Download Tutorial Files

 

I’m just going to make a simple form without any CSS so that we can focus more on the actual function of the form rather than the styling. So I am using the often overlooked <table> tag to provide the layout of the form.

Here is what the finished form will look like:

First, let’s talk about HTML forms. There are two common elements that we will be implementing in this form: <input> and <textarea> . The input tag is used any time you want information from the user. It has a wide range of types but the only ones we’ll use for this form are the “text”, “email”, and “submit”. The <textarea> element creates a larger multi-lined text box that we will be using as the “message” portion of the form.

Here is the code to set up this basic form:

<form method="post" action="process.php" id="form">
      <table>
		<tr>
			<td>
				<p>Name:</p>
			</td>
			<td>
				<input type="text" id="name">
			</td>
		</tr>
		<tr>
			<td>
				<p>Email:</p>
			</td>
			<td>
				<input type="text" id="email">
			</td>
		</tr>
		<tr>
			<td>
				<p>Message:</p>
			</td>
			<td>
				<textarea id="message"></textarea>
			</td>
		</tr>
		<tr>
			<td>
			</td>
			<td align="right">
				<input type="submit" value="submit" name="submit">
			</td>
		</tr>
	</table>
</form>

Take a close look at the contents of the <form>  tag:

<form method="post" action="process.php" id="form">

The “method” attribute determines how the form will be processed and the “action” determines what will actually do the form processing. If nothing is defined for this attribute the form will just post to the same page. Here we have it set to post which means that once the user hits the submit button, the form will send its contents in the actual HTTP request to “process.php”. This means that they will be sent internally and will not be visible in the URL.

This form has an action to send the form data to “process.php” but this is unnecessary when we are only sending an email with it. And honestly, by including the code in the contact page, we can cut out that extra step of sending the user to “process.php”. If we set the action of our form to “action=”” ” then we can just post the data and refresh the page. Then the PHP code will process it and send out the email.

Here is the code that will process our form:

<?php
    if(isset($_POST['email'])) {
	//First, its always best to define the variables that we need.
    $name  = $_POST['name'];
    $email  = $_POST['email'];
    $message  = $_POST['message'];

    $contact  = '[email protected]';
    $subject  = '[Contact Form].$name';
    $headers  = "From:".$email;
	
	//Next, we take these variables and compose the email with them.
	mail($contact, $subject, $message, $headers);
    }
?>

Now we can break this down into two pieces.

The first thing we do is check if the user has sent the form and if the “email” data has been posted. Then we the variables by collecting them from our form’s post method. Notice how we use the  $_POST[”]  format to do this based on the id of each field in our form.

if(isset($_POST['email'])) 
    //First, its always best to define the variables that we need.
    $name  = $_POST['name'];
    $email  = $_POST['email'];
    $message  = $_POST['message'];

    $contact  = '[email protected]';
    $subject  = '[Contact Form].$name';
    $headers  = "From:".$email;

We use the $headers variable to define some extra things we want to do when sending the email. Using this allows us to set the “From” field, if we want to include a “CC:” contact or even if we want to define how the recipients email software should decode our text (this is very useful when sending html emails because we can force the software to read our email just like a webpage).

Next we take all these variables we defined and include them in the PHP mail()  function.

mail($contact, $subject, $message, $headers);

And here is how your final contact form page should look:

<?php
    if(isset($_POST['email'])) {
    //First, its always best to define the variables that we need.
    $name  = $_POST['name'];
    $email  = $_POST['email'];
    $message  = $_POST['message'];
 
    $contact  = '[email protected]';
    $subject  = '[Contact Form]'.$name;
    $headers  = "From:".$email;
    
    //Next, we take these variables and compose the email with them.
    mail($contact, $subject, $message, $headers);
    }
?>
 
<html>
<form method="post" action="" id="form">
    <table>
        <tr>
            <td>
                <p>Name:</p>
            </td>
            <td>
                <input type="text" name="name">
            </td>
        </tr>
        <tr>
            <td>
                <p>Email:</p>
            </td>
            <td>
                <input type="text" name="email">
            </td>
        </tr>
        <tr>
            <td>
                <p>Message:</p>
            </td>
            <td>
                <textarea name="message"></textarea>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td align="right">
                <input type="submit" value="submit" name="submit">
            </td>
        </tr>
    </table>
</form>
</html>

Download Tutorial Files

Congratulations! You have just created your first contact form! Go grab a drink and check out part two because we will be adding security measures to our newly created form so you don’t get hacked.