How to Create Contact Us Page with Bootstrap Contact Form | Responsive Contact Us Page

In this bootstrap website development tutorial, we will develop the contact us page of the website.

How to Create Contact Us Page (with Bootstrap Contact Form) |Responsive Contact Us Page |Source File

In this bootstrap website development tutorial, we will develop the contact us page of the website. The contact us page as the name suggests will give information about the company's contact details like address, website link, email ID map location etc. We can also display live map location in iframe. On our bootstrap contact us we will also show a bootstrap contact form for users to fill in their details incase they wish to contact us.

HTML

                            
                                <!DOCTYPE html>
<html>

<head>
	<title>Contact us page</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
	<br><br>

	<div class="container" id="contactus">
		<h2 class="heading">Contact Us</h2>
		<h2 style="text-align: center;">We'd Love to Help!</h2>
		<p style="text-align: center;">We Like to create things with fun, open-minded people.Feel free to say hello!</p>
		<br><br>
		<div class="row">
			<div class="col-md-6">
				<form>
					<input type="Text" name="text" required="" placeholder="Your Name" class="form-control">
					<br>
					<input type="Email" name="Email" required="" placeholder="Your Email" class="form-control">
					<br>

					<textarea rows="6" placeholder="Message" required="" class="form-control"></textarea>
					<br>
					<center>
						<button class="btn btn-info">Submit</button>
					</center>
					<br><br><br><br>

				</form>

			</div>

			<div class="col-md-1"></div>

			<div class="col-md-5">
				<br>
				<p class="icn"><i class="fa fa-map-marker"></i> &nbsp;&nbsp; 23 Main, Street New York, United States
				</p>
				<p class="icn"> <i class="fa fa-phone"></i> &nbsp;&nbsp; +923162859445 </p>
				<p class="icn"><i class="fa fa-envelope"></i> &nbsp;&nbsp; theproviders98@gmail.com </p>

				<hr>

				<div class="media">

					<ul class="list-unstyled">
						<li><a href="#"><i class="fab fa-facebook-f"></a></i></li>
						<li><a href="#"> <i class="fab fa-twitter"> </i></a> </li>
						<li><a href="#"> <i class="fab fa-instagram"> </i></a> </li>
						<li><a href="#"> <i class="fab fa-google-plus-g"> </i></a> </li>
						<li><a href="#"> <i class="fab fa-youtube"> </i></a> </li>
					</ul>

				</div>
				<br>
				<p style="margin-left: 23px;">Web Design by The Providers</p>
			</div>
		</div>
	</div>
</body>
</html>

CSS

                            
                                body {
		font-family: monospace;
		background-color: #575454;
		color: #fff;
	}

	.heading {
		text-align: center;
		font-size: 45px;
		border-bottom: 2px dotted #fff;
	}

	.container {
		background-color: #696868;
	}

	.btn-info {
		width: 50%;
		letter-spacing: 2px;
		background: transparent;
		transition: all 0.5s ease-in-out;
	}

	.btn-info:hover {
		transform: scale(1.05);
	}

	.icn {
		font-family: monospace;
		font-size: 17px;
	}

	hr {
		width: 80%;
	}

	ul li a {
		color: #fff;
		float: left;
		font-family: monospace;
		font-size: 22px;
		margin-left: 23px;
		margin-right: 10px;
		transition: 0.5s ease-in-out;
	}
	ul li a:hover {
		color: #999;
	}

Conclusion

Download Code Files