Done it and here is how:
Let's say one of your pages has a code as follows:
Code:
<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:
(see attachment)
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 is below. 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:
PHP Code:
<form action="contact.php" method="get">
The form we are working with has two text input fields and one textarea. 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:
PHP Code:
name="your_name", name="your_email", name="message"
The same names are used in the sample of contact.php :
PHP Code:
$_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:
PHP 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:
Code:
<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:
Code:
<input type="image" src="images/submit.gif" style="margin-left:29px;" onClick="submit();">
Actually that’s all. 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:
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:
Code:
<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:
Code:
<form name="contact_form" action="contact.php" method="get">
Here is the above mentioned PHP code:
PHP Code:
<?
$subject="from ".$_GET['your_name'];
$headers= "From: ".$_GET['your_email']."\n";
$headers.='Content-type: text/html; charset=iso-8859-1';
mail("[email protected]", $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>
[RESOLVED] Email Form
Reply With Quote