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 fileds.
We allows to free snippets of bootstrap contact form with validation , you can download full code of bootstrap contact form larvel layout. Here in this post i will give you example of bootstrap contact form example snippet and you will get simple code of html, css and jquery. In bootstrap form design snippet i give you three tab with html, css and js, you can easily get code of Responsive Team Profiles with Social Links Free For Bootstrap layout.
<!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;
}
}
NiceSnippets.com
