The finished layout of the contact form will look like this:
Complete files you can download here: http://www.elena-designer/blog/html-form/html-form.zip
Tutorial Steps:
Copy and Paste the HTML code to your page:
--><h2>Customers Inquiries<br /></h2>
<form action=”contact_form.php” method=”get”>
<table width=”456″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”F7F5F2″>
<tr>
<td height=”100″><img src=”images/tit_18.gif” width=”405″ height=”72″ 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”>Your name:</td>
<td width=”26″><img src=”images/spacer.gif” width=”1″ height=”1″></td>
<td><input name=”your_name” type=”text” id=”your_name”></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”>E-mail address:</td>
<td width=”26″><img src=”images/spacer.gif” width=”1″ height=”1″></td>
<td><input name=”your_email” type=”text” id=”your_email”></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” style=”padding-top:3px “>Message:</td>
<td width=”26″><img src=”images/spacer.gif” width=”1″ height=”1″></td>
<td><textarea name=”message” id=”message”></textarea></td>
</tr>
</table></td>
</tr>
<tr>
<td valign=”top”><input type=”image” src=”images/reset.gif” style=”margin-left:200px ” onClick=”reset(); return false;” ><input type=”image” src=”images/submit.gif” style=”margin-left:29px;” onClick=”submit();”> </td>
</tr>
</table><!– –>
</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, images and code you can download here. It’s a PHP script which is supported on most hosting servers.
The html form has two tags: opening <form> and closing </form>. The opening tag is empty. For the form to pass data to our contact_form.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_form.php :
It’s very important to have the same names of variables we pass from an .HTML page and get in contact_form.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();”>
This is it. The last thing to do is to insert your real e-mail address in the contact_form.php script instead of “ your_email@here.com”
HOPE IT HELPED. ENJOY!!!
