sliding contact form using javascript

How to make sliding contact form using java script?

Hello Friends,

In this blog post, I am going to let you know how to develop a sliding contact form or Enquiry form?

What is this sliding contact form, is it different from the simple contact us form?

No, it has no difference in terms of functionality, whereas it is named as sliding contact form because of its position and opening and closing functionality.

This is known as Enquiry form, contact us form and etc…

These sliding forms are normally fixed either at the left or right side of the website or web page with a button showing on the screen. And when anyone clicks this button then the sliding form opens or comes out and when you click again to the button then it closes again.

What is the benefit of this sliding contact form?

This sliding form can maximize your conversion in terms of sales or product.

A user can easily ask the inquiry related to your product and service and thus it increases the chance to get a new customer.

The customer gets easy to communicate with this sliding form at the same screen rather than finding the contact us form at another tab or page.

It’s a quick interface between your users and customers and it gives a better result as compared to the traditional contact us form.

How will it look on the website page?

Once you will open your website then it will appear like as shown in the below image. when you will click the button the contact form or inquiry form will be open.

enquiry1

 

This is your Enquiry or contacts us form, here you can fill the information and message and can send your message. See the below image for the same.

enquiry2


Code for developing this Contact form:

Below are the code files are given for this contact form, you can use them as per your comfort along with your platform and technology.

formslider.html:

<!DOCTYPE html>
<html>
<head>
<title>Slide Enquiry Form - Demo</title>
<link href="formslider.css" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<script src="formslider.js" type="text/javascript"></script>
<body>
<div id="title">
<h3>Click Enquiry button to slide the form out</h3>
</div>
<!-- Sliding div -->
<div id="formslider" style="right:-342px;">
<div id="sidebar" onclick="open_panel()"><img src="images/contact.png"></div>
<div id="header">
<h2>Contact Form</h2>
<p>This is my form.Please fill it out.It's awesome!</p>
<input name="dname" type="text" value="Your Name">
<input name="demail" type="text" value="Your Email">
<h4>Query type</h4>
<select>
<option>General Query</option>
<option>Presales</option>
<option>Technical</option>
<option>Others</option>
</select>
<textarea>Message</textarea>
<button>Submit</button>
</div>
</div>
<!--Ends of sliding divs -->
</body>
</html>

formslider.js:

/*
------------------------------------------------------------
Function to activate the slider button for openning the form.
------------------------------------------------------------
*/
function open_panel() {
slideIt();
var a = document.getElementById("sidebar");
a.setAttribute("id", "sidebar1");
a.setAttribute("onclick", "close_panel()");
}
/*
------------------------------------------------------------
Function to slide the sidebar form.
------------------------------------------------------------
*/
function slideIt() {
var slidingDiv = document.getElementById("formslider");
var stopPosition = 0;
if (parseInt(slidingDiv.style.right) < stopPosition) {
slidingDiv.style.right = parseInt(slidingDiv.style.right) + 2 + "px";
setTimeout(slideIt, 1);
}
}
/*
------------------------------------------------------------
Function to activate form button to shut the slider
------------------------------------------------------------
*/
function close_panel() {
slideIn();
a = document.getElementById("sidebar1");
a.setAttribute("id", "sidebar");
a.setAttribute("onclick", "open_panel()");
}
/*
------------------------------------------------------------
Function to slide the sidebar form
------------------------------------------------------------
*/
function slideIn() {
var slidingDiv = document.getElementById("formslider");
var stopPosition = -342;
if (parseInt(slidingDiv.style.right) > stopPosition) {
slidingDiv.style.right = parseInt(slidingDiv.style.right) - 2 + "px";
setTimeout(slideIn, 1);
}
}

formslider.css

body {
overflow:hidden;
width:960px;
margin:10px auto
}
p {
border-bottom:1px dotted #d8d8d8;
padding-bottom:15px;
font-size:17px
}
#formslider {
width:500px;
top:100px;
position:absolute
}
#header {
width:260px;
height:520px;
position:absolute;
right:0;
border:1px solid #d8d8d8;
margin-left:40px;
padding:20px 40px;
border-radius:3px;
box-shadow:0 0 8px gray;
background-color: lightgoldenrodyellow;
}
#sidebar {
position:absolute;
top:180px;
left:113px;
box-shadow:0 0 8px gray
}
#sidebar1 {
position:absolute;
top:180px;
left:113px;
box-shadow:0 0 8px gray
}
h3 {
font-family: 'Exo 2', sans-serif;
}
input[type=text] {
margin-top:10px;
padding:6px;
width:100%;
font-size:15px;
border-radius:2px;
border:3px solid #98d0f1
}
h4 {
font-size:15px
}
div#title {
position:absolute;
top:300px;
left:650px
}
select {
padding:6px;
width:100%;
font-size:15px;
border-radius:2px;
border:3px solid #98d0f1
}
textarea {
padding:6px;
font-size:15px;
border-radius:2px;
border:3px solid #98d0f1;
margin-top:10px;
height:80px;
width:100%
}
button {
background:#2bc1f2;
border:none;
color:#fff;
width:100%;
font-size:22px;
font-weight:bolder;
padding:8px 0;
border-radius:3px;
cursor:pointer;
margin-top:25px
}

In a case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!