You can also download compiled contact_form.html and contact.php files in a single package
Proceed to the tutorial on how to add fields to the contact form
In my Previous Tutorial is had teach u how to make Contact Me form In HTML now i am Teaching you about ASP Form In Html, So Let’s learn it at an example. Let’s say one of your pages has a code as follows:
where you can see the code for the Reset button:
1. How to create a contact form in HTML
<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
Written By; Shaan Ali Choudhry (MCSE) Chairman of Brains Technology Sheikhupura
My Name Is Shaan Ali Choudhry, i am a banker and also student of University of the Punjab, i Am Professional in Web and Blog Designer SEO Expert,Web Apllications,Domain Registration and Hosting services in Pakistan.www.Brainstechnology.net Admin@Brainstechnology.net |  |  |  |
This tutorial will teach you how to create a very simple contact form for HTML based website template.
First of all create 2 files: contact_form.html and contact.php. The first file will contain HTML code for the form and the second -will process the data from the form
Let’s have a quick look at some main aspects of it. The
$mail_to shall contain the site owner email, this is where the email is sent to. You can specify multiple emails by separating them with a comma (e.g. mail-one@template-help.com, mail-two@template-help.com)
HTML
First of all create 2 files: contact_form.html and contact.php. The first file will contain HTML code for the form and the second -will process the data from the form
And this is how it will look in the browser
<formaction="contact.php"method="post">Your name<inputtype="text"name="cf_name">Your e-mail<inputtype="text"name="cf_email">Message<textareaname="cf_message"><inputtype="submit"value="Send"><inputtype="reset"value="Clear"></form>
PHP
Let’s have a quick look at some main aspects of it. The
$mail_to shall contain the site owner email, this is where the email is sent to. You can specify multiple emails by separating them with a comma (e.g. mail-one@template-help.com, mail-two@template-help.com)
Subject of the email you receive from the contact form$mail_to='test@test-mail.com';
Constructing the body of the message$subject='Message from a site visitor '.$field_name;
Constructing the headers of the message$body_message='From: '.$field_name."\n";$body_message.='E-mail: '.$field_email."\n";$body_message.='Message: '.$field_message;
Defining mail() function and assigning it to a variable $mail_status, which is used below to check whether the mail has been sent or not$headers="From: $cf_email\r\n";$headers.="Reply-To: $cf_email\r\n";
If the mail() function executed successfully then do the code below$mail_status= mail($mail_to,$subject,$body_message,$headers);
If the mail() function fails, then execute the following codeif($mail_status) { ?><script language="javascript"type="text/javascript">// Print a messagealert('Thank you for the message. We will contact you shortly.');// Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.comwindow.location ='contact_page.html';</script><?php}
else{ ?><script language="javascript"type="text/javascript">// Print a messagealert('Message failed. Please, send an email to gordon@template-help.com');// Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.comwindow.location ='contact_page.html';</script><?php}?>
- How to create an ASP contact form in HTML
- How to create a contact form
- How to enable and edit a contact form (from template #17000)
- How to manage contact details
- How to configure the contact form
