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.
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:
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.
Other Frequently Asked Questions Categories
|