Heading

Sales Enquiries
sales@ServerGrade.com.au
or
03 9016 0092

Support Enquiries
support@ServerGrade.com.au

Adding an Email Form to a Website

Going Interactive: Website "Contact Us" Forms

Article by
Steve Watkins

Communication. It's the essence of the Internet, and the whole reason it exists in the first place. By publishing your website you are communicating to your visitors the ideas and information on it.

The natural progression of this concept is allowing your visitors to communicate back. Generally this is done over email, or by providing a phone number for them to contact you. But there is a better way. Forms.

Forms allow your visitors to enter information into your website and have it sent to you. They are easier for your visitors to use than an email link which takes time to load, and less expensive both in time and money than a telephone call.

In this article I will explain how to create a simple form, and have the information entered by your visitor automatically emailed to the address of your choice.

Creating your form

As it is one of the most common uses of forms, we will create a "contact us" form that allows the visitor to ask a question. The basic code for a form is as follows:

<form name="myform" action="">
</form>

You should place this code in your HTML page where your want the form to appear.

This form doesn't contain anything, and doesn't do anything. We need to add what is known as a "field". The field we will add in this example is a textbox field. The code for adding a textbox is - <input type="text"></input>. We place the textbox inside the form as shown here:

<form name="myform" action="" method="post">
Enter your Name: <input type="text" name="visitorname"></input>
</form>

Once this code is inside your HTML page in the place you would like it, save the code and open the page in your web browser. You will see the page now contains a place for your visitor to enter their name.

Enter your Name:

You can now extend this form to ask a few more pieces of information. We will get the visitor to enter their question, and an email address so we can reply. Note how we have different names for each of the fields. This is important later.

<form name="myform" action="" method="post">
Enter your Name:
<input type="text" name="visitorname"></input><br>
Enter your Email Address:
<input type="text" name="visitoremail"></input><br>
Enter your Question(s):
<input type="text" name="visitorquestion" size="50"></input><br>
</form>

You can also see that because questions are usually longer in length than names, we have increased the size of the textbox to 50 characters using size="50" at the end of the last textbox. When seen from your web browser the code above looks like this:

Enter your Name:
Enter your Email Address:
Enter your Question(s):

Finally, we add a button to allow your visitor to send the enquiry. This usually goes just before the end of the form. The code for this is <input type="submit" value="Send your Enquiry">

Preparing your form to be emailed

Now that we have the basic layout of our form, we need to add just two more pieces of information to it. These two pieces specify where the information entered by your visitor goes, and the email address the information will be eventually sent to.

Before it gets sent to our email address, we send the information entered into the form to a "script". More information about the script is provided later, but for now just enter "./formmail.php" into the action part of the form.

Once entered, the 1st line of the form should be:

<form name="myform" action="./formmail.php" method="post">

The final code entry into our form goes on the last line before the end of the form. Add <input type=hidden name="recipient" value="myemail@example.com"></input> on the line before the </form> appears. Naturally you should replace myemail@example.com with the email address you want the form sent to.

Our code now looks like this:

<form name="myform" action="./formmail.php" method="post">
Enter your Name:
<input type="text" name="visitorname"></input><br>
Enter your Email Address:
<input type="text" name="visitoremail"></input><br>
Enter your Question(s):
<input type="text" name="visitorquestion" size="50"></input><br>
<input type=hidden name="recipient" value="myemail@example.com"></input><br>
<input type="submit" value="Send your Enquiry">
</form>

The Email Script

The email script we will use for taking the information entered into your form and emailing you is called phpFormmail. It is a highly refined script used on many websites.

Download the script and place it in the same directory on your computer as the form. You can download the script by right clicking here and choosing "Save Target As.." and then naming it formmail.php.

Open the script with notepad. Notepad is located in the Accessories folder of the Windows start menu.

Find the line in the script that says $referers = array('www.example.com', 'example.com');. It is line number 40, and fairly close to the top. We need to change where it says example.com to your domain name. If your website was mywebsite.com the line would be changed to:
$referers = array('www.mywebsite.com', 'mywebsite.com');

Finally, upload both the HTML page with the form in it, and the formmail.php script, into the same place on your website.

Open your page on your website, and enter your test enquiry. Soon after you will have the enquiry delivered to your email.

See further general website hosting FAQs or our FAQ categories for more information.

Please contact us if you have a question that is not answered on our site.


© ServerGrade.com.au 2008 TOS Privacy Policy 112/88 Park St, South Melbourne, Victoria, Australia, 3205