Contact Us form is created by using Bootstrap 4 and little codes of CSS. See a small list of Bootstrap forms that may be useful for you. We can use this form to get in touch with customers and provide a place where your customer or user can talk with you about the services.
HTML
<div class="contact-form">
<div class="form-header text-center">
<h2>Get in touch</h2>
<p>Let’s talk about your project</p>
</div>
<form>
<div class="row">
<div class="form-group col-sm-6">
<input type="text" name="fname" placeholder="First Name" class="form-control" required>
</div>
<div class="form-group col-sm-6">
<input type="text" name="lname" placeholder="Last Name" class="form-control">
</div>
</div>
<div class="form-group">
<input type="email" name="email" placeholder="Email Id" class="form-control" required>
</div>
<div class="form-group">
<input type="text" name="number" placeholder="Mobile Number" class="form-control">
</div>
<div class="form-group">
<select class="form-control">
<option>Select Services</option>
<option>Packers and Movers</option>
<option>Transport Insurance</option>
<option>Warehousing Services</option>
<option>International Shifting</option>
<option>Car Transportation</option>
<option>Office Shifting</option>
<option>Domestic Shifting</option>
</select>
</div>
<div class="form-group">
<textarea placeholder="Your Message" class="form-control"></textarea>
</div>
<div class="form-group">
<button class="btn btn-primary">Submit</button>
</div>
</form>
</div>CSS
.contact-form {
background-color: #fbfbfb;
padding: 15px 20px 15px;
border: 1px solid #ececec;
width: 450px;
margin: 50px auto;
}
.contact-form .form-header {
margin-bottom: 40px;
}
.contact-form form textarea {
max-width: 100%;
min-width: 100%;
min-height: 120px;
}
.contact-form form .btn {
width: 100%;
}
.contact-form .form-header h2 {
font-weight: bold;
color: #03A9F4;
}
/*-- CSS for extra small devices--*/
@media (max-width: 767px){
.contact-form {
width: 90%;
}
}