How to make a sliding contact form using javascript?
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 Inquiry form using JavaScript.
Here in this blog(How to make a sliding contact form using JavaScript), we are going to see How to 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, 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. When anyone clicks this button then the sliding form opens or comes out and when you click again to the button it closes again.
What is the benefit of this sliding contact form?
This sliding form can maximize your conversion in terms of sales or products.
A user can easily ask an inquiry related to your product and service and thus it increases the chance to get a new customer.
The customer finds it easy to communicate with this sliding form on the same screen rather than finding the Contact Us form on 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 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.
This is your Enquiry or Contact Us form, here you can fill in the information and message and can send your message. See the below image for the same.
Code for developing this sliding Contact form: How to make a sliding contact form using javascript
Below are the code files 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 the Enquiry button to slide the form out</h3>
</div>
<!-- Sliding div -->
<div id="form 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>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() {
slide In();
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: light goldenrod yellow;
}
#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]
you can also go through a few more amazing blog links below related to javascript/jQuery:
Difference Between jQuery and Angular JS In Hindi… Java Script vs Node JS In Hindi… Google Form Captcha Setup Using PHP and Jquery… How to Upload Images with PHP and Jquery Using Form… An Auto Submit Form Using JavaScript… How to limit login attempts in JavaScript… Dynamically Add Remove Form Fields Using JavaScript… Contact Us Popup Form Using JavaScript… How to make a sliding contact form using JavaScript… Contact Form Using JQuery… Progress Bar: How to Show Progress Bar On Form Submission Using JQuery… Difference Between JQuery and JavaScript In Hindi…
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 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 a5theorys@gmail.com we will get back to you ASAP|How to make a sliding contact form using javascript|
Hope! you would have enjoyed this post on How to make a sliding contact form using JavaScript.
Please feel free to give your important feedback in the comment section below|How to make a sliding contact form using javascript|
Have a great time! Sayonara!
