paulgdesigns.com

Custom Web Designs

• Upgrades & New Designs

• Repairs & Tutorials

• Blogs & Bulletin Boards

• MySQL Databases

• Shopping Carts & E-Commerce

• Search Engine Optimization

---

Making your contact form work.

Gary Paul, 10/09/2010

A common question on the help boards is how to make your contact form on your web site send the information to you, the form owner or to who or what you want.

The following covers the basics of making a form work. It is meant as a starting point in the learning process.

Important, this page does not cover security of a form, which is essential! There is an accompanying page that gives your some basics of security that you should read! I very strongly suggest you read the second page before testing the code on this page live on the internet! There is a link at the bottom of the page, or you can click here.

There is more than one method and more that one language, however I will supply you with enough information and the code to accomplish making a form to process using php. Most of your better hosting companies provide a method, but I have read enough posts from people that were not able to make it work. You might need to check to see if your host supports php. Chances are if you are paying for your hosting service, then you should be fine. However if you are using a "free" hosing service or web hosting service that came with your ISP, you might have an issue, so you may need to check.

The basics of contact forms.

Contact forms are broken down in to two major components:

• The html form, (there are other forms in other languages, but here we are just dealing with html) this is the contact form itself that your visitor inputs the information for which you ask .
• The processing file or script, this is the instrument that the information is sent to your server and then sent on to where you tell it, be an e-mail to yourself, an email to the visitor confirming the submission, to a web page or to a database.

The second part is usually the one that gives the new designer trouble, but we will look at both.

Your Form in Code

<form id="yourForm" name="yourForm" method="post" action="" >

<p><label>First Name</label><input name="fname" type="text"/><br />

<label>Last Name</label><input name="lname" type="text"/><br />

<label>E-Mail</label><input name="email" type="text"/><br />

<input name="submit" type="submit" value="Submit" /></p>

</form>

Your form on your page

First Name
Last Name
E-Mail Address

A couple of notes, if you look at the source code, you will notice that I put the form in a table, you can style it other ways if you prefer.

It is a very good idea to always have separate first name and last name input boxes if you are asking for a name. The reason being is that should you or your client want to add a database to the form, it is not a good idea to have a first and last name in one database column.

A common mistake for the newer designer is that they try to incorporate the mailto: link in the form. This is not the way you want to go, it does not work.

If we look at the first line of code in the form, you will notice two things:

• Method="post": This is the method by which your information is transmitted. It will be transmitted to an associative array called $_POST. (Don't get too lost in all that, just know it will work)
• form action="": In between the " " is where you will put the name of the file or script that we will use to process your information. Again, there are other methods, but we are going to keep it simple here

Lets make a processing script

Create a new .php page. If you are in Dreamweaver simply go up to File | New | Blank Page | php. You might notice that the php page looks just like you html page when you first opened it. That is because the file extension of .php only puts the server on notice that there may be some php to process. If you make your new page from html, it will not work.

In your body tag, type the following code (you can copy and paste, but the more time you spend with it, the better you will learn it).

<?php

$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];

//Sending Email to form owner
$header = "From: $email\n"
. "Reply-To: $email\n";
$subject = "Submission From My Form";
$email_to = "your@emailaddress.com";
$message = "name: $fname . $lname\n"
. "email: $email\n";

mail($email_to, $subject ,$message ,$header ) ;

?>

Make sure you change the $email_to so it reads your email address and save this file as result.php, I usually just leave it in the root folder, and upload it to your server. We now go back to your form, and on line one, we change:

• action=""

to

• action="result.php"

Upload this file to your server, give it a test run

It should have worked for you. But you will probably have noticed when you press the Submit Button, all that happened is all the information you had input disappeared. Not very nice! You really do not even know if it worked.

So lets add a message to your result.php page that will let the submitter know their information has been sent. After the closing php tag ?>, but still inside the <body> tag, you can now add any message you want in html. So lets add:

<h1>Thank You for Your Submission</h1>

<p> Your information has been sent, you will now receive our mailer, invitations and other tantalizing offers we have</p>

<p>Again, thank you for your interest in my new web site</p>

Now when your visitor presses the submit button, they see:

Thank You for Your Submission

Your information has been sent, you will now receive our mailer, invitations and other tantalizing offers we have.

Again, thank you for your interest in my new web site

Reminder, there is no validation or protection on this form, it opens the door to spam and other attacks. A submitter is not required to input an email address and can input anything they like with the form as written. There is no security on this form or script, if you were to add a database to this script, it would be very vulnerable to malicious attacks. It is strongly suggested you research form security, in particular if you are adding a database

To read the accompanying lesson on form security, click here!

Now for the bonus round, you have all the information here that you could create another email that could be sent to your newly acquired customer/friend that you could sent them a Thank You email. See if you can figure that out.

Hope this has been a help to you.