Bootstrap Forms:

Bootstrap Responsive Contact us Form with Background Image

Contact Us Web Form is one of the most important parts of all websites and you have to consider it for your page. If you have a website, it is better to use these kinds of forms to interest audiences. The Bootstrap Responsive Contact Us Form with Background Image is presented in this post with functional performance. This HTML Contact Us Form allows you to interact with your audiences and be aware of their opinion. People can easily share their opinion with you and as a result, it helps you improve your page. So, using the Pure CSS Web Form can be a great idea for different kinds of websites.

As the following preview shows, this Simple Contact Us Form has a white and pure background. The writings on this form are black with a normal font. This Contact Us Background Image includes five sections with simple borders. These fields include name, email address, phone number, subject, and message. The audiences can write their opinion in the last field. After filling in all blanks, you can choose the “SEND” option and the website admin can easily see your opinion. The confirmation field is black with white text.

Contact Us Web Form

HTML Contact Us Form

Pure CSS Web Form

Simple Contact Us Form

Contact Us Background Image

<!-- This script got from frontendfreecode.com -->
<header class="ScriptHeader">
    <div class="rt-container">
    	<div class="col-rt-12">
        	<div class="rt-heading">
            	<h1>Responsive Contact Us Page Example</h1>
            </div>
        </div>
    </div>
</header>
<section>
    <div class="rt-container">
        <div class="col-rt-12">
            <div class="Scriptcontent">
               <div>
                 <div class="container">
                  <div class="contact-parent">
                    <div class="contact-child child1">
                        <p>
                            <i class="fas fa-map-marker-alt"></i> Address <br />
                            <span> Your Address
                                <br />
                                Your Address
                            </span>
                        </p>
                        <p>
                            <i class="fas fa-phone-alt"></i> Let's Talk <br />
                            <span> 0787878787</span>
                        </p>
                        <p>
                            <i class=" far fa-envelope"></i> General Support <br />
                            <span>contact@example.com</span>
                        </p>
                    </div>
                    <div class="contact-child child2">
                        <div class="inside-contact">
                            <h2>Contact Us</h2>
                            <h3>
                               <span id="confirm">
                            </h3>
                            <p>Name *</p>
                            <input id="txt_name" type="text" Required="required">
                            <p>Email *</p>
                            <input id="txt_email" type="text" Required="required">
                            <p>Phone *</p>
                            <input id="txt_phone" type="text" Required="required">
                            <p>Subject *</p>
                            <input id="txt_subject" type="text" Required="required">
                            <p>Message *</p>
                            <textarea id="txt_message" rows="4" cols="20" Required="required" ></textarea>   
                            <input type="submit" id="btn_send" value="SEND">
                        </div>
                    </div>
                  </div>
                </div>
              </div>
    		</div>
		</div>
    </div> 
