HTML5 Samples

How to Make HTML Forms for Your Website

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.
<form method=”post” action=”mailto:youremailaddress@domain.com”> Name: <input type=”text” size=”10″ maxlength=”40″ name=”name”> <br> Email: <input type=”email” size=”10″ maxlength=”10″ name=”email”> <br> Message: <textarea rows=”4″ cols=”20″ name=”message”></textarea> <input type=”submit” value=”Send message”/> </form>
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. <form method=”post” action=”mailto:youremailaddress@domain.com”> This line includes the beginning of the <form> tag and the email address that will receive the message. The only thing you should modify is the email.
2. Name: <input type=”text” size=”10″ maxlength=”40″ name=”name”> <br>
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. “<br>” is the HTML tag for new line.
3. Email: <input type=”email” size=”10″ maxlength=”10″ name=”email”> <br>
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: <textarea rows=”4″ cols=”20″ name=”message”></textarea>
This field will contain the message body. It’s not an edit box anymore, because we needed more space. This HTML field is named <textarea>. You can modify its height and width by changing the values for “cols” and “rows” properties.
5. <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> 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.

Find More HTML 5 Forms Articles

Incoming search terms:

• html5 mailto
• html5 form wizard
• html5 edit box
• html5 mailto form
• html5 editbox
• html5 mailto example
• html5 form wizards sample sites
• html5 mailto:
• html5 email form add attachtmen
• html5 email contact form with attachments