"Feedback on click slide form"
Bootstrap 4.0.0 Snippet by naimansari

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="feedback feedback-toggle rotate">Schedule Visit</div>
<div class="feedback feedback-form-wrapper">
<form id="feedback-form" class="form-horizontal" method="post">
<legend>Schedule 24 Tech Support Visit</legend>
<div class="form-group">
<label class="sr-only">Your Name</label>
<input id="username" name="username" class="form-control" autocomplete="off" placeholder="Your Name *" required="required" type="text">
</div>
<div class="form-group">
<label class="sr-only">Email ID</label>
<input name="emailquery" id="emailquery" class="form-control" autocomplete="off" placeholder="Your Email *" required="required" type="email">
</div>
<div class="form-group">
<label class="sr-only">Phone Number</label>
<input name="phoneno" id="phoneno" class="form-control" autocomplete="off" placeholder="Phone Number *" required="required" type="number">
</div>
<div class="form-group">
<label class="sr-only">Issue</label>
<textarea id="issue" name="issue" class="form-control" rows="3" autocomplete="off" placeholder="Write Your Issue *" required="required"></textarea>
</div>
<div class="form-group">
<label class="control-label">I need service on</label>
<input class="form-control" name="dateOfReg" id="dateOfReg" autocomplete="off" placeholder="02/03/2014" required="required" min="2015-05-1" type="text">
</div>
<div class="form-group">
<button type="submit" name="sendissuedetails" id="sendissuedetails" class="btn btn-default">Send Details</button>
</div>
</form>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.app {
font-family: 'Source Sans Pro', sans-serif;
text-transform:uppercase;
font-size:13px;
font-weight:bold;
/* background:#539AB9;
border:5px solid #539AB9;*/
/*
This is the CSS for the feedback div that is fixed to the top left hand side
of the screen. This div should slide with the form so that it provides a
close button when the form is slid into view.
*/
right : -50px; /* Bring the div in and hide the left (top) border */
left : -10px\9; /* Less Than IE9 Hack - Bring the div in and hide the left (top) border */
top : 50%;
margin-top:-152px;
cursor : pointer;
padding-left: -70px;
width : 150px; /* Since this is getting rotated width appears as height to the eye*/
height : 30px; /* Since this is getting rotated height appears as width to the eye*/
text-align : center;
letter-spacing:1px;
z-index : 10000; /* Msake sure it floats above the content */
position: fixed;
background: #689F38;
border: 5px solid #fff;
color: #FFF;
padding: 10px 15px 30px;
}
.app a {
color:#fff;
}
.app a:hover {
text-decoration:none;
}
/*------------------log a ticket start here---------------------------------*/
.log-ticket {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// This is the Feedback toggle functionality it slides the feedback form in and out
// of view when the user clicks the div with the class .feedback-toggle
$('.feedback-toggle').click( function(){
var left = parseFloat($('.feedback')[0].style.left.match(/[0-9]+/g)) || 50,
tgl = '+=280';
(left > 50) ? tgl = '-=280' : tgl = '+=280';
$('.feedback').animate({ left: tgl}, 500);
});
// This is the form submission AJAX code which also
// hides the feednack form.
$("#feedback-form .btn").click(function() {
var url = "path/to/your/script.php", // the script where you handle the form input.
data = $("#feedback-form").serialize(),
isValid = validate("#feedback-form");
if(isValid){
$.ajax({
type : "POST",
url : url,
data : data , // serializes the form's elements.
success : function(data){
$('.feedback').find('.alert-error').fadeIn('fast');
$('.feedback').animate({ left: '-=350'}, 500);
},
error : function(data){
$('.feedback').find('.alert-block').fadeIn('fast');
return false;
}
});
}
return false; // avoid to execute the actual submit of the form.
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: