Contact Us Form Bootstrap free download

Contact Us Form Bootstrap

Contact Us Form Bootstrap

Contact us form page is one of the important page for any company website and this is an essential tool in converting a user into a customer. The contact us form can help visitors or customers to ask for information about your products or provide suggestion if any, or raise a request online or share any tips or problems if they are facing while using your website or product.

In this article, you will get a free Responsive contact us form that can be used in your company or blog website. It is fully Responsive and will work seamlessly in any Mobile, Tablet, Laptop and other devices.

In this Contact us form, I have divided it into two columns named as contact-form-box__left and contact-form-box__right. The first column is used for contact details and the second column is used to contact us form where user can enter personal information such as Name, Email Id, Contact number, etc.

The Source code and Demo links are available at the end of the article.

Contact Us Form HTMl Bootstrap free download

So, In this Article, I am going to explain:

  • The basic structure of contact us form CSS3 styling
  • How to create an HTML5 contact form
  • How to create an elegant CSS3 contact us form?

Bootstrap Team Section Design Download

Before writing the HTML and CSS. First, we need to add the following library file in the header section of our contact us form page. The library is easily available in google.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

Download Bootstrap Vertical Tab Source Code

The HTML Code

First, we need to create two boxes. Left box and Right Box.

<div class="contact-form">
      <div class="contact-form-box__left"> </div>
<div class="contact-form-box__right"> </div>
</div>

Under these boxes we have to design the contact us form and contact details. The code snippet below.

<div class="contact-form">
      <div class="contact-form-box__left">
        <h3 class="m-b-15">Get in touch</h3>
        <hr>
        <div> <small class="light-grey"><i class="fas fa-user m-r-5"></i> Name</small>
          <p>HTML CSS Tutorials</p>
        </div>
        <div> <small class="light-grey"><i class="fas fa-envelope m-r-5"></i> Email</small>
          <p>htmlcss3tutorials@gmail.com</p>
        </div>
        <div> <small class="light-grey"><i class="fas fa-phone m-r-5"></i> Phone</small>
          <p>+91 1234567890</p>
        </div>
        <div> <small class="light-grey"><i class="fas fa-map-marker m-r-5"></i> Address</small>
          <p>123 Street, Bangalore, India, 500001</p>
        </div>
        <div class="contact-form-box__left_footer"> <a href="#!"><i class="fab fa-facebook-f"></i></a> <a href="#!"><i class="fab fa-twitter"></i></a> <a href="#!"><i class="fab fa-instagram"></i></a> <a href="#!"><i class="fab fa-youtube"></i></a> </div>
      </div>
      <div class="contact-form-box__right">
        <h3 class="m-b-15">Contact Us</h3>
        <hr>
        <form>
          <div class="lab-grid mb-4">
            <div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
              <div class="floating-label-wrap">
                <input type="text" class="floating-label-field floating-label-field--s1" id="field-1" placeholder="Full Name">
                <label for="field-1" class="floating-label">Full Name</label>
              </div>
              <!-- .floating-label-wrap --> 
            </div>
            <!-- .lab-grid-cell lab-grid-cell--mb-2x -->
            
            <div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
              <div class="floating-label-wrap">
                <input type="email" class="floating-label-field floating-label-field--s1" id="field-2" placeholder="Email">
                <label for="field-2" class="floating-label">Email ID</label>
              </div>
              <!-- .floating-label-wrap --> 
            </div>
            <!-- .lab-grid-cell lab-grid-cell--mb-2x -->
            
            <div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
              <div class="floating-label-wrap">
                <input type="url" class="floating-label-field floating-label-field--s1" id="field-3" placeholder="Website">
                <label for="field-3" class="floating-label">Website</label>
              </div>
              <!-- .floating-label-wrap --> 
            </div>
            <!-- .lab-grid-cell lab-grid-cell--mb-2x -->
            
            <div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
              <div class="floating-label-wrap">
                <input type="tel" class="floating-label-field floating-label-field--s1" id="field-4" placeholder="Contact Number">
                <label for="field-4" class="floating-label">Contact Number</label>
              </div>
              <!-- .floating-label-wrap --> 
            </div>
            <!-- .lab-grid-cell lab-grid-cell--mb-2x -->           
            <div class="lab-grid-cell lab-grid-cell--mb-2x w-full">
              <div class="floating-label-wrap">
                <textarea class="floating-label-field floating-label-field--s1" id="field-7" placeholder="Textarea" row="15"></textarea>
                <label for="field-7" class="floating-label">Message</label>
              </div>
              <!-- .floating-label-wrap --> 
            </div>
            <!-- .lab-grid-cell lab-grid-cell--mb-2x --> 
          </div>
          <!-- .lab-grid -->
          <button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
        </form>
      </div>
    </div>

