<form id="form" action="" enctype="multipart/form-data">Here is an Example form or the layout of the contact form can look like this:
<div class="inp_h">
<input class="inp_2" type="text" name="name" value="Name:" onfocus="this.value=''" />
</div>
<div class="inp_h">
<input class="inp_2" type="text" name="mail" value="E-mail:" onfocus="this.value=''" />
</div>
<div><textarea class="inp_3" rows="30" cols="40" onfocus="this.value=''">Message:</textarea></div>
<div style="padding:12px 0 0 0;">
<a href="#" onclick="document.getElementById('form').reset()">
<img src="images/clear.jpg" style="border:0px none;" alt="" />
</a>
<img src="images/spacer.gif" alt="" width="6" height="1" />
<a href="#" onclick="document.getElementById('form').submit()">
<img src="images/send.jpg" style="border:0px none;" alt="" />
</a><br />
</div>
</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 contact.asp script you can download here. The ASP script is supported on the most of Windows-based hosting servers.
Our html form has two tags: opening <form> and closing </form>. For the form to pass data to our contact.asp we need to specify five attributes within this tag:
1 | <form id="form" method="post" target="_blank" action="contact.asp" name="form" > |
- “Id” attribute is a standard for all forms;
- “Method” attribute specifies what method is using for sending contact form letters;
- “Target” attribute specifies how the message which is telling us that letter was sent will be appear;
- “Action” attribute is telling us that we are using ” contact.asp” file as a script for sending letters;
- “Name” attribute is a value which is used in contact.asp file.
- “Method” attribute specifies what method is using for sending contact form letters;
- “Target” attribute specifies how the message which is telling us that letter was sent will be appear;
- “Action” attribute is telling us that we are using ” contact.asp” file as a script for sending letters;
- “Name” attribute is a value which is used in contact.asp file.
The form we are working with has two text input fields and one text area. The original contact form already has two of them: name=”name”,name=”mail”, you will also need to set the third name value into the message text area – name=”message”. The resulting <form> script should look like this:
<form id="form" method="post" target="_blank" action="contact.asp" name="form" > <div class="inp_h"> <input class="inp_2" type="text" name="name" value="Name:" onfocus="this.value=''" /> </div> <div class="inp_h"> <input class="inp_2" type="text" name="mail" value="E-mail:" onfocus="this.value=''" /> </div> <div><textarea class="inp_3" rows="30" cols="40" name="message" onfocus="this.value=''">Message:</textarea></div> <div style="padding:12px 0 0 0;"> <a href="#" onclick="document.getElementById('form').reset()"> <img src="images/clear.jpg" style="border:0px none;" alt="" /> </a><img src="images/spacer.gif" alt="" width="6" height="1" /> <a href="#" onclick="document.getElementById('form').submit()"> <img src="images/send.jpg" style="border:0px none;" alt="" /> </a><br /> </div> </form>
where you can see the code for the Reset button:
<a href="#" onclick="document.getElementById('form').reset()"><img src="images/clear.jpg" style="border:0px none;" alt="" /></a>And the code for Submit or Send button:
<a href="#" onclick="document.getElementById('form').submit()"><img src="images/send.jpg" style="border:0px none;" alt="" /></a>Now lets take one of the templates which doesn’t have the CSS structure and uses tables. Here is the default code from the contact form:
<form action="" id="form1" style="margin:0; padding:0 ">You have to insert the same values as in example above, so let’s see how the result code should look like:
<table style="height:213px">
<tr>
<td style="width:239px; padding-left:29px">
<input type="text" class="input3" value=" Your Name:" /><br />
<input type="text" class="input3" value=" Your Fax:" /><br />
<input type="text" class="input3" value=" Your Phone:" /><br />
<input type="text" class="input3" value=" Your E-mail:" />
</td>
<td style="width:259px">
<textarea name="textarea" style="margin:0 0 11px 0px" cols="35" rows="35"> Your Message:</textarea><br />
<a href="#" onclick="document.getElementById('form1').reset()" class="more_2" style="margin:0 16px 0 107px">clear</a>
<a href="#" onclick="document.getElementById('form1').reset()" class="more_2">send</a><br />
</td>
</tr>
</table>
</form>
<form id="form" method="post" target="_blank" action="contact.asp" name="form">
<table style="height:213px">
<tr>
<td style="width:239px; padding-left:29px">
<input type="text" name="name" class="input3" value=" Your Name:" /><br />
<input type="text" name="fax" class="input3" value=" Your Fax:" /><br />
<input type="text" name="phone" class="input3" value=" Your Phone:" /><br />
<input type="text" name="mail" class="input3" value=" Your E-mail:" />
</td>
<td style="width:259px">
<textarea name="message" style="margin:0 0 11px 0px" cols="35" rows="35"> Your Message:</textarea><br />
<a href="#" onclick="document.getElementById('form').reset()" class="more_2" style="margin:0 16px 0 107px">clear</a>
<a href="#" onclick="document.getElementById('form').reset()" class="more_2">send</a><br />
</td>
</tr>
</table>
</form>
Now let’s take a look at the contact.asp file, what do we need to change here. Open it with your php editor and find the following lines:
‘—-Settings———–
subj = “Contact form from your site” – (here you can change heading message which you will receive in the letter from guest)
mail_from = “admin@tsie.loc” – (here you need to put your website mail address )
mail_to = “andy@template-help.com” - (here you need to put your own email address)
smtp_server = “localhost” – (here you need to put SMTP server name of your server )
smtp_port = 25 – (here you need to put SMTP port of your server)
subj = “Contact form from your site” – (here you can change heading message which you will receive in the letter from guest)
mail_from = “admin@tsie.loc” – (here you need to put your website mail address )
mail_to = “andy@template-help.com” - (here you need to put your own email address)
smtp_server = “localhost” – (here you need to put SMTP server name of your server )
smtp_port = 25 – (here you need to put SMTP port of your server)
If you don’t know these settings, you need to contact your hosting provider for the details.
Related posts:1. How to create a contact form in HTML
 |  |  |  |
