Add Sliding Bootstrap Feedback Form On Your Website

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.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
 

<script src="//code.jquery.com/jquery-latest.min.js">script>

HTML

Create simple bootstrap html feedback form with feedback tab.

="feedback">
		
="feedback-form" style='display:none;' class="col-xs-4 col-md-4 panel panel-default">
			>
		
>
		
="feedback-tab">Feedback
>
	
>

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.

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.

Related