Responsive HTML Contact Form Free Download

Responsive Contact Form Free Download: Today we have a clean coded HTML form for a contact page that you can implement on your website.

I am not saying this is the best form but it is stylish and you sure love with it. It’s designed in a well way with a nice-looking background that grabs user attention.

We know that the get in touch form is very important and lethal crucial for any website. It works like a messenger that passes the opinions or inquiries of site users to a webmaster.

There is endless get in touch forms on the internet however unluckily maximum of them do not give an attractive look and feel.

Also see: HTML5 Sticky Contact Form Fixed at Bottom

So here comes a detailed tutorial to train you to build an advanced user consent form from scratch primarily based on purely HTML5 and CSS3.

It’s a beautiful Contact Form build with the latest version of CSS3 and HTML5. We will show you how to build it step by step. The form has a nice looking design.

We included all the required fields in the form. This form provides an eye-catching look and feel.

Build a Responsive Contact Form with HTML

The first thing about this CSS Tutorial you need to do is to create the HTML shape. We need one box container that will handle all other divs and fields.

We will make the header of the form that will have some heading and text. The primary HTML code is subsequent:

<div class="contactFrom">
  <div class="row header">
    <h1>Get in Touch with us</h1>
    <h3>We will be glad to respond and take your suggestions and feedback on our services.</h3>
  </div>
</div>          

Next, We will start building with HTML5 Form code. We have placed the form inside the div class name.row body Then we use ul li elements to handle the label form fields.

We also use the class name .left and .right to align the fields and labels.

<div class="row body">
<form action="#">
  <ul>
    <li>
      <p class="left">
        <label for="first_name">Keith</label>
        <input type="text" name="first_name" placeholder="Keith" />
      </p>
      <p class="pull-right">
        <label for="last_name">Picinic</label>
        <input type="text" name="last_name" placeholder="Picinic" />      
      </p>
    </li>
  </ul>
</form>  
</div>

If you want to make the field full width, You simply need to add class .full to the P tag.

<li>
  <p class="full">
    <label for="tel">Subject <span class="req">*</span></label>
    <input type="tel" name="tel" placeholder="Subject" />
  </p>
</li> 

Here is a form submit button HTML code. You can find all other HTML code inside the download source.

<li>
  <input class="btn btn-submit" type="submit" value="Submit" />
  <small>or press <strong>enter</strong></small>
</li>

CSS Style for Contact Form

Before to start with styling, You need to make sure to add the box-sizing CSS element for inner resizing.

.contactFrom div, 
.contactFrom textarea, 
.contactFrom input {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Let’s have a look at the styling of form fields.

.contactFrom form label {
  display: block;
  margin: 0 0 0.5em 0;
  color: #49334a;
  font-size: 1em;
  text-transform:capitalize;
}
.contactFrom form input {
  margin: 0 0 0.5em 0;
  border: 1px solid #ccc;
  padding: 6px 10px;
  color: #555;
  font-size: 1em;
}
.contactFrom form ul li p.full input {
	width:100%;
}
.contactFrom form textarea {
  border: 1px solid #ccc;
  padding: 6px 10px;
  width: 100%;
  color: #555;
}
.contactFrom form small {
  color: #49334a;
  margin: 0 0 0 0.5em;
}

To style the form button, You need to add the following code.

.contactFrom .btn {
  font-size: 1.0625em;
  display: inline-block;
  padding: 0.74em 1.5em;
  margin: 1.5em 0 0;
  color: #fff;
  border-width: 0 0 0 0;
  border-bottom: 5px solid;
  border-radius:5px;
  text-transform: uppercase;
  background-color: #b3b3b3;
  border-bottom-color: #8c8c8c;
  font-weight: 400;
  cursor:pointer;
}
.contactFrom .btn:hover {
  background-color: #bfbfbf;
}
.contactFrom .btn.btn-submit {
  background-color: #8b608d;
  border-bottom-color: #5b345d;
}
.contactFrom .btn.btn-submit:hover {
  background-color: #49334a;
  border-bottom-color: #5b345d;
}

I am not going to add all the CSS code here. I just place necessary CSS code here but don’t worry you will find work examples in download source. Feel free to download and customize this responsive HTML contact form.