How to Create Contact Us Page | Responsive Contact Us Page | Contact Us Page Design

How to Create a Contact us page in Html and CSS | How to Create a Responsive Contact us page in html , CSS and Bootstrap

How to Create Contact Us Page | Responsive Contact Us Page | Contact Us Page Design | Source File

Description

How to Create a Contact us page in Html and CSS | How to Create a Responsive Contact us page in html , CSS and Bootstrap.How to Design a Contact us page. In this bootstrap website development tutorial, we will develop the contact us page for 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.

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>


	<div class="container-fluid">
		<br><br><br>
		<div class="col-md-2"></div>

		<div class="col-md-8">

			<h1>Contact Us</h1>
			<p>We'd love to hear from you, please drop us a line if you've any query.</p>
			<br><br>

			<form>
				<div class="row">

					<div class="col-md-4">
						<label>Name</label>
						<input type="text" placeholder="Enter Name" class="form-control" required="">

					</div>


					<div class="col-md-4">
						<label>Email</label>
						<input type="Email" placeholder="Enter Email" class="form-control" required="">

					</div>

					<div class="col-md-4">
						<label>Phone No</label>
						<input type="number" placeholder="Enter Number" class="form-control" required="">

					</div>

				</div>
				<br><br>
				<label>Subject</label>
				<input type="text" placeholder="Enter Subject" class="form-control" required="">
				<br><br>

				<textarea rows="5" class="form-control" placeholder="Enter Message " required=""></textarea>
				<br><br>

				<center>
					<button class="btn btn-info"> <i class="fas fa-paper-plane"></i>&nbsp; Submit</button>
				</center>
				<br><br>

			</form>
		</div>

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

	</div>
</body>
</html>

CSS

                            
                                .col-md-8 {
		font-family: monospace;
		color: #000;
		background-color: #ebeae8;
	}

	h1 {
		font-family: monospace;
		font-weight: bold;
		color: #0dbda5;
	}

	input,
	textarea {
		transition: 0.4s ease-in-out;
	}

	input[type='text']:hover,
	input[type=Email]:hover,
	input[type='number']:hover,
	textarea:hover {
		outline: none;
		border: 1px solid #0dbda5;
	}

	input[type='text']:focus,
	input[type=Email]:focus,
	input[type='number']:focus,
	textarea:focus {
		border: 1px solid #0dbda5;
	}

	.btn-info {
		background-color: #0dbda5;
	}

Conclusion

Download Code Files