04/10/2018, 20:18

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

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.

Sliding Feedback Form Demo với jQuery

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 !

Tags: Feedback Form jQuery thiet ke web

Chuyên Mục: Javascript

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

Bài liên quan

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

Trần Trung Dũng viết 20:18 ngày 04/10/2018

Chèn Gợi Ý Và Auto Focus Form Fields Với jQuery

Việc chèn các câu gợi ý vào các fileds trong form sẽ giúp người dùng dễ dàng nhận biết họ cần phải nhập cái gì trong filed đó. Còn Auto focus sẽ tự động giúp người dùng nên cần nhập cái gì đầu tiên. Đây là 2 chức năng cơ bản mà hầu như mọi website đều dùng cho những mẫu form có trong website của ...

Hoàng Hải Đăng viết 20:15 ngày 04/10/2018

Tạo Registration Form đơn giản với jQuery và CSS3

Nếu các bạn cần làm trang đăng ký thành viên cho website hay blog của mình, thì hôm nay mình xin chia sẻ cho các bạn một mẫu form đơn giản nhưng có đầy đủ chức năng cần thiết cho việc tạo thành viên. Mẫu form này sử dụng plugin progression.js , các bạn có thể donwload plugin này ở phần demo hoặc ...

Hoàng Hải Đăng viết 20:06 ngày 04/10/2018

Mẫu contact form tiện lợi với jQuery và CSS3

Hôm nay mình sẽ chia sẻ cho các bạn một mẫu form rất phù hợp cho trang liên hệ (contact), mẫu form này có đầy đủ các thành phần như thẻ input , select box, radio button và một text area đơn giản cho người dùng nhập liệu. Với mẫu form này, các bạn hoàn toàn có thể thu thập ý kiến cũng như thông tin ...

Bùi Văn Nam viết 20:06 ngày 04/10/2018

[Tutorial] Viết chức năng thêm, bớt text field nhập liệu với jQuery

Khi xây dựng những hệ thống, ví dụ như e-learning, bạn có thể sẽ bắt gặp chức năng nhập câu hỏi cho câu trả lời, thêm hoặc bớt số lượng câu hỏi, chọn câu trả lời đúng từ danh sách đã nhập rồi nhấn submit để lưu vào cơ sở dữ liệu. Dưới đây mình sẽ chia sẻ cách xây dựng một phần chức năng đó, sử dụng ...

Trịnh Tiến Mạnh viết 14:21 ngày 12/08/2018
0