Contact Us Form Bootstrap free download

Contact Us Form Bootstrap

Table of Contents

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="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" target="_blank" rel="noreferrer noopener">https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css</a>">
<link rel="stylesheet" href="h<a href="//pro.fontawesome.com/releases/v5.10.0/css/all.css" target="_blank" rel="noreferrer noopener">ttps://pro.fontawesome.com/releases/v5.10.0/css/all.css</a>">
<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>

</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>

<h3 class="m-b-15">Get in touch</h3>

<hr>

<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>

</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>

<h3 class="m-b-15">Contact Us</h3>

<hr>

<form>

</div>

</div>

<label for="field-2" class="floating-label">Email ID</label>

</div>

</div>

<label for="field-3" class="floating-label">Website</label>

</div>

</div>

<label for="field-4" class="floating-label">Contact Number</label>

</div>

</div>

<label for="field-7" class="floating-label">Message</label>

</div>

</div>

</div>

<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>

</form>

</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;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

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

body {

font-family: "Roboto", Helvetica, sans-serif;

background: #fcfbff;

}

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;
	}
}

100

101

102

103

104

105

@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;

}

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>

<!DOCTYPE html>

<head>

<title>Responsive Contact us Form Bootstrap</title>

</head>

<body>

<h1 class="text-center">Contact Form Bootstrap</h1>

<br>

<h3 class="m-b-15">Get in touch</h3>

<hr>

<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>

</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>

<h3 class="m-b-15">Contact Us</h3>

<hr>

<form>

</div>

</div>

<label for="field-2" class="floating-label">Email ID</label>

</div>

</div>

<label for="field-3" class="floating-label">Website</label>

</div>

</div>

<label for="field-4" class="floating-label">Contact Number</label>

</div>

</div>

<label for="field-7" class="floating-label">Message</label>

</div>

</div>

</div>

<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>

</form>

</div>

</section>

</body>

</html>

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

Source Code

Owl Carousel Slider Bootstrap 5 Example

Bootstrap Automatic Slider free Download

Download Contact us form bootstrap Source Code Here

Contact Us Form Bootstrap Source Code

1 file(s) 35.81 KB

Download Source Code

Live Demo

December 13, 2022

HTMLCSS

Owl Carousel Product Slider in HTML5

Know Details

December 7, 2022

HTMLCSS

Review Page Design in HTML5 Download

Know Details

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

Contact Us Form Bootstrap free download