I had designed a magical feedback form using Jquery with easing animation effect. It's simple and intersting just hiding and showing the div tags with jquery. Use it and make some thing better your web project feedback box.
Download Script 
Live DemoAbout Author
Javascript Code
Contains five animation move functions. Four click actions take a look at click(function()
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var feed_width = $('#feedback').width();
var scr_w = screen.width; // Screen Width
// 26 is width of the veritcal feedback button
var btn_width = 26;
var move_right = scr_w - btn_width;
var move_left = -(feed_width - btn_width);
var slide_from_left = 0;
var slide_from_right = scr_w - (feed_width - btn_width);
var center = ( scr_w / 2 ) - ( feed_width / 2 );
function positioningForm()
{
$('.left_btn').hide();
$('#feedback').css({"left": move_right+"px"}).show();
}
function slideFromRight()
{
$('#feedback').animate(
{left: slide_from_right+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.left_btn').hide();
}
function slideFromleft()
{
$('#feedback').animate(
{left: slide_from_left+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.right_btn').hide();
}
function moveLeft()
{
$('#feedback').animate(
{left: move_left+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.left_btn').show();
}
function moveRight()
{
$('#feedback').animate(
{left: move_right+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.right_btn').show();
}
// Positioning the feedback form at the time of page loading
positioningForm();
// Handling the right_btn and lift_btn event animations
$('.right_btn').click(function()
{
slideFromRight();
});
$('.left_btn').click(function()
{
slideFromleft();
});
// Moving left or right by clicking close button
$('.feed_close').click(function()
{
var pos = $('#feedback').position();
var ls = pos.left;
if(ls == slide_from_left)
{
// feedback form is at LEFT
moveRight();
}
else if(ls == center)
{
// feedback form is at RIGHT
moveRight();
}
else
{
// feedback form is at CENTER
moveLeft();
}
});
// Submit Form values
$('#submit_btn').click(function()
{
var name=$('#name').val();
var email=$('#email').val();
var msg=$('#msg').val();
if(name.length>0 && email.length>0 && msg.length>0)
{
$('.left_btn').hide();
$('.right_btn').hide();
$('.box').hide();
$('#feedback').animate(
{left: center+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.thankyou').show();
}
else
{
$('#error').html('Enter some thing');
}
return false();
});
});
</script>
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var feed_width = $('#feedback').width();
var scr_w = screen.width; // Screen Width
// 26 is width of the veritcal feedback button
var btn_width = 26;
var move_right = scr_w - btn_width;
var move_left = -(feed_width - btn_width);
var slide_from_left = 0;
var slide_from_right = scr_w - (feed_width - btn_width);
var center = ( scr_w / 2 ) - ( feed_width / 2 );
function positioningForm()
{
$('.left_btn').hide();
$('#feedback').css({"left": move_right+"px"}).show();
}
function slideFromRight()
{
$('#feedback').animate(
{left: slide_from_right+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.left_btn').hide();
}
function slideFromleft()
{
$('#feedback').animate(
{left: slide_from_left+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.right_btn').hide();
}
function moveLeft()
{
$('#feedback').animate(
{left: move_left+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.left_btn').show();
}
function moveRight()
{
$('#feedback').animate(
{left: move_right+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.right_btn').show();
}
// Positioning the feedback form at the time of page loading
positioningForm();
// Handling the right_btn and lift_btn event animations
$('.right_btn').click(function()
{
slideFromRight();
});
$('.left_btn').click(function()
{
slideFromleft();
});
// Moving left or right by clicking close button
$('.feed_close').click(function()
{
var pos = $('#feedback').position();
var ls = pos.left;
if(ls == slide_from_left)
{
// feedback form is at LEFT
moveRight();
}
else if(ls == center)
{
// feedback form is at RIGHT
moveRight();
}
else
{
// feedback form is at CENTER
moveLeft();
}
});
// Submit Form values
$('#submit_btn').click(function()
{
var name=$('#name').val();
var email=$('#email').val();
var msg=$('#msg').val();
if(name.length>0 && email.length>0 && msg.length>0)
{
$('.left_btn').hide();
$('.right_btn').hide();
$('.box').hide();
$('#feedback').animate(
{left: center+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.thankyou').show();
}
else
{
$('#error').html('Enter some thing');
}
return false();
});
});
</script>
HTML Code
Contains simple HTML code.
<div id="feedback">
<div class="right_btn"><img src="images/feed_right_btn.png" width="26px" height="99px"/></div>
<div class="formdiv">
<div class='thankyou'>
<h3>Thank you !</h3>
<div class="feed_close"><img src="images/feed_close_btn.png" width="16px" height="15px"/></div>
</div>
<div class="box">
<table border="0"> <tr>
<td><label>Name:</label><br/><input type="text" name="name" id="name"/> </td>
<td valign="middle" align="right"><div class="feed_close"><img src="images/feed_close_btn.png" width="16px" height="15px"/></div></td>
</tr> <tr>
<td colspan="2"><label>Email:</label><br/><input type="text" name="email" id="email"/></td>
</tr> <tr>
<td colspan="2"><label>Message: </label><br/><textarea rows="5" cols="16" name="msg" id="msg"></textarea></td>
</tr> <tr>
<td colspan="2"><input id="submit_btn" type="submit" value="Submit"/><span id="error"></span></td>
</tr> </table>
</div>
</div>
<div class="form_submit"></div>
<div class="left_btn"><img src="images/feed_left_btn.png" width="26px" height="99px"/></div>
</div>
<div class="right_btn"><img src="images/feed_right_btn.png" width="26px" height="99px"/></div>
<div class="formdiv">
<div class='thankyou'>
<h3>Thank you !</h3>
<div class="feed_close"><img src="images/feed_close_btn.png" width="16px" height="15px"/></div>
</div>
<div class="box">
<table border="0"> <tr>
<td><label>Name:</label><br/><input type="text" name="name" id="name"/> </td>
<td valign="middle" align="right"><div class="feed_close"><img src="images/feed_close_btn.png" width="16px" height="15px"/></div></td>
</tr> <tr>
<td colspan="2"><label>Email:</label><br/><input type="text" name="email" id="email"/></td>
</tr> <tr>
<td colspan="2"><label>Message: </label><br/><textarea rows="5" cols="16" name="msg" id="msg"></textarea></td>
</tr> <tr>
<td colspan="2"><input id="submit_btn" type="submit" value="Submit"/><span id="error"></span></td>
</tr> </table>
</div>
</div>
<div class="form_submit"></div>
<div class="left_btn"><img src="images/feed_left_btn.png" width="26px" height="99px"/></div>
</div>
CSS
body{
width: 100%;
overflow: hidden; /* This is IMP */
padding: 0;
margin: 0 auto;
}
#feedback{
width: 362px;
padding: 10px;
position: absolute;
top: 100px;
display: none;
}
#feedback .formdiv{
width: 300px;
float: left;
background-color: #6f115c;
padding: 0px 5px 5px 5px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius:6px;
border-bottom-left-radius:6px;
min-height:100px;
}
#feedback label{
font:bold 11px arial;
color: #febaf9;
}
#feedback textarea{
width: 290px;
height: 100px;
color: #fcd1f2;
font: normal 11px verdana;
border: none;
padding: 5px;
background-color: #943080;
-moz-box-shadow: inset 1px 1px 1px #4c0b3f;
-webkit-box-shadow: inset 1px 1px 1px #4c0b3f;
resize: none; /* disable extending textarea in chrome */
}
#feedback input[type="text"]{
color: #606060;
font: normal 11px verdana;
padding: 3px;
width: 200px;
height: 25px;
border: none;
color: #fcd1f2;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #943080;
-moz-box-shadow: inset 1px 1px 1px #4c0b3f;
-webkit-box-shadow: inset 1px 1px 1px #4c0b3f;
}
#feedback input[type="submit"]{
background-color: #ffaffa;
border: none;
color: #6f115c;
font:bold 11px arial;
padding: 2px 6px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
cursor: pointer;
}
#feedback .left_btn,
#feedback .right_btn{
width: 26px;
height: 100px;
float: left;
cursor: pointer;
}
#feedback .feed_close{
cursor: pointer;
margin:-15px -5px 0px 0px;
}
#error
{
color:#fff;
padding:4px;
font-size:11px;
}
.thankyou
{
text-align:center;
display:none;
}
width: 100%;
overflow: hidden; /* This is IMP */
padding: 0;
margin: 0 auto;
}
#feedback{
width: 362px;
padding: 10px;
position: absolute;
top: 100px;
display: none;
}
#feedback .formdiv{
width: 300px;
float: left;
background-color: #6f115c;
padding: 0px 5px 5px 5px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius:6px;
border-bottom-left-radius:6px;
min-height:100px;
}
#feedback label{
font:bold 11px arial;
color: #febaf9;
}
#feedback textarea{
width: 290px;
height: 100px;
color: #fcd1f2;
font: normal 11px verdana;
border: none;
padding: 5px;
background-color: #943080;
-moz-box-shadow: inset 1px 1px 1px #4c0b3f;
-webkit-box-shadow: inset 1px 1px 1px #4c0b3f;
resize: none; /* disable extending textarea in chrome */
}
#feedback input[type="text"]{
color: #606060;
font: normal 11px verdana;
padding: 3px;
width: 200px;
height: 25px;
border: none;
color: #fcd1f2;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #943080;
-moz-box-shadow: inset 1px 1px 1px #4c0b3f;
-webkit-box-shadow: inset 1px 1px 1px #4c0b3f;
}
#feedback input[type="submit"]{
background-color: #ffaffa;
border: none;
color: #6f115c;
font:bold 11px arial;
padding: 2px 6px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
cursor: pointer;
}
#feedback .left_btn,
#feedback .right_btn{
width: 26px;
height: 100px;
float: left;
cursor: pointer;
}
#feedback .feed_close{
cursor: pointer;
margin:-15px -5px 0px 0px;
}
#error
{
color:#fff;
padding:4px;
font-size:11px;
}
.thankyou
{
text-align:center;
display:none;
}
lol. very nice n smart!!
ReplyDeleteuse document.width is better than screen.width. Because not all the person are used to maximum window.
ReplyDeletethis is cool-I like it.
ReplyDeleteAnd where is the gag? A lot of Google Ads in some browsers and blank in others?
ReplyDeleteIt's not working neither in Safari, nor in FF or Chrome. Opera works only by accident, when you're scrolling horizontally with your mouse ball.
Simple and a gud one.
ReplyDeleteLOL Rajini Style Feedback Form :D
ReplyDelete@Sensitive Designs
ReplyDeleteGreat comment. I love it.
Not Working In IE8 ;)
ReplyDeletenice effect i must comment
ReplyDeletedont see anything
ReplyDeleteLike it. Love it.
ReplyDeletegood one, but pretty annoying effects
ReplyDeleteuseful, giving a lot good ideas..works in firefox..i`m also recommended document.width, in other way go offset.
ReplyDeletevery nice tutorial dude... your tutotials helping me lot in my testing...
ReplyDeletesuch a great work
ReplyDeletewhere to add email of ours, where feedback forms will receive.
ReplyDeletei must say wow
ReplyDelete@Paul : You could refer this link for form submission
ReplyDeletehttp://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html
HI ITS COOL i'm wonderig how do this in web on right side scrol ?
ReplyDeletehow make this on top site, end animatin on left to right top ?
What do change if you only want the form to close after submit (i.e. not scrolling to the other side)?
ReplyDeleteReally this one simple and nice effect, i love it!
ReplyDeletecan i make it stay at left dont animate to right
ReplyDeleteGood afternoon! I found a little bug. On the widescreen monitor I posted the taskbar on the left side of the screen (on Windows7 OS is very convenient). I didn't immediately understand why your script doesn't work , but Later, however, drew the attention you are using a "screen.width". In this case, the button is not visible.
ReplyDeleteSorry for my English
I applied here is the solution:
ReplyDeletevar scr_w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
Nice work Guy, a small request, can i use this to my own portfolio site as a contact form. :) Please
ReplyDelete@Raashid
ReplyDeleteYou can
Not Working In IE 9
ReplyDeletenot working in Crome 12
ReplyDeletei used in my web site but its remove scrolling of website what i do please
ReplyDeletecan i use database mysql in this magical feedback?????
ReplyDeletenot working in ie6
ReplyDeleteIE browser is DEAD
ReplyDeleteFor those that think IE is dead, which alternative reality do you live in? IE is still used by the vast majority of visitors to your site, ignore at your peril.
ReplyDeleteWorking in IE7 and FF (latest version) for me. Thanks for the tutorial
Very nice script, but I am wondering to which email we can receive mail? no to: email is defined??? how we can do this?
ReplyDeletehey this is cool
ReplyDeleteI have found the same error as AAsad that its remove scrolling of website....
ReplyDeleteI have applied this code..work perfectly...
ReplyDeleteNice Creativity !!!!
Thanks & Regards
kaushal Gupta
Wonderful work, code working fine. Thank you.
ReplyDeletehi...this is bigrock
ReplyDeleteCool... nIce Work... Keep it up!!
ReplyDeleteTo make the scroll work change the css -->
overflow:hidden; to overflow:scroll; and to adjust that button var btn_width =
worked for me... :D
Thanks & Regards
CrAzu<
I have applied this code..but this effect did not show my work page can u help me plz :-(
ReplyDeleteReally Helped, thanks for download option
ReplyDeleteWonderful work, code working fine. Thank you.
ReplyDelete