How can I add a contact page to send user feedback to my email box?

This is a question I get from a lot from students:

Here’s my solution:

  1. Create a contact.php page.
  2. Add the following HTML form inside the HTML body tag:

  1. Now above the form add the PHP necessary to mail the user’s input to your email

  1. Replace the email here with your email: $to = “youremail@youremail.com”;
  2. FTP contact.php to your server
  3. Go to yourdomain.com/contact.php
    • This is assuming you FTP’d contact.php to the root of your site
  4. Fill out the form
  5. Submit it

That’s it! You should receive the form’s feedback in your email.

A sample image of your filled out form

A sample image of your filled out form

The email you receive will look something like this

The email you receive will look something like this

Let’s make some improvements to this simple contact form

First of all, let’s make our boring form look a little less boring. Just create a file called main.css and add the CSS below to main.css.

Oooh. Look how much nicer our form looks with some CSS

Oooh. Look how much nicer our form looks with some CSS

Now we need to add some PHP validation. This is very important and ensures that the user fills our form out and we don’t receive an empty email.

Add the following PHP above your DOCTYPE

Now change the code above the form to the code I have added in the box below.

(Make sure you read the comments. I wrote them for you!)

Now in order to see this PHP validation code in full effect, you need to turn JavaScript off

How do I turn JavaScript off?

Here’s an easy way. Let’s use the Firefox browser as it has great web developer tools to work with. You need to add a plugin to Firefox. If you don’t know how to add plugins to Firefox, you don’t know what you are missing. Here’s a tutorial to get you started.

Add the Web Developer addon to Firefox

When it’s added, Firefox should now have this cool toolbar.

Chris Pederick's Web Developer Toolbar

Chris Pederick's Web Developer Toolbar

This video will show you how to use Web Developer. It’s a bit blurry but you should get the idea. Turn JavaScript off by Disable > Disable JavaScript > All JavaScript

Please remember to turn JavaScript back on when your finished. I forget all the time and for a few seconds I think the world will end. Save yourself this trouble and turn JavaScript back on.

Now fill out your form and hit the submit button. You should see something like the image below.

The form showing PHP validation

The form showing PHP validation

Now the last thing we need to do is add some JQuery validation.

Add the following SCRIPT links to point the PHP page to the JavaScript files.

The first script tag points to an online repository for JQuery.

The second JavaScript points to a file on your server. Make sure to create validation.js and add the following JavaScript to it:

Upload your new JavaScript to the remote server and once again test your contact form by filling it out. Make sure you are dealing with a refreshed browser window and that you have turned JavaScript back on. You will never see JQuery work with JavaScript turned off because… JQuery is JavaScript.

After hitting submit you should see the following:

JQuery validation

JQuery validation

Now we are finished. If you want to improve on the code, try the following:

  • Make sure all your CSS is external
  • Use PHP include statements to externalize all the code above the DOCTYPE

That’s all I have for this one folks. Please let me know if I made any mistakes or if there is a way to make this better.

Leave a Reply

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