Add Sliding Bootstrap Feedback Form On Your Website

0 493

A feedback form helps website owner to better understand their product and services, In this post I am going to create a sliding bootstrap feedback form you can add on your website so that your website users can let you know about their thoughts about your website/product/services etc.
As you have seen this type of feedback form on many website user can quickly click on feedback button a sliding popup will open where they can write their feedback and send to website owner.

Add Sliding Bootstrap Feedback Form On Your Website

Libraries

Include bootstrap and jQuery core libraries on page.

<!--CSS-->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>

HTML

Create simple bootstrap html feedback form with feedback tab.

<div id="feedback">
		<div id="feedback-form" style='display:none;' class="col-xs-4 col-md-4 panel panel-default">
			<form method="POST" action="mail.php" class="form panel-body" role="form">
				<div class="form-group">
					<input class="form-control" name="email" autofocus placeholder="Enter Your E-mail" type="email" />
				</div>
				<div class="form-group">
					<textarea class="form-control" name="body" required placeholder="Please write your feedback here..." rows="5"></textarea>
				</div>
				<button class="btn btn-primary pull-right" type="submit">Send</button>
			</form>
		</div>
		<div id="feedback-tab">Feedback</div>
	</div>

 

CSS

Add css on page for styling feedback tab and fixed it to left bottom of the page you can customize feedback tab css as per your need.

<style>
#feedback {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 250px;
	margin-left: -3px;
	margin-bottom: -3px;
}
 
#feedback-form {
	float: left;
	width: 300px;
	height: 100%;
	z-index: 1000;
	padding-left: 5px;
	padding-right: 10px;
	background-clip: 'padding-box';
	border: 1px solid rgba(0,0,0,.2);
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
	-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
 
#feedback-tab {
	float: right;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	text-align: center;
	width: 120px;
	height: 42px;
	background-color: rgba(0,0,0,0.5);
	margin-top: 60px;
	margin-left: -42px;
	padding-top: 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
 
#feedback-tab:hover {
	background-color: rgba(0,0,0,0.4);
}
 
#feedback-form textarea {
	resize: none;
}
</style>

JS

Now finally add js on page to toggle feedback form on feeddback tab click.

<script>
$(function() {
	$("#feedback-tab").click(function() {
		$("#feedback-form").toggle("slide");
	});
 
	$("#feedback-form form").on('submit', function(event) {
		var $form = $(this);
		$.ajax({
			type: $form.attr('method'),
			url: $form.attr('action'),
			data: $form.serialize(),
			success: function() {
				$("#feedback-form").toggle("slide").find("textarea").val('');
			}
		});
		event.preventDefault();
	});
});
</script>

See live demo and download source code.

DEMO | DOWNLOAD

 

Leave A Reply

Your email address will not be published.