Cara Menambahkan Animasi pada Form Feedback

Seringkali teman-teman temukan form feedback di setiap website, form tersebut berguna untuk mendapatkan masukan dari teman-teman apakah sautu artikel atau layanan dari website tersebut baik atau tidak dan juga ada kekurangan atau tidak. Kebanyakan form feedback tidak ada animasinya sama sekali. Sekarang saya akan membagi Cara Menambahkan Animasi pada Form Feedback.

Di sini saya akan menggunakan jQuery untuk membuat efek slide atau animasi slide pada form feedback. Ok, langsung saja saya berika langkah-langkahnya

1. Langkah pertama

download file jquerynya

2. Langkah ke-dua

Ketikan kode html di bawah ini

<html>
<head>
	<title>Animasi Feedback</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	
	<div id="feedback">

		<form>
			<h2>Silahkan Masukan Feedback anda</h2>
			<p><label>Nama: </label><input type="text" /></p>
			<p><label>Email: </label><input type="text" /></p>
			<p><label>Subjek: </label><input type="text" /></p>
			<p><label>Pesan: </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>
</body>
</html>

3. Langkah ke-tiga

Ketikan kode css di bawah ini

		body{
			font-size:12px;
			font-family:Verdana,Arial;
		}
		#feedback{
			position: fixed;
			top:100px;
			right:-436px;
		}
		#feedback form{
			float: left;
			border: 1px solid #999;
			padding: 10px;
			border-radius:5px;
		}
		#feedback form label{
			display: block;
			float: left;
			text-align:right;
			margin-right:20px;
			width:70px;
			font-weight:bold;
			color: #636A6D;
			font-size:14px;
		}
		#feedback a{
			background:url("feedback-buttons.png")  no-repeat center left transparent;
			display: block;
			width:40px;
			height:175px;
			float: left;
			text-indent:-9999em;
			position: absolute;
			top:120px;
			left:-39px;
		}
		#feedback a:hover{
			background-position: center right;
		}
		#feedback form .btn{
			float: right;
			background:url("send.png")  no-repeat 0px 0px transparent;
			text-indent:-9999em;
			width:80px;
			height:28px;
			border:none;

		}
		#feedback form textarea{
			width:250px;
			height:140px;
			border: 1px solid #636A6D;
		}
		#feedback form input[type="text"]{
			width:250px;
			height:30px;
			border: 1px solid #636A6D;
		}
		#feedback h2{
			text-align:center;
			color: #636A6D;
			font-size:22px;
		}

4. Langkah ke-empat

Hubungkan jquery yang kita download tadi dan buat script di bawah ini:

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> $(document).ready(function(){ 
//pada saat kita klik tombol feedback maka form tersebut akan bergeser ke kiri layar jQuery
(".pull_feedback").toggle(function(){ jQuery("#feedback").animate({right:"0"}); return false; }, 
function(){ 
//fungsi di bawah adalah kebalikan fungsi di atas dimana apabila kita klik maka dia akan bergeser ke sebelah kanan layar jQuery
("#feedback").animate({right:"-436px"}); return false; } ); //toggle }); //document.ready </script>

Coba teman-teman buka file htmlnya maka tampilannya akan tampil seperti gambar di bawah ini:

dan apabila teman-teman klik tombol feedbacknya makan form feedbaknya akan tampil.

Bagaimana teman-teman cukup mudahkan membuat animasi pada from feedback. Dengan menggabungkan jQuery dengan css maka tampilan website kita akan memnjadi menarik untuk di lihat.

Sekian tutorial kali ini tentang Cara Menambahkan Animasi pada Form Feedback, semoga bermanfaat.

Cara Menambahkan Animasi pada Form Feedback

Kategori