content logo

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