You could be asking yourself, why do I want a contact form? Can not I simply put in my email address on my site, so people can email me?

Why do we need an HTML form?

That is a general question from novices since they’re terrified that incorporating a contact form demands code understanding. The truth is that you do not have to know some code. This step-by-step guide to incorporating a contact form is written for complete beginners.

Below are the top 3 reasons why a contact form is much better than pasting your email address onto a webpage.

Spambots frequently scratch sites for your own mailto: email address label. When you place your email address on the site, you will begin to be given a whole lot of spam emails. On the flip side, when you use a contact form, you’ll do away with virtually all spam emails.

When emailing, folks do not always send you all of the details which you require. Using a contact form, you can tell the user just what info you’re searching for (like their telephone number, budget, etc.).

Contact forms help you to save time in more significant ways than you can imagine. Besides consistent advice we mentioned previously could even utilize form confirmations to inform the consumer what would be the future actions. Like watch a movie or wait around 24 hours to receive a reply, so that they do not send you multiple inquiries.

How to get an HTML5 form template for free?

<form class="form-style-7">
<ul>
<li>
<label for="name">Name</label>
<input type="text" name="name" maxlength="100">
<span>Enter your full name here</span>
</li>
<li>
<label for="email">Email</label>
<input type="email" name="email" maxlength="100">
<span>Enter a valid email address</span>
</li>
<li>
<label for="url">Website</label>
<input type="url" name="url" maxlength="100">
<span>Your website address (eg: http://www.google.com)</span>
</li>
<li>
<label for="bio">About You</label>
<textarea name="bio" onkeyup="adjust_textarea(this)"></textarea>
<span>Say something about yourself</span>
</li>
<li>
<input type="submit" value="Send This" >
</li>
</ul>
</form>

The CSS:

<style type="text/css">
.form-style-7{
max-width:400px;
margin:50px auto;
background:#fff;
border-radius:2px;
padding:20px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-7 h1{
display: block;
text-align: center;
padding: 0;
margin: 0px 0px 20px 0px;
color: #5C5C5C;
font-size:x-large;
}
.form-style-7 ul{
list-style:none;
padding:0;
margin:0; 
}
.form-style-7 li{
display: block;
padding: 9px;
border:1px solid #DDDDDD;
margin-bottom: 30px;
border-radius: 3px;
}
.form-style-7 li:last-child{
border:none;
margin-bottom: 0px;
text-align: center;
}
.form-style-7 li > label{
display: block;
float: left;
margin-top: -19px;
background: #FFFFFF;
height: 14px;
padding: 2px 5px 2px 5px;
color: #B9B9B9;
font-size: 14px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
}
.form-style-7 input[type="text"],
.form-style-7 input[type="date"],
.form-style-7 input[type="datetime"],
.form-style-7 input[type="email"],
.form-style-7 input[type="number"],
.form-style-7 input[type="search"],
.form-style-7 input[type="time"],
.form-style-7 input[type="url"],
.form-style-7 input[type="password"],
.form-style-7 textarea,
.form-style-7 select 
{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
display: block;
outline: none;
border: none;
height: 25px;
line-height: 25px;
font-size: 16px;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-7 input[type="text"]:focus,
.form-style-7 input[type="date"]:focus,
.form-style-7 input[type="datetime"]:focus,
.form-style-7 input[type="email"]:focus,
.form-style-7 input[type="number"]:focus,
.form-style-7 input[type="search"]:focus,
.form-style-7 input[type="time"]:focus,
.form-style-7 input[type="url"]:focus,
.form-style-7 input[type="password"]:focus,
.form-style-7 textarea:focus,
.form-style-7 select:focus 
{
}
.form-style-7 li > span{
background: #F3F3F3;
display: block;
padding: 3px;
margin: 0 -9px -9px -9px;
text-align: center;
color: #C0C0C0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.form-style-7 textarea{
resize:none;
}
.form-style-7 input[type="submit"],
.form-style-7 input[type="button"]{
background: #2471FF;
border: none;
padding: 10px 20px 10px 20px;
border-bottom: 3px solid #5994FF;
border-radius: 3px;
color: #D2E2FF;
}
.form-style-7 input[type="submit"]:hover,
.form-style-7 input[type="button"]:hover{
background: #6B9FFF;
color:#fff;
}
</style>