How To Create Contact Us Page | Professional Contact us Page

Learn To Create Contact Form With HTML, CSS & Bootstrap 3, Contact Form Design Tutorials.

How To Create Contact Us Page | Responsive Contact Form | Professional Contact us Page | Source File

Learn To Create Contact Form With HTML, CSS & Bootstrap 3, Contact Form Design Tutorials. In this video you will learn to Create a contact form or inquiry form using HTML and CSS.How to Create Stylish Contact Us Page.

1 - How to Create a Contact us Page.

2 - How to Create a Responsive Contact us Page.

3 - How to Design a Contact us Page Tutorial.

4 - How to Create a Professional Contact us Page.

Let's Start there 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>
</head>
<body>
	<form>
		<div class="container">
			<div class="col-md-4">
				<h1 class="heading">Contact Us Page</h1>
			</div>
			<div class="col-md-2"></div>
			<div class="rows">
				<div class="col-md-3">
					<br><br><br><br><br><br><br><br><br><br><br>
					<input type="text" name="name" id="name" class="form-control" placeholder="Enter Name" required="">
				</div>
				<div class="col-md-3">
					<br><br><br><br><br><br><br><br><br><br><br><input type="email" name="email" id="email"
						class="form-control" placeholder="Enter Email" required=""><br>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="col-md-4"></div>
			<div class="col-md-2"></div>
			<div class="col-md-6">
				<input type="text" name="Subject" placeholder="Enter Subject" class="form-control" required="">
				<br>
				<textarea cols="20" rows="4" class="form-control" placeholder="Enter a Message" required=""
					id="textarea"></textarea>
				<br><br>
				<center>
					<input type="submit" name="Submit" class="form-control btn btn-success">
				</center>
	</form>
	</div>

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

Let's working on css.

                            
                                body {
		background-image: url(https://images.unsplash.com/photo-1534536281715-e28d76689b4d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8dGVsZXBob25lfGVufDB8fDB8fA%3D%3D&w=1000&q=80);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.heading {
		text-align: center;
		font-size: 70px;
		margin-top: 170px;
		color: white;
		font-weight: bold;
		font-family: "Times New Roman", Times, serif;
	}

	input[type=text] {
		background-color: transparent;
		color: white;
	}

	input[type=text]::placeholder {
		color: white;
	}

	input[type=email] {
		background-color: transparent;
		color: white;
	}

	input[type=email]::placeholder {
		color: white;
	}


	#textarea {
		background-color: transparent;
		color: white;
		font-size: 20px;

	}

	#textarea::placeholder {
		color: white;
	}

	input[type=submit] {
		font-size: 18px;
		letter-spacing: 2px;
		background-color: transparent;
		transition: 0.5s ease;
		border: 2px solid;
		height: 50px;

	}

Download Code Files