Introduction

In this tutorial you will learn how to make a basic email form using xhtml, css and php. In this tutorial we will be making a small contact form where the user will fill out a form and using php will email it to your inbox. We will look in to error processing for eliminating some spam in this tutorial as well.

End results:

- Try it -

Step 1 – Basic HTML template

First lets create the basic template for the form to be placed in. This, of course will not be the template you will use, as you will probably implement this into your own design and site. This is the beginning of the template, it contains all the dividing inlays and correct tags to start out the template.

We will need to declare the doctype and create all the necessary header information such as the content-type and title. We also link the style sheet in this section.

In the body section I have placed a number of div tags that will hold the content we will place inside them, using css later we can do some formatting.

Next lets make the the form with all the inputs and labels for the user to fill out that will ultimately be emailed to you when finished.

To correctly flow with the template we have just made place the create the form inside the “container” div.

Final index.html file

Step 2 – Styling the index

For the sake of the tutorial I chose to add a little style to the page. Although the css is very generic, it is not required to use on your own form. It is simply used to give the tutorial a little flair.

To use the two images in the tutorial download them here:

Graphics

Background Image

Container Box

Final style.css file

Step 3 – Declaring Variables

Now that we have the html template and the page styled using css and the graphics. We need to start building the actual php script that will email you when filled out.

First thing I like to do is declare all my variables at the top of the script for easy reference later on.

These variables are pulled from the form in the index.html file. I placed them in variable names that would be easy to remember. Name, Email, Message, and the Subject is a static variable and you set it as you please. It can easily be pulled from an input if added on the form.

Step 4 – Error processing

For the sake of sorting out the false emails at the application level, this step should never be overlooked. As this is a basic tutorial, You only learn how to check if the fields are empty. If I get enough demand I will write more on error handling.

We need to check if there is any value to each field (name, email and message) and have the form die if the fields are empty.

The die() function will stop the form from executing any further. So it will display the first error it catches. If you place an email, but not a name, the name name error will display and stop the script from executing.

If all the fields have input, then we need it to show a message to give the user a peace of mind that their message has been received.

Step 5 – Email formatting

Now that we have all the data we will need to send a message, we need to format the email in a way that is easy to read for you.

Setting up the time stamp. Fairly simple format.

Month text (July) Day, Full Year(2009) Hour:Minutes am/pm.

This block makes up the body section of the email.

This will display the time stamp we just made first. The “\n” is a line break in the text. So the next variable is on its own line. Then it will display the name and email followed by the subject and message.

We need a from line, so you know who the sender is before you open the email.

Step 6 – Email the form.

The script is now ready to email the content to the email you choose.

You’ll need to place your email in the place of “your-email@doamin.org”. You can add more than just your email address if you are needing to send it to several people or departments. You can add a comma and add more email addresses in that section.

End the script and you are ready to upload and test the script.

Final email.php file

Conclusion

Final EmailForm.zip

You should now have a working email form that will email you if all the fields have been filled out. You can do much more with this application, such as check if the email is a real email address, check for words or links you dont want inside the message, the options are endless. I hope this tutorial has helped you out, and you may have learned something new and useful today.