How to Create Working Contact Form for website?

Contact Form is the best way to get customer feedback, queries, sales and lead. It doesn't matter if you own a small or large website, it must have a working contact form where visitors and users can submit their questions, feedbacks and queries.

In this tutorial, we'll learn how to create a working contact form for any kind of website. This tutorial divided into two parts, one is the frontend and second is the backend. First we'll set our HTML Markup or Frontend Design.

First Step: Set the Markup
<form class="contact-form">
  <h4>Contact Form</h4>
  <input name="name" type="text" placeholder="Enter Your Name"/>
  <input name="email" type="email" placeholder="Enter Your Email"/>
  <select>
    <option name="department" value="" disabled="disabled" selected="disabled" hidden="hidden">Select Department</option>
    <option value="sales">Sales</option>
    <option value="billing">Billing</option>
    <option value="support">Support</option>    
  </select>
  <input name="subject" type="text" placeholder="Enter  Email Subject"/>
  <textarea name="message" placeholder="Enter Your Message" rows="4"></textarea>
  <button type="submit">Send</button>
</form>

name is the important attribute of input fields, it can be used to take user's input data from input field. type is the HTML5 attribute that define field type and validate data according to type. for example if you set email in type field then it will accept only a valid email. placeholder can be used to show input field description. it will auto hide when user enter data into field.


Second Step: Give Some Design using CSS
.contact-form,.contact-form *{
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;  
} 
 .contact-form{
  background:#fff; /* background color of form */
  padding:15px; /* Set All Side Padding of Form */
  max-width:400px; /* Set form width */
  margin:20px auto 20px auto; /* Set form margin */
}

/* Text Fields, and Other Inputs design */
.contact-form input,
.contact-form textarea,
.contact-form select,
.contact-form button[type="submit"]{
  width:100%; /* 100% Fields width */
  padding:8px 10px; /* Padding for fields */
  font-size:.9rem; /* font size / text size */
  margin-bottom:.5rem; /* fields bottom margin */  
  font-family:inherit; /* font family */
  color:inherit; /* color */
}
/* contact form heading */
.contact-form h4{
  font-size:1.1rem;
  font-weight:bold;
  text-align:center;
  margin:0 0 15px 0;
  color:inherit;
}
/* Lets Design our Submit button */
.contact-form button[type="submit"]{
  width:auto;
  padding-left:20px;
  padding-right:20px;
  border-color:transparent;
  background-color:#0acaf8;
  color:#fff;
}

This Code can be added into your website stylesheet or before closing </head> section followed by <style></style>


Full Code with Live Preview:

See the Pen Simple Contact Form with CSS by Rahul Saini (@irahulsaini) on CodePen.

Please Note:- Form Layout can be changed after integrating into website because of master stylesheet of your website.