Sliding Feedback Form Demo với jQuery

Trong bài viết này chúng ta sẽ tạo một form feedback ấn tượng với khả năng neo ở bên hông trang web. Nếu các bạn đang sử dụng Joomla hay WordPress thì có rất nhiều plugin giúp các bạn tạo form này, nhưng sẽ thú vị và hấp dẫn hơn khi chúng ta tự tay code và nhúng nó vào trang web hay blog của mình.

Demo | Download

HTML

Đoạn html bên dưới sẽ là khung chuẩn mà chúng ta sẽ cần cho form feedback

<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>

jQuery

Để form có thể neo đậu bên hông trang web/blog, chúng ta chỉ cần chèn đoạn script sau đây.

<script type="text/javascript" src="jquery.min.js"></script>
	<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>

Chúc các bạn thành công !

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster