Live Demo - About Us Form Design Usign HTML,CSS and Bootstrap 4

See Free Live Demo example of This is contact us form example usign html,css and bootstrap 4. this is free demo of contact form design. this is single page form design example. send a quick message to me form usign bootstrap 4. in this form design we are display contact person image,name,email,mobile number and other input filed...

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Contact us Form</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
	<div class="form">
		<div class="form-hedding">
			<h1> About Us Form </h1>
		</div>
		<div class="user-image-detail">
			<div class="user-img">
				<img src="//nicesnippets.com/demo/prof.jpg">
			</div>
			<div class="user-detail">
				<h4>Tome Cook</h4>
				<p class="work">Web Design</p>
				<p><i class="fa fa-phone" aria-hidden="true"></i> +91 1234567890</p>
				<p><i class="fa fa-envelope" aria-hidden="true"></i>  abc1378@gmail.com
			</div>
			<div style="clear:both;"></div>
			<div class="message">
				<p>SEND A QUICK MESSAGE TO ME</p>
			</div>
			<div class="form-input">
			<form>
				<input type="text" placeholder="First name..."><br><br>
				<input type="text" placeholder="Last name..."></br><br>
				<textarea rows="4" placeholder="Message.."></textarea><br><br>
				<a href="//www.nicesnippets.com" target="_blank" class="button">Send Message</a>
			</form> 
		</div>
		</div>
	</div>
</body>
</html>

body{
	background-color:#00658D;
	font-family: 'Barlow Semi Condensed', sans-serif;
}
.form{
	width:40%;
	margin:0 auto;
	margin-top:50px;
}
.form-hedding{
	color:#fff;
	padding:30px 0px;
	text-align: center;
}
.form-hedding h1{
	margin:0px;
}
.form-hedding .fa-star{
	font-size: 10px;
	top:-10px;
	color:#809295;
}
.user-image-detail{
	background-color:#014763;
	padding: 20px;
	box-shadow: 0px 0px 3px 5px #003E55;
}
.user-img{
	float:left;
	width:36%;
	text-align: left;
}
.user-img img{
	width:100%;
	height: 150px;
}
.user-detail{
	text-align: left;
	float:right;
	width:60%;
	color:#fff;
}
.user-detail p{
	margin:0px;
	padding:6px 0px; 
}
.user-detail h4{
	margin:0px;
	font-size:20px;
}
.user-detail .work{
	color:#64B0AF;
}
.user-detail i{
	padding-right: 5px;
}
.message{
	color:#fff;
}
.form-input a{
	width:100%;
}
.form-input input,.form-input textarea{
	background-color:#014763;
	padding:5px 0px 5px 5px;
	border:1px solid #6B99AC;
	color:#fff;
	width: 100%;
	resize:none;
	font-family: 'Barlow Semi Condensed', sans-serif;
}
.button{
	background-color: #FEC107;
	text-decoration: none;
	color:#fff;
	padding:4PX 205PX;
}
@media (min-width:320px) and (max-width:640px){
	.form{
		width:90%;
	}
	.user-img{
		width:100%;
		margin-bottom: 10px;
	}
	.user-detail{
		width:100%;
	}
	.button{
		padding:10px 40px;
		margin-left:15%;
		border-radius: 10px;
	}
}
@media (min-width:768px) and (max-width:1024px){
	.form{
		width:60%;
	}
	.user-img{
		width:48%;
	}
	.user-detail{
		width:48%;
	}
	.button{
		padding:10px;
		border-radius: 10px;
	}
}