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.
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.
11 Replies to “How To Create Sidebar Sliding Contact Form With JavaScript”
This form is very pretty and easy to update. But how to receive email notifications when the form is submitted. Please give me a solution on this query.
Your feedback is appreciated.
We are about to post for the email notification solution ahead. But, for a information i would like to inform that FormGet has inbuilt email notification. So you can use it, if it meat your needs.
Keep reading our blog.
Great form,
I have question – but how to handle a ‘hover’ slide out -so you do not have to click on image to slide it out??
Thank you for any hints
Hello WG,
You just need to replace “onclick” event to “onmouseover”
It will work for you.
Great tutorial!
Is there any chance you could include a tip (or another tutorial), on how to make the contact form appear once you reach a certain point on the page?
For example, if someone is reading a blog post on a client’s website, they scroll down to the end of the post, and a contact form slides out likes yours does. Is that possible?
Tristan
I love it. It was so beautiful and nice tutorial.
Thanks a lot.
Hello. Great script. The script works great on desktop but on mobile site, the form is not hidden? How can we adjust for mobile parameters?
Thank you
Hi, trying to use the form but wondered if there is a way to have it slide from left to right instead of right to left? Thanks
Really helpful code, its worked for the website that i was developing, but the slide bar doesn’t scroll down as i scroll mouse to the below section of the website, could you please suggest regarding the same.
Unable to download code, please help !
Hi,
This is really great articles . It helps me a lot in my project . Thanks for posting such a valuable articles.
Thanks