The CSS Code

The following CSS is used to design the Contact us form.

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap");
body {
  font-family: "Roboto", Helvetica, sans-serif;
  background: #fcfbff;
}
p{
	font-size: 14px;
}
.section-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}
.m-b-15 {
  margin-bottom: 15px;
}
.m-r-5 {
  margin-right: 5px;
}
.light-grey {
  color: #cbcbcb;
}
.contact-form {
  background: #fff;
  box-shadow: 0 23px 73px -17px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 993px) {
  .contact-form {
    flex-wrap: nowrap;
  }
}
.contact-form-box__left {
  background: #4b65ee; /* fallback for old browsers */
  background-image: url("../images/bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 30px 30px 80px 30px;
  width: 100%;
  border-radius: 5px;
  position: relative;
}
@media (min-width: 993px) {
  .contact-form-box__left {
    width: 350px;
    transform: scale(1.05);
  }
}
.contact-form-box__left_footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px;
  text-align: center;
}
.contact-form-box__left_footer a {
  margin-right: 2px;
  padding: 8px;
  color: #4b65ee;
}
.contact-form-box__left_footer a:hover {
  color: #fff;
}
.contact-form-box__right {
  padding: 30px;
  width: 100%;
}
@media (min-width: 993px) {
  .contact-form-box__right {
    padding: 60px;
    width: calc(100% - 350px);
  }
}
.btn-primary {
  background: #4b65ee;
  border-color: #4b65ee;
}
.btn-primary:hover {
  background: #006fbc;
  border-color: #006fbc;
}
/* Making the label break the flow */
.floating-label {
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
  z-index: 1500;
}
/* Hide the browser-specific focus styles */
.floating-label-field {
  color: rgba(44, 62, 80, .75);
  border-width: 0;
  z-index: 2000;
}
.floating-label-field:focus {
  outline: 0;
  box-shadow: 0;
}
.floating-label-field::placeholder {
  color: rgba(44, 62, 80, .5);
}
/* Make the label and field look identical on every browser */
.floating-label, .floating-label-field {
  font: inherit;
  line-height: 1;
  display: block;
  width: 100%;
}
.floating-label-field, .floating-label-wrap {
  position: relative;
}
/* Input Style #1 */
.floating-label-field--s1 {
  transition: border-color .25s ease-in-out;
  color: rgb(71 71 71);
  border-bottom: 1px solid rgb(75 101 238);
  background-color: transparent;
}
.floating-label-field--s1 + .floating-label {
  transition: transform .25s, opacity .25s ease-in-out;
  transform-origin: 0 0;
  opacity: .5;
}
.floating-label-field--s1:focus, .floating-label-field--s1:not(:placeholder-shown) {
  border-color: rgb(75 101 238);
}
.floating-label-field--s1:focus + .floating-label, .floating-label-field--s1:not(:placeholder-shown) + .floating-label {
  transform: translate(.25em, -30%) scale(.8);
  opacity: .25;
}
.floating-label-field--s1:valid:not(:placeholder-shown) {
  border-color: rgb(39 131 77 / 85%);
}
.floating-label-field--s1:invalid {
  border-color: rgb(199 9 36 / 85%);
}
/* Input Style #2 */
.floating-label-field--s2 {
  transition: background-color .25s ease-in-out;
  border: 2px solid #fff;
  border-radius: 5px;
  background-color: #fff;
}
.floating-label-field--s2 + .floating-label {
  visibility: hidden;
  transition: transform .25s, visibility .5s, opacity .5s ease-in-out;
  opacity: 0;
}
.floating-label-field--s2:focus + .floating-label, .floating-label-field--s2:not(:placeholder-shown) + .floating-label {
  visibility: visible;
  transform: translateY(-80%);
  opacity: .5;
}
.floating-label-field--s2:valid:not(:placeholder-shown) {
  border-color: #adefc8;
  background-color: #adefc8;
}
.floating-label-field--s2:invalid {
  border-color: #ffe0e3;
  background-color: #ffe0e3;
}
.floating-label-field--s3 {
  padding: 1.5em;
  transition: border-color .25s ease-in-out;
  color: rgba(255, 255, 255, .75);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 5px;
  background-color: transparent;
}
.floating-label-field--s3 + .floating-label {
  position: absolute;
  top: .75em;
  left: .75em;
  display: inline-block;
  width: auto;
  margin: 0;
  padding: .75em;
  transition: transform .25s, opacity .25s, padding .25s ease-in-out;
  transform-origin: 0 0;
  color: rgba(255, 255, 255, .5);
}
.floating-label-field--s3:focus, .floating-label-field--s3:not(:placeholder-shown) {
  border-color: rgba(255, 255, 255, .1);
}
.floating-label-field--s3:focus + .floating-label, .floating-label-field--s3:not(:placeholder-shown) + .floating-label {
  z-index: 2500;
  padding: .75em;
  transform: translate(0, -2em) scale(.9);
  color: rgba(255, 255, 255, .25);
  background-color: #2c3e50;
}
/* Common Styles */
/* Identical inputs on all browsers */
.floating-label-field--s1:not(textarea), .floating-label-field--s2:not(textarea), .floating-label-field--s3:not(textarea) {
  max-height: 4em;
}
.floating-label-field--s1, .floating-label-field--s1 + .floating-label, .floating-label-field--s2, .floating-label-field--s2 + .floating-label {
  padding: 1.5em;
}
.floating-label-field--s1 + .floating-label, .floating-label-field--s2 + .floating-label {
  z-index: 1500;
}
.floating-label-field--s1::placeholder, .floating-label-field--s3::placeholder {
  color: transparent;
}

The SCSS Code

The SCSS style is used to make the Responsive contact us form.

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap");

$background: #fcfbff;
$primary: #2f2963;
$gradient1: #4a4675;
$gradient2: #1b183b;

// Mixin
@mixin phone {
	@media (max-width: 599px) {
		@content;
	}
}
@mixin tablet {
	@media (min-width: 600px) {
		@content;
	}
}
@mixin laptop {
	@media (min-width: 993px) {
		@content;
	}
}
@mixin desktop {
	@media (min-width: 1200px) {
		@content;
	}
}

body {
	font-family: "Roboto", Helvetica, sans-serif;
	background: $background;
}

.section-100 {
	padding-top: 100px;
	padding-bottom: 100px;
}

.m-b-15 {
	margin-bottom: 15px;
}

.m-r-5 {
	margin-right: 5px;
}

.light-grey {
	color: #aaa;
}

.contact-form {
	background: #fff;
	box-shadow: 0 23px 73px -17px rgba(0, 0, 0, 0.16);
	display: flex;
	flex-wrap: wrap;
	@include laptop {
		flex-wrap: nowrap;
	}
	&__left {
		background: linear-gradient(to bottom, $gradient1, $gradient2);
		color: #fff;
		padding: 30px 30px 80px 30px;
		width: 100%;
		border-radius: 5px;
		position: relative;
		@include laptop {
			width: 350px;
			transform: scale(1.05);
		}
		&_footer {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 30px;
			a {
				margin-right: 2px;
				padding: 8px;
				color: #ccc;
				&:hover {
					color: #fff;
				}
			}
		}
	}
	&__right {
		padding: 30px;
		width: 100%;
		@include laptop {
			padding: 60px;
			width: calc(100% - 350px);
		}
	}
}

.btn-primary {
	background: $primary;
	border-color: $primary;
	&:hover {
		background: $primary;
		border-color: $primary;
	}
}

Responsive Contact us Form Bootstrap

Full HTML Source Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us Form Bootstrap</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<section class="section-100">
  <div class="container">
    <h1 class="text-center">Contact Form Bootstrap</h1>
    <br>
    <br>
    <br>
    <div class="contact-form">
      <div class="contact-form-box__left">
        <h3 class="m-b-15">Get in touch</h3>
        <hr>
        <div> <small class="light-grey"><i class="fas fa-user m-r-5"></i> Name</small>
          <p>HTML CSS Tutorials</p>
        </div>
        <div> <small class="light-grey"><i class="fas fa-envelope m-r-5"></i> Email</small>
          <p>htmlcss3tutorials@gmail.com</p>
        </div>
        <div> <small class="light-grey"><i class="fas fa-phone m-r-5"></i> Phone</small>
          <p>+91 1234567890</p>
        </div>
        <div> <small class="light-grey"><i class="fas fa-map-marker m-r-5"></i> Address</small>
          <p>123 Street, Bangalore, India, 500001</p>
        </div>
        <div class="contact-form-box__left_footer"> <a href="#!"><i class="fab fa-facebook-f"></i></a> <a href="#!"><i class="fab fa-twitter"></i></a> <a href="#!"><i class="fab fa-instagram"></i></a> <a href="#!"><i class="fab fa-youtube"></i></a> </div>
      </div>
      <div class="contact-form-box__right">
        <h3 class="m-b-15">Contact Us</h3>
        <hr>
        <form>
          <div class="lab-grid mb-4">
            <div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
              <div class="floating-label-wrap">
                <input type="text" class="floating-label-field floating-label-field--s1" id="field-1" placeholder="Full Name">
                <label for="field-1" class="floating-label">Full Name</label>
              </div>
              <!-- .floating-label-wrap --> 
            </div>
            <!-- .lab-grid-cell lab-grid-cell--mb-2x -->
            
            <div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
              <div class="floating-label-wrap">
                <input type="email" class="floating-label-field floating-label-field--s1" id="field-2" placeholder="Email">
                <label for="field-2" class="floating-label">Email ID</label>
              </div>
              <!-- .floating-label-wrap --> 
            </div>
            <!-- .lab-grid-cell lab-grid-cell--mb-2x -->
            
            <div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
              <div class="floating-label-wrap">
                <input type="url" class="floating-label-field floating-label-field--s1" id="field-3" placeholder="Website">
                <label for="field-3" class="floating-label">Website</label>
              </div>
              <!-- .floating-label-wrap --> 
            </div>
            <!-- .lab-grid-cell lab-grid-cell--mb-2x -->
            
            <div class="lab-grid-cell lab-grid-cell--mb-2x w-third--d w-half--t w-full--m">
              <div class="floating-label-wrap">
                <input type="tel" class="floating-label-field floating-label-field--s1" id="field-4" placeholder="Contact Number">
                <label for="field-4" class="floating-label">Contact Number</label>
              </div>
              <!-- .floating-label-wrap --> 
            </div>
            <!-- .lab-grid-cell lab-grid-cell--mb-2x -->           
            <div class="lab-grid-cell lab-grid-cell--mb-2x w-full">
              <div class="floating-label-wrap">
                <textarea class="floating-label-field floating-label-field--s1" id="field-7" placeholder="Textarea" row="15"></textarea>
                <label for="field-7" class="floating-label">Message</label>
              </div>
              <!-- .floating-label-wrap --> 
            </div>
            <!-- .lab-grid-cell lab-grid-cell--mb-2x --> 
          </div>
          <!-- .lab-grid -->
          <button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
        </form>
      </div>
    </div>
  </div>
</section>
</body>
</html>

Download Contact us form bootstrap Source Code

Hope this article will help you to create a responsive Contact us form bootstrap.

  1. Pricing Table Design Bootstrap 5?
  2. How to Display Content on hovering Card using CSS?
  3. How to create a Portfolio Gallery?
  4. FAQ Page with Show and Hide Questions and Answers?
  5. Bootstrap Team Section Design Download
  6. Bootstrap Carousel with Captions and Thumbnails Free Download
  7. Bootstrap Table Search Filter Free Download

Source Code

Owl Carousel Slider Bootstrap 5 Example

Bootstrap Automatic Slider free Download

Download Contact us form bootstrap Source Code Here

Icon

Contact Us Form Bootstrap Source Code

1 file(s) 35.81 KB
Download Source Code

Live Demo

Related Post

Owl Carousel Product Slider in HTML5
December 13, 2022
HTMLCSS

Owl Carousel Product Slider in HTML5

Know Details
Review Page Design in HTML5 Download
December 7, 2022
HTMLCSS

Review Page Design in HTML5 Download

Know Details
Product Grid in HTML5
December 4, 2022
HTMLCSS

Product Grid in HTML5

Know Details
jQuery Carousel Slider With Accordion Style Transitions
June 6, 2022
HTMLCSS

jQuery Carousel Slider With Accordion Style Transitions

Know Details
Testimonials HTML Template Free Download
January 15, 2022
HTMLCSS

Testimonials HTML Template Free Download

Know Details
Bootstrap Table with Pagination and Search
January 9, 2022
HTMLCSS

Bootstrap Table with Pagination and Search

Know Details

Leave a Reply

Your email address will not be published. Required fields are marked *