Learn to create form that you can show on every page of your website!

Yes, these forms are known as sidebar sliding contact form. These will be visible on the sidebar of every page of your website. This means, visitor can access your contact form via every page of your website.

They need not to click on the contact us option, instead contact form is in front of them every-time. They can directly reach there just by clicking on the form button.

It’s a powerful way to improve your form conversion.

No hunting for contact page = More conversion.

sliding contact form javascript

You can simply create it with the help of JavaScript.

Here are the codes for the Sidebar sliding contact form:

HTML File- slider.html

  • It contains two div.
  • Div with Id = slider, includes button and form.
  • On clicking the button, form will display in a sliding effect.
  • Div with Id = sidebar, includes only button.

<!DOCTYPE html>
<html>
<head>
<title>Slide Contact Form - Demo Preview</title>
<link href="css/slider.css" rel="stylesheet"><!-- Include css file here-->
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'><!-- Including google font-->
<script src="js/slider.js"></script>
</head>
<body>
<div id="title">
<h3>Click Contact Us Button to Slide In Contact Form</h3>
</div>
<!-- Sliding div starts here -->
<div id="slider" 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>Send Message</button>
</div>
</div>
<!-- Sliding div ends here -->
</body>
</html>

JavaScript File- slider.js

  • It contains various functions that brings the sliding effect in form according to the onclick event on button.

/*
------------------------------------------------------------
Function to activate form button to open the slider.
------------------------------------------------------------
*/
function open_panel() {
slideIt();
var a = document.getElementById("sidebar");
a.setAttribute("id", "sidebar1");
a.setAttribute("onclick", "close_panel()");
}
/*
------------------------------------------------------------
Function to slide the sidebar form (open form)
------------------------------------------------------------
*/
function slideIt() {
var slidingDiv = document.getElementById("slider");
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 close 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 (slide in form)
------------------------------------------------------------
*/
function slideIn() {
var slidingDiv = document.getElementById("slider");
var stopPosition = -342;
if (parseInt(slidingDiv.style.right) > stopPosition) {
slidingDiv.style.right = parseInt(slidingDiv.style.right) - 2 + "px";
setTimeout(slideIn, 1);
}
}

Css File- slider.css

  • It includes basic css code to design form button.

body {
overflow:hidden;
width:960px;
margin:10px auto
}
p {
border-bottom:1px dotted #d8d8d8;
padding-bottom:15px;
font-size:17px
}
#slider {
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
}
#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:'Roboto Slab',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
}

Conclusion:

With the help of sliding contact form, your user can easily access contact form from every page of your website. It’s an easy method to grow your email list with little effort.