How to Make HTML Forms for Your Website « Shanq Web : Integrated Web Marketing

How to Make HTML Forms for Your Website

Posted Oct 23 2010 by admin in Web Tutorials with 0 Comments

Your website visitors often want to contact you. For support, to inquire about a product, for link requests or even just to say hello. Many website owners just list their email address, so visitors can write to them. This way of posting contact details is very common, but it has a major drawback: spamers harvest websites searching for email addresses. Once your email gets into their list, you start receiving unwanted ads, various shady discount offers and even viruses. The safest way to allow your visitors to contact you is to include a web form on your website. Doing this is not that complicated, but it requires a certain degree of HTML knowledge and access to your website source. Below is a small HTML form that includes only 3 fields: Name, Email and Message.

This form uses “mailto” function to send the filled data to the specified email address. Let’s break this HTML form into pieces, line by line: 1.

This line includes the beginning of the
tag and the email address that will receive the message. The only thing you should modify is the email. 2. Name:
This line contains the first field from your contact form: an edit box, “name”, that users will use to write their name and a label describing that field. You might also have noticed some properties of the edit box: size currently 10 and the maximum allowed length that is 40. “
” is the HTML tag for new line. 3. Email:
Similar with the line above, it is an edit box for your visitor’s email address. This field is very important because you will use this information to contact your visitor. You can also modify the size and maxlength property of this edit box. 4. Message: This field will contain the message body. It’s not an edit box anymore, because we needed more space. This HTML field is named

. You can modify its height and width by changing the values for “cols” and “rows” properties.  5.<br />
<input type="submit" value="Send message"/> This is the button visitors will press to send you the message. You can change the “value” property from “send message” to anything you want.  Don’t forget to close the form tag by adding </form>
<p> at the end of your HTML email form script.  This method of building a HTML form for your website has a minor drawback: your email address is still visible. It still can be harvested. To hide it, you would need more programming skills, to include the mailto command into a php function.  But don’t worry, there is another way. A simpler and faster way to have a HTML form, and it doesn’t require any programing skills at all. It works even if your server doesn’t support php, and you can benefit from powerful features like receiving attachments, multiple recipients, field validation, message history and anti-spam defence. You just use an online wizard to generate your HTML web form, and then copy-paste the code on your website. <br/><br/></p>
<div style="margin:5px;padding:5px;border:1px solid #c1c1c1;font-size: 10px;">
<p>Ted Peterson uses <a rel="nofollow" onclick="javascript:_gaq.push(['_trackPageview', '/outgoing/article_exit_link']);" href="http://www.123contactform.com">HTML forms</a> generated using the free service of 123ContactForm.com . He designed his email forms using their online wizard.</p>
</div>
<p><script type="text/javascript">SHARETHIS.addEntry({ title: "How to Make HTML Forms for Your Website", url: "http://shanq.net/how-to-make-html-forms-for-your-website/" });</script></p>		<div class="clearboth"></div>
	</div>
				
	<div class="bottom_metadata">
		<span class="tags">
		<strong>Tags</strong>: <em><a href="http://shanq.net/tag/forms/" rel="tag">Forms</a></em>, <em><a href="http://shanq.net/tag/html/" rel="tag">HTML</a></em>, <em><a href="http://shanq.net/tag/website/" rel="tag">Website</a></em>		</span>		
				 <strong>Category:</strong> 
		 <a href="http://shanq.net/category/web-tutorials/" title="View all posts in Web Tutorials" rel="category tag">Web Tutorials</a>					</div>
</div>

<div id="popular_related_posts">	
	<div class="one_half"></div>
	<div class="one_half last">		<h3>Related Posts</h3>
			<ul class="thumbnail_list">		
	    		 
						<li>
					<a class="alignleft" href="http://shanq.net/how-do-i-upload-photos-from-a-camera-to-a-website-such-as-facebook-using-a-macbook/" title="How do i upload photos from a camera to a website such as Facebook using a Macbook?">
					<span class="small_frame"><img src="http://shanq.net/blog/wp-content/themes/infocus/images/empty_thumb.gif" width="60" height="60" alt=""/></span></a>
					<a class="thumbnail_title" href="http://shanq.net/how-do-i-upload-photos-from-a-camera-to-a-website-such-as-facebook-using-a-macbook/" rel="bookmark">How do i upload photos from a camera to a website such as Facebook using a Macbook?</a><br/>
					<a class="date" href="#">September 5, 2011</a>
					<div class="clearboth" />
				</li>				
	    		 
						<li>
					<a class="alignleft" href="http://shanq.net/how-to-open-facebook-website-at-work-if-it-is-blocked/" title="How to open facebook website at work if it is blocked ?">
					<span class="small_frame"><img src="http://shanq.net/blog/wp-content/themes/infocus/images/empty_thumb.gif" width="60" height="60" alt=""/></span></a>
					<a class="thumbnail_title" href="http://shanq.net/how-to-open-facebook-website-at-work-if-it-is-blocked/" rel="bookmark">How to open facebook website at work if it is blocked ?</a><br/>
					<a class="date" href="#">August 28, 2011</a>
					<div class="clearboth" />
				</li>				
	    		 
						<li>
					<a class="alignleft" href="http://shanq.net/how-do-i-show-facebook-events-on-my-organizations-website/" title="How do I show Facebook Events on my organization’s website?">
					<span class="small_frame"><img src="http://shanq.net/blog/wp-content/themes/infocus/images/empty_thumb.gif" width="60" height="60" alt=""/></span></a>
					<a class="thumbnail_title" href="http://shanq.net/how-do-i-show-facebook-events-on-my-organizations-website/" rel="bookmark">How do I show Facebook Events on my organization’s website?</a><br/>
					<a class="date" href="#">August 2, 2011</a>
					<div class="clearboth" />
				</li>				
	    			</ul>		
	  </div>
	<div class="clearboth"></div>
</div>

<div id="respond">
	<h3>Leave a Reply</h3>
    <div class="cancel-comment-reply">
        <a rel="nofollow" id="cancel-comment-reply-link" href="/how-to-make-html-forms-for-your-website/#respond" style="display:none;">Click here to cancel reply.</a>    </div>
    
	
   	<form action="http://shanq.net/blog/wp-comments-post.php" method="post" id="commentform">

<p><input type="text" class="textfield" name="author" id="author" value="" size="22" tabindex="1" /><label  class="textfield_label" for="author">Name *</label></p>
			
	<p><input type="text" class="textfield" name="email" id="email" value="" size="22" tabindex="2" /><label class="textfield_label" for="email">Email *</label></p>
			
	<p><input type="text" class="textfield" name="url" id="url" value="" size="22" tabindex="3" /><label  class="textfield_label" for="url">Website</label></p>
			
				
	<p><textarea class="textarea" name="comment" id="comment" cols="70" rows="10" tabindex="4">