Let’s learn it at an example. Let's say one of your pages has a code as follows:
<form>
<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.
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 “
[email protected]”
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">
