How to create sliding feedback form using jQuery

In this tutorial we are going to learn how to create fancy looking feedback form which slides from the right/left side of your web page. I am sure there are many plugins available for CMS like Joomla, WordPress but it’s always a good idea to code something of your own. Certainly, you require this code when you are developing  everything at your own and not using any kind of CMS. So let’s see how it actually works!

Concept

Theoretically here is what we are going to do. We will have a form and button side by side placed inside a div. This div is going to have a fixed position and we will have to position it in such a way that only the button is visible to the user. Once user clicks on that button the who form can be shown using jQuery’s animation function using which we will change the position of the absolute div. Now let’s see how it is done.

HTML Code:

<div id="feedback">
 
		<form>
			<h2>We Love Emails, Do you?</h2>
			<p><label>Name: </label><input type="text" /></p>
			<p><label>Email: </label><input type="text" /></p>
			<p><label>Subject: </label><input type="text" /></p>
			<p><label>Message: </label><textarea></textarea></p>
			<p><input type="button" value="Send&raquo;" class="btn"/></p>
		</form>
		<a href="#" class="pull_feedback" title="Click to leave feedback">Feedback</a>
	</div>

In the HTML code, we simply define the form inside the div containing id feedback. This is the only HTML we require and there is nothing special that needs to be done in the HTML, it’s simple HTML form and other input element tags. Yes of course, there is the Anchor tag, which is style as the Feedback Button using the CSS (defined inside style.css)

JavaScript Code

<script type="text/javascript">
	$(document).ready(function(){
		jQuery(".pull_feedback").toggle(function(){
				jQuery("#feedback").animate({left:"0px"});
				return false;
			},
			function(){
				jQuery("#feedback").animate({left:"-362px"});	
				return false;
			}
		); //toggle
	}); //document.ready
	</script>

Right at the top we have included the jQuery, that means we are going to use jQuery and it’s selector to do most of the work. The following JavaScript code, hooks the function toggle on the anchor tag which is having the CSS class as “pull_feedback“. Toggle function is used to achieve both the slide in/out effect of the feedback form. It’s yet another simple method of jQuery which is really helpful.

This way you can develop the sliding Feedback form your own website. The demo of this sliding feedback form is quite explanatory and you can understand most of the code by “view source” of the webpage. The source files contain the PSD(s) of the feedback button, send button along with the HTML, css and JavaScript file. I hope this post will help you. Do let me know if you got any suggestions to improve this.

Stay Digified!!
Sachin Khosla

Related posts:

Show loading icon in JQuery Ajax request Ajax:Quickly submit a form in JQuery using serialize Change a CSS class dynamically using Javascript Simple tabs using Javascript and CSS