</section><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900');
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
article, header, section, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}
body {
	background: #f2eee1 none repeat scroll 0 0;
	color: #222;
	font-size: 100%;
	line-height: 24px;
	margin: 0;
	padding: 0;
	font-family: "Raleway", sans-serif;
}
a {
	font-family: "Raleway", sans-serif;
	text-decoration: none;
	outline: none;
}
a:hover, a:focus {
	color: #373e18;
}
section {
	float: left;
	width: 100%;
	padding-bottom: 3em;
}
h2 {
	color: #1a0e0e;
	font-size: 26px;
	font-weight: 700;
	margin: 0;
	line-height: normal;
	text-transform: uppercase;
}
h2 span {
	display: block;
	padding: 0;
	font-size: 18px;
	opacity: 0.7;
	margin-top: 5px;
	text-transform: uppercase;
}
#float-right {
	float: right;
}
.ScriptTop {
	background: #fff none repeat scroll 0 0;
	float: left;
	font-size: 0.69em;
	font-weight: 600;
	line-height: 2.2;
	padding: 12px 0;
	text-transform: uppercase;
	width: 100%;
}
.ScriptTop ul {
	margin: 24px 0;
	padding: 0;
	text-align: left;
}
.ScriptTop li {
	list-style: none;
	display: inline-block;
}
.ScriptTop li a {
	background: #6a4aed none repeat scroll 0 0;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	padding: 5px 18px;
	text-decoration: none;
	text-transform: capitalize;
}
.ScriptTop li a:hover {
	background: #000;
	color: #fff;
}
.ScriptHeader {
	float: left;
	width: 100%;
	padding: 2em 0;
}
.rt-heading {
	margin: 0 auto;
	text-align: center;
}
.Scriptcontent {
	line-height: 28px;
}
.ScriptHeader h1 {
	font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	color: #6a4aed;
	font-size: 26px;
	font-weight: 700;
	margin: 0;
	line-height: normal;
}
.ScriptHeader h2 {
	color: #312c8f;
	font-size: 20px;
	font-weight: 400;
	margin: 5px 0 0;
	line-height: normal;
}
.ScriptHeader h1 span {
	display: block;
	padding: 0;
	font-size: 22px;
	opacity: 0.7;
	margin-top: 5px;
}
.ScriptHeader span {
	display: block;
	padding: 0;
	font-size: 22px;
	opacity: 0.7;
	margin-top: 5px;
}
.rt-container {
	margin: 0 auto;
	padding-left: 12px;
	padding-right: 12px;
}
.rt-row:before, .rt-row:after {
	display: table;
	line-height: 0;
	content: "";
}
.rt-row:after {
	clear: both;
}
[class^="col-rt-"] {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	padding: 0 15px;
	min-height: 1px;
	position: relative;
}
@media (min-width: 768px) {
	.rt-container {
		width: 750px;
	}
	[class^="col-rt-"] {
		float: left;
		width: 49.9999999999%;
	}
	.col-rt-6, .col-rt-12 {
		width: 100%;
	}
}
@media (min-width: 1200px) {
	.rt-container {
		width: 1170px;
	}
	.col-rt-1 {
		width: 16.6%;
	}
	.col-rt-2 {
		width: 30.33%;
	}
	.col-rt-3 {
		width: 50%;
	}
	.col-rt-4 {
		width: 67.664%;
	}
	.col-rt-5 {
		width: 83.33%;
	}
}
@media only screen and (min-width:240px) and (max-width: 768px) {
	.ScriptTop h1, .ScriptTop ul {
		text-align: center;
	}
	.ScriptTop h1 {
		margin-top: 0;
		margin-bottom: 15px;
	}
	.ScriptTop ul {
		margin-top: 12px;
	}
	.ScriptHeader h1, .ScriptHeader h2, .scriptnav ul {
		text-align: center;
	}
	.scriptnav ul {
		margin-top: 12px;
	}
	#float-right {
		float: none;
	}
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.contact-parent {
	background: #fff;
	display: flex;
	margin: 80px 0;
}
.contact-child {
	display: flex;
	flex: 1;
	box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.75);
}
.child1 {
	background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://cdn.pixabay.com/photo/2019/06/28/00/17/architecture-4303279_1280.jpg");
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	color: #fff;
	padding: 100px 0;
}
.child1 p {
	padding-left: 20%;
	font-size: 20px;
	text-shadow: 0px 0px 2px #000;
}
.child1 p span {
	font-size: 16px;
	color: #9df2fd;
}
.child2 {
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
.inside-contact {
	width: 90%;
	margin: 0 auto;
}
.inside-contact h2 {
	text-transform: uppercase;
	text-align: center;
	margin-top: 50px;
}
.inside-contact h3 {
	text-align: center;
	font-size: 16px;
	color: #0085e2;
}
.inside-contact input, .inside-contact textarea {
	width: 100%;
	background-color: #eee;
	border: 1px solid rgba(0, 0, 0, 0.48);
	padding: 5px 10px;
	margin-bottom: 20px;
}
.inside-contact input[type=submit] {
	background-color: #000;
	color: #fff;
	transition: 0.2s;
	border: 2px solid #000;
	margin: 30px 0;
}
.inside-contact input[type=submit]:hover {
	background-color: #fff;
	color: #000;
	transition: 0.2s;
}
@media screen and (max-width:991px) {
	.contact-parent {
		display: block;
		width: 100%;
	}
	.child1 {
		display: none;
	}
	.child2 {
		background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url("https://cdn.pixabay.com/photo/2019/06/28/00/17/architecture-4303279_1280.jpg");
		background-size: cover;
	}
	.inside-contact input, .inside-contact textarea {
		background-color: #fff;
	}
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900');
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
article, header, section, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}
body {
	background: #f2eee1 none repeat scroll 0 0;
	color: #222;
	font-size: 100%;
	line-height: 24px;
	margin: 0;
	padding: 0;
	font-family: "Raleway", sans-serif;
}
a {
	font-family: "Raleway", sans-serif;
	text-decoration: none;
	outline: none;
}
a:hover, a:focus {
	color: #373e18;
}
section {
	float: left;
	width: 100%;
	padding-bottom: 3em;
}
h2 {
	color: #1a0e0e;
	font-size: 26px;
	font-weight: 700;
	margin: 0;
	line-height: normal;
	text-transform: uppercase;
}
h2 span {
	display: block;
	padding: 0;
	font-size: 18px;
	opacity: 0.7;
	margin-top: 5px;
	text-transform: uppercase;
}
#float-right {
	float: right;
}
.ScriptTop {
	background: #fff none repeat scroll 0 0;
	float: left;
	font-size: 0.69em;
	font-weight: 600;
	line-height: 2.2;
	padding: 12px 0;
	text-transform: uppercase;
	width: 100%;
}
.ScriptTop ul {
	margin: 24px 0;
	padding: 0;
	text-align: left;
}
.ScriptTop li {
	list-style: none;
	display: inline-block;
}
.ScriptTop li a {
	background: #6a4aed none repeat scroll 0 0;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	padding: 5px 18px;
	text-decoration: none;
	text-transform: capitalize;
}
.ScriptTop li a:hover {
	background: #000;
	color: #fff;
}
.ScriptHeader {
	float: left;
	width: 100%;
	padding: 2em 0;
}
.rt-heading {
	margin: 0 auto;
	text-align: center;
}
.Scriptcontent {
	line-height: 28px;
}
.ScriptHeader h1 {
	font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	color: #6a4aed;
	font-size: 26px;
	font-weight: 700;
	margin: 0;
	line-height: normal;
}
.ScriptHeader h2 {
	color: #312c8f;
	font-size: 20px;
	font-weight: 400;
	margin: 5px 0 0;
	line-height: normal;
}
.ScriptHeader h1 span {
	display: block;
	padding: 0;
	font-size: 22px;
	opacity: 0.7;
	margin-top: 5px;
}
.ScriptHeader span {
	display: block;
	padding: 0;
	font-size: 22px;
	opacity: 0.7;
	margin-top: 5px;
}
.rt-container {
	margin: 0 auto;
	padding-left: 12px;
	padding-right: 12px;
}
.rt-row:before, .rt-row:after {
	display: table;
	line-height: 0;
	content: "";
}
.rt-row:after {
	clear: both;
}
[class^="col-rt-"] {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	padding: 0 15px;
	min-height: 1px;
	position: relative;
}
@media (min-width: 768px) {
	.rt-container {
		width: 750px;
	}
	[class^="col-rt-"] {
		float: left;
		width: 49.9999999999%;
	}
	.col-rt-6, .col-rt-12 {
		width: 100%;
	}
}
@media (min-width: 1200px) {
	.rt-container {
		width: 1170px;
	}
	.col-rt-1 {
		width: 16.6%;
	}
	.col-rt-2 {
		width: 30.33%;
	}
	.col-rt-3 {
		width: 50%;
	}
	.col-rt-4 {
		width: 67.664%;
	}
	.col-rt-5 {
		width: 83.33%;
	}
}
@media only screen and (min-width:240px) and (max-width: 768px) {
	.ScriptTop h1, .ScriptTop ul {
		text-align: center;
	}
	.ScriptTop h1 {
		margin-top: 0;
		margin-bottom: 15px;
	}
	.ScriptTop ul {
		margin-top: 12px;
	}
	.ScriptHeader h1, .ScriptHeader h2, .scriptnav ul {
		text-align: center;
	}
	.scriptnav ul {
		margin-top: 12px;
	}
	#float-right {
		float: none;
	}
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.contact-parent {
	background: #fff;
	display: flex;
	margin: 80px 0;
}
.contact-child {
	display: flex;
	flex: 1;
	box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.75);
}
.child1 {
	background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://cdn.pixabay.com/photo/2019/06/28/00/17/architecture-4303279_1280.jpg");
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	color: #fff;
	padding: 100px 0;
}
.child1 p {
	padding-left: 20%;
	font-size: 20px;
	text-shadow: 0px 0px 2px #000;
}
.child1 p span {
	font-size: 16px;
	color: #9df2fd;
}
.child2 {
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
.inside-contact {
	width: 90%;
	margin: 0 auto;
}
.inside-contact h2 {
	text-transform: uppercase;
	text-align: center;
	margin-top: 50px;
}
.inside-contact h3 {
	text-align: center;
	font-size: 16px;
	color: #0085e2;
}
.inside-contact input, .inside-contact textarea {
	width: 100%;
	background-color: #eee;
	border: 1px solid rgba(0, 0, 0, 0.48);
	padding: 5px 10px;
	margin-bottom: 20px;
}
.inside-contact input[type=submit] {
	background-color: #000;
	color: #fff;
	transition: 0.2s;
	border: 2px solid #000;
	margin: 30px 0;
}
.inside-contact input[type=submit]:hover {
	background-color: #fff;
	color: #000;
	transition: 0.2s;
}
@media screen and (max-width:991px) {
	.contact-parent {
		display: block;
		width: 100%;
	}
	.child1 {
		display: none;
	}
	.child2 {
		background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url("https://cdn.pixabay.com/photo/2019/06/28/00/17/architecture-4303279_1280.jpg");
		background-size: cover;
	}
	.inside-contact input, .inside-contact textarea {
		background-color: #fff;
	}
}
</style>

</head>
<body>
<header class="ScriptHeader">
    <div class="rt-container">
    	<div class="col-rt-12">
        	<div class="rt-heading">
            	<h1>Responsive Contact Us Page Example</h1>
            </div>
        </div>
    </div>
</header>
<section>
    <div class="rt-container">
        <div class="col-rt-12">
            <div class="Scriptcontent">
               <div>
                 <div class="container">
                  <div class="contact-parent">
                    <div class="contact-child child1">
                        <p>
                            <i class="fas fa-map-marker-alt"></i> Address <br />
                            <span> Your Address
                                <br />
                                Your Address
                            </span>
                        </p>
                        <p>
                            <i class="fas fa-phone-alt"></i> Let's Talk <br />
                            <span> 0787878787</span>
                        </p>
                        <p>
                            <i class=" far fa-envelope"></i> General Support <br />
                            <span>contact@example.com</span>
                        </p>
                    </div>
                    <div class="contact-child child2">
                        <div class="inside-contact">
                            <h2>Contact Us</h2>
                            <h3>
                               <span id="confirm">
                            </h3>
                            <p>Name *</p>
                            <input id="txt_name" type="text" Required="required">
                            <p>Email *</p>
                            <input id="txt_email" type="text" Required="required">
                            <p>Phone *</p>
                            <input id="txt_phone" type="text" Required="required">
                            <p>Subject *</p>
                            <input id="txt_subject" type="text" Required="required">
                            <p>Message *</p>
                            <textarea id="txt_message" rows="4" cols="20" Required="required" ></textarea>   
                            <input type="submit" id="btn_send" value="SEND">
                        </div>
                    </div>
                  </div>
                </div>
              </div>
    		</div>
		</div>
    </div> 
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars