Home Html How to Create Quick Enquiry Form
How to Create Quick Enquiry Form
Today we are going to see how to create quick enquiry form in website. This Concept very useful to you. Use this enquiry form on your website easy to access. See the demo video and download the coding. Below see the code,
Demo Download Code for enquiry form: <head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="sidebar-contact">
<div class="toggle"></div>
<h2>Contact Us</h2>
<div class="scroll">
<form>
<input type="text" name="" placeholder="Name">
<input type="email" name="" placeholder="Email">
<input type="rel" name="" placeholder="Phone Number">
<textarea placeholder="Message here.."></textarea>
<input type="submit" name="" value="send">
</form>
</div>
</div>
</body>
Css: body{
margin:0;
padding:0;
font-family:sans-serif;
}
.sidebar-contact{
position:fixed;
top:50%;
left:-350px;
transform:translateY(-50%);
width:350px;
height:auto;
padding:40px;
background:#fff;
box-shadow: 0 20px 50px rgba(0,0,0,.5);
box-sizing:border-box;
transition:0.5s;
}
.sidebar-contact.active{
left:0;
}
.sidebar-contact input,
.sidebar-contact textarea{
width:100%;
height:36px;
padding:5px;
margin-bottom:10px;
box-sizing:border-box;
border:1px solid rgba(0,0,0,.5);
outline:none;
}
.sidebar-contact h2{
margin:0 0 20px;
padding:0;
}
.sidebar-contact textarea{
height:60px;
resize:none;
}
.sidebar-contact input[type="submit"]{
background:#00bcd4;
color:#fff;
cursor:pointer;
border:none;
font-size:18px;
}
.toggle{
position:absolute;
height:48px;
width:48px;
text-align:center;
cursor:pointer;
background:#f00;
top:0;
right:-48px;
line-height:48px;
}
.toggle:before{
content:'\f003';
font-family:fontAwesome;
font-size:18px;
color:#fff;
}
.toggle.active:before{
content:'\f00d';
}
@media(max-width:768px)
{
.sidebar-contact{
width:100%;
height:100%;
left:-100%;
}
.sidebar-contact .toggle{
top:50%;
transform:translateY(-50%);
transition:0.5s;
}
.sidebar-contact.active .toggle
{
top:0;
right:0;
transform:translateY(0);
}
.scroll{
width:100%;
height:100%;
overflow-y:auto;
}
.content{
padding:50px 50px;
}
}
Javascript: $(document).ready(function(){
$('.toggle').click(function(){
$('.sidebar-contact').toggleClass('active')
$('.toggle').toggleClass('active')
})
})
0 Comments