How to make a sliding contact form using javascript? / How do I add a contact form to my slider? / Sliding sidebar contact form HTML CSS.

Hello Friends, In this blog post(How to make a sliding contact form using javascript), I am going to let you know how to make a sliding contact form using javascript or an Enquiry form using javascript?

Here in this blog(How to make a sliding contact form using javascript), we are going to see How do I add a contact form to my slider? How do I create a JavaScript form? How do I make a contact form? How do I create a multi-step form in HTML? Sliding contact form, Sliding sidebar contact form HTML CSS.

What is this sliding contact form, is it different from the simple contact us form?| How to make a sliding contact form using javascript?

No, it has no difference in terms of functionality, whereas it is named as a sliding contact form because of its position and opening and closing functionality|How to make a sliding contact form using javascript|

This is known as the Enquiry form, contact us form and etc…|How to make a sliding contact form using javascript|

These sliding forms are normally fixed either on 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 on 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 the sliding contact form look on the website page?

Once you will open your website then it will appear 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 in the information and message and can send your message. See the below image for the same.

enquiry2


Code for developing this sliding Contact form: How to make a sliding contact form using javascript

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:

[code 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>

[/code]


formslider.js:

[code js]
/*
————————————————————
Function to activate the slider button for opening 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);
}
}
[/code]


formslider.css

[code 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
}
[/code]


Conclusion:

Using this extensive blog post(How to make a sliding contact form using javascript) we have gone through How do I add a contact form to my slider? How do I create a JavaScript form? How do I make a contact form? How do I create a multi-step form in HTML? Sliding contact form, Sliding sidebar contact form HTML CSS. Now you can easily design a contact form and can place it on your website and start collecting your query and leads right away.

In case of any queries, you can write to us at [email protected] we will get back to you ASAP|How to make a sliding contact form using javascript|

Hope! you would have enjoyed this post How to make a sliding contact form using javascript.

Please feel free to give your important feedbacks in the comment section below|How to make a sliding contact form using javascript|

Have a great time! Sayonara!

Anurag

I am a blogger by passion, a software engineer by profession, a singer by consideration and rest of things that I do is for my destination.