How to Create a Contact form
Let’s learn it at an example. Let's say one of your pages has a
code as follows:
<form action="contact.php" method="get"
>
<table width="456" border="0"
cellpadding="0" cellspacing="0"
bgcolor="F7F5F2">
<tr>
<td height="60"><img src="images/tit_18.gif"
width="405" height="23" style="margin-left:24px
"></td>
</tr>
<tr>
<td height="28" valign="top"><table
width="456" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="124" align="right"
class="text_1">Your name:</td>
<td width="26"><img src="images/spacer.gif"
width="1" height="1"></td>
<td><input name="textfield2"
type="text" class="form_1"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="28" valign="top"><table
width="456" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="124" align="right"
class="text_1">E-mail address:</td>
<td width="26"><img src="images/spacer.gif"
width="1" height="1"></td>
<td><input name="textfield22"
type="text" class="form_1"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="91" valign="top"><table
width="456" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="124" align="right" valign="top"
class="text_1" style="padding-top:3px
">Message:</td>
<td width="26"><img src="images/spacer.gif"
width="1" height="1"></td>
<td><textarea name="textarea"
class="form_2"></textarea></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><input type="image"
src="images/reset.gif" style="margin-left:338px
"><input type="image" src="images/submit.gif"
style="margin-left:29px "></td>
</tr>
</table><!-- -->
</form>
The layout of the contact form can look like this:
A general layout of HTML contact form
On your server you should have a script that will actually generate and send
e-mails to a certain e-mail address. A sample of this script you can download
here. It’s a PHP script which is supported on
most hosting servers.
Example of script ( contact PHP to be uploaded to the server )
<?
$subject="from ".$_GET['your_name'];
$headers= "From: ".$_GET['your_email']."\n";
$headers.='Content-type: text/html; charset=iso-8859-1';
mail("benchang766@gmail.com", $subject, "
<html>
<head>
<title>Contact letter</title>
</head>
<body>
<br>
".$_GET['message']."
</body>
</html>" , $headers);
echo ("Your message was successfully sent!");
?>
<script>
resizeTo(300, 300)
//window.close()
</script>
Copy and paste the above script in note pad and save as contact.php
or download (download zip file)
Our html form has two tags: opening <form> and closing </form>.
The opening tag is empty. For the form to pass data to our contact.php
we need to specify two attributes within this tag:
<form action="contact.php" method="get">
The form we are working with has two text input fields and one text area. Each
of them should have an attribute called “name”. The original contact
form already has them: name="textfield2", name="textfield22",
name="textarea"
Let’s rename the values of these attributes to more meaning names:
name="your_name", name="your_email",
name="message"
The same names are used in the sample of
contact.php :
$_GET['your_name'] , $_GET['your_email'] and $_GET['message']
It’s very important to have the same names of variables we pass from an .HTML
page and get in contact.php.
The next step is to make the two buttons Reset and Submit work.
In our case these buttons are presented by images: <input
type="image"… But they can be also presented by HTML buttons
specially designed for this case: <input type="reset"… and <input
type="submit"… And the third way is to use common text links for
this case.
First let’s take the image buttons. In order to make the Reset button
function we need to insert additional attribute onClick into the <input>
tag with the following code:
onClick="reset(); return false;"
The reset() function is javascript function that clears the form and return
false disables the image button’s default action – passing data to server:
<input type="image" src="images/reset.gif"
style="margin-left:338px" onClick="reset(); return
false;">
For the Submit button we simply add the same onClick
attribute but with the submit() javascript function as its value:
<input type="image" src="images/submit.gif"
style="margin-left:29px;" onClick="submit();">
Actually this it. The last thing to do is to insert your real e-mail address in
the contact.php script instead of “ your_email@here.com”
If you want to use HTML buttons <input type="reset"… and <input
type="submit"… you don’t need to insert any additional onClick
attributes. These buttons will do what they are supposed to do without extra
code:
<input type="reset"> <input type="submit">
If you want to use text links to clear and submit your form use a code like
this:
<a href="javascript:contact_form.reset();">Reset</a>
<a href="javascript:contact_form.submit();">Submit</a>
For this code to work with our form we need to specify the name=”contact_form”
attribute for the <form> tag:
<form name="contact_form" action="contact.php"
method="get">