Creating an E-mail Contact Form

One of the easiest ways to get people to contact you is by creating a contact form. If you haven’t used a contact form in a while, click on the screenshot below to try mine out:

contact_form_example

By the end of this tutorial, you will have learned how to create a simple contact form (just like the one you see above) that uses a little bit of PHP to send the form’s data directly to your e-mail address.

Anatomy of this Contact Form

Before we start diving into the HTML, CSS, and PHP to create the contact form, let’s look at a high level how data from your form finds its way into your e-mail inbox.

The following diagram should help set the stage:

example_diagram

 

You basically have three files: the form, PHP script, confirmation page. Someone fills out the form and hits Send. When the Send button is hit, the data from your form is transmitted to a PHP script, and this script formats the data in a way that can be mailed. Once your data has been mailed, the PHP script loads a confirmation page letting the form submitter know that the data has been sent.

That’s all there is to it, but let’s go a little bit deeper. The form contains the various UI elements that you use to capture and submit the data – the textboxes, textarea, and send button.

When you press the send button, your data goes to a PHP script that lives in its own page:

This script that takes care of processing your data and e-mailing it to you. This script also contains some logic for displaying a confirmation page once your form data gets sent.

n the next few sections, you will create and populate all three of these pages. The first goal is to get you quickly up and running with a contact form. Once you have done that, we’ll go back and look at the details of why everything looks and functions the way it does.

Getting Started

For this tutorial, you need to have a web server capable of running PHP. If you do not have such a server,  you can mail me . I will provide you a space for practice.

On your web server, you will need to create two HTML files and one PHP file:

  1. contactform.htm
  2. confirmation.htm
  3. mailer.php

Make sure these files are all in the same directory on your web server:

files

Once you have created these files, you’ll fill them up with the content I will provide.

To get the most out of this tutorial, I would suggest you know some basic HTML and CSS techniques such as defining content and styling them. The CSS Tutorials section of this site will get you up to speed if you aren’t too familiar with them.

I’ve mentioned that this example uses PHP a few times to actually send the e-mail out. You do not need any PHP knowledge to make all of this work. I will provide the code, specify where to put your e-mail address, and then provide a basic explanation of why the code works the way it does.

Ok, onwards!

Creating the Contact Form

Open contactform.htm and add the following HTML and CSS to your document:

What are you thinking?

 


What are you thinking?

 

Name

E-Mail (Optional)

Comment

 

Don’t worry if you don’t know what all of the above code actually does. We’ll analyze the contents later. For now, just copy/paste all of that as the contents of contactform.htm and save the document.

If you preview the document in your browser, you will see a contact form that should look identical to the following screenshot:

frm

Don’t click on the Send button just yet. If you click the Send button, you will find that nothing actually happens. We’ll fix that shortly…next to be precise!
Adding the PHP Code

The next thing we will do is add the PHP code needed to make our form actually work. Open mailer.php and add the following code:


 


$to = "you@email.com"; 

This is extremely important. If you don’t do this, feedback your visitors provide will simply never reach you!

You are almost done.

The Confirmation Page

The last thing we are going to do is add our confirmation page. Open confirmation.htm and add the following code to it:





 


Great Success!


 

 

 

 

Thank You!

We've received your feedback, and we will get back to you soon.

Save this file and preview it in your browser. You will see something that looks as follows:

confirm

And with that, you have finished adding content to your HTML and PHP pages.

Right now, if you preview your contact form, fill it out, and press Send, you will see the above confirmation page displayed in your browser.

More importantly, an e-mail will be sent to the address you specified in mailer.php that will look similar to the following image:

mailer

The e-mail doesn’t look pretty, but it does contain the feedback that I filled out and sent!

Author: Ashif

Hi, my name is Ashif. I've been earning a living online since 2006 and love to share what I've learned. You can connect with me on Facebook, Twitter, YouTube and Google Plus. Don't forget to subscribe to my blog to keep up with my latest tips and tricks. You can also send questions in my mail.

Leave a Reply

Your email address will not be published. Required fields are marked *