How to Create Contact Us form in HTML : Step by step Procedure With Screenshots

Importance of Contact Us forms :

Contact forms are integral and most essential part of any website.Let it be a simple blog or a really famous MNC website or a magazine website. Everyone wants a feedback from customers and contact form are great way to provide feedback.Apart from that they can be used for inquiries and many other things.

Contact form basically consists of two things :

  1. HTML and CSS
  2. Php code for processing input

Here HTML will cover the design part of contact form. You can  learn more about HTML here 

HTML Tutorials for absolute beginners : Basic code structure and links.  

What we do, when we want to contact a site owner? We fill all the details in contact form such as Name , Email , Message etc. and this details are mailed to site owner. Who mails these details? Don’t worry!its not a rocket science. In the background of contact form there is  a php code which takes the input filled by customer and mails it to respective email address.In this tutorial we are going to study how to create contact form in HTML and in next tutorial we will cover the php processing part.

Learn more about PHP here, Basic PHP tutorials for Absolute Beginners

contact

HTML Part of Contact Form :

A simple contact form consist of Name,Email,Message and a submit button.The code of such simple contact form will be as shown below.

&lt;form action="#" method="post"&gt;<br /><br />&lt;span&gt;Name :&lt;/span&gt; &lt;input name="Name :" type="text"  maxlength="40"  /&gt;&lt;br/&gt;<br /><br />&lt;span&gt;Email :&lt;/span&gt; &lt;input name="Email :" type="text"  maxlength="40"  /&gt;&lt;br/&gt;<br /><br />&lt;span&gt;Message : &lt;/span&gt;<br /><br />&lt;textarea name="Message" cols="50" rows="10"&gt;<br /><br />&lt;input type="submit" id="button" /&gt;<br /><br />&lt;/form&gt;<br /><br />&lt;style type="text/css"&gt;<br /><br />.span {<br /><br />float: left;<br /><br />width: 100px;<br /><br />}<br /><br />#button {<br /><br />position:relative;<br /><br />left: 38%;<br /><br />}<br /><br />&lt;/style&gt;

contact form demo

  • We have inserted some css code to enhance visibility and design.
  • The span width makes uniform width towards left for all the three inputs and aligns everything in straight line.
  • We can make the same forms more attractive.Below are some examples.

Attractive Contact Forms :

Below are the examples of attractive contact forms with their code . You can view live demo or download the contact forms for free.If you want to use it just give our link at the bottom.

download

demo

HTML code :

<br /><br />&lt;form&gt;<br /><br />&lt;div class="box"&gt;<br /> &lt;h1&gt;Contact Form :&lt;/h1&gt;<br /> &lt;label&gt;<br /><br />&lt;span&gt;Name* : &lt;/span&gt;<br /> &lt;input type="text" class="input_text" name="Name " id="Name" /&gt;<br /> &lt;/label&gt;<br /> &lt;label&gt;<br /><br />&lt;span&gt;Email* : &lt;/span&gt;<br /> &lt;input type="text" class="input_text" name="Email " id="Email" /&gt;<br /> &lt;/label&gt;<br /><br />&lt;label&gt;<br /><br />&lt;span&gt;Subject* : &lt;/span&gt;<br /> &lt;input type="text" class="input_text" name="Subject " id="Subject" /&gt;<br /> &lt;/label&gt;<br /><br />&lt;label&gt;<br /> &lt;span&gt;Message* :&lt;/span&gt;<br /> &lt;textarea class="message" name="feedback" id="feedback"&gt;<br /> &lt;input type="button" class="button" value="Submit Form" /&gt;<br /> &lt;/label&gt;<br /><br />&lt;/div&gt;<br /> &lt;/form&gt;

CSS code :

*{ margin:0; padding:0; }
body{ font:100% normal “Trebuchet MS”, Arial, Helvetica, sans-serif; background:#333333; }

form,input,select,textarea { margin:0; padding:0; color:
#FFF; }

.box {
width: 500px;
position:relative;
border:1px solid #666;
height: auto;
margin-top: 100px;
margin-right: 200px;
margin-bottom: 100px;
margin-left: 200px;
}.box h1 {
color: #FFF;
border: 1px solid #666;
padding-top: 10px;
padding-bottom: 10px;
font-size: 18px;
text-align: center;
}
.box label {
float: left;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #666;
position: relative;
}
.box label span {

float: left;
text-align:right;
display: block;
width:100px;
padding:5px 20px 0 0;
font-size:14px;
color:#FFFFFF;
}

.box .input_text {

padding:10px 10px;
width:250px;
background:#666666;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;

}

.box .message {

padding: 7px 7px;
background-color:#666666;

border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
width:350px;
height: 150px;

}

.box .button {
position: relative;
top:inherit;
width: 100px;
margin-top:10px;
padding:7px 7px;
bottom: inherit;
left:370px;
background-color: #FF33FF;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-top-color: #FF33FF;
border-right-color: #FF33FF;
border-bottom-color: #FF33FF;
border-left-color: #FF33FF;
}

Understanding the code :

Here we taken a div class=”box” under which we have wrapped every component of form.If you are an absolute beginner and unable to understand anything you can go to our basic HTML tutorial series for better understanding.You can download all the attractive forms from below link.

download

If you have any problem please ask it in comments section or you can mail me through contact form:). Share the post with your friends if you find it useful.