Magical feedback form with Jquery
Wall Script
Follow Me:
Monday, December 27, 2010

Magical feedback form with Jquery

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 Demo

About Author
Ravi Tamada
Ravi Tamada
Designer Developer & Freelance
Chennai, INDIA
androidhive.info

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>

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/&gt;<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;
}

Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


43 comments:

  1. use document.width is better than screen.width. Because not all the person are used to maximum window.

    ReplyDelete
  2. And where is the gag? A lot of Google Ads in some browsers and blank in others?
    It'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.

    ReplyDelete
  3. @Sensitive Designs

    Great comment. I love it.

    ReplyDelete
  4. nice effect i must comment

    ReplyDelete
  5. good one, but pretty annoying effects

    ReplyDelete
  6. useful, giving a lot good ideas..works in firefox..i`m also recommended document.width, in other way go offset.

    ReplyDelete
  7. very nice tutorial dude... your tutotials helping me lot in my testing...

    ReplyDelete
  8. such a great work

    ReplyDelete
  9. where to add email of ours, where feedback forms will receive.

    ReplyDelete
  10. @Paul : You could refer this link for form submission

    http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html

    ReplyDelete
  11. HI ITS COOL i'm wonderig how do this in web on right side scrol ?

    how make this on top site, end animatin on left to right top ?

    ReplyDelete
  12. What do change if you only want the form to close after submit (i.e. not scrolling to the other side)?

    ReplyDelete
  13. Really this one simple and nice effect, i love it!

    ReplyDelete
  14. can i make it stay at left dont animate to right

    ReplyDelete
  15. Good 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.
    Sorry for my English

    ReplyDelete
  16. I applied here is the solution:
    var scr_w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));

    ReplyDelete
  17. Nice work Guy, a small request, can i use this to my own portfolio site as a contact form. :) Please

    ReplyDelete
  18. Not Working In IE 9

    ReplyDelete
  19. i used in my web site but its remove scrolling of website what i do please

    ReplyDelete
  20. can i use database mysql in this magical feedback?????

    ReplyDelete
  21. not working in ie6

    ReplyDelete
  22. For 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.

    Working in IE7 and FF (latest version) for me. Thanks for the tutorial

    ReplyDelete
  23. Very nice script, but I am wondering to which email we can receive mail? no to: email is defined??? how we can do this?

    ReplyDelete
  24. hey this is cool

    ReplyDelete
  25. I have found the same error as AAsad that its remove scrolling of website....

    ReplyDelete
  26. I have applied this code..work perfectly...
    Nice Creativity !!!!

    Thanks & Regards
    kaushal Gupta

    ReplyDelete
  27. Wonderful work, code working fine. Thank you.

    ReplyDelete
  28. hi...this is bigrock

    ReplyDelete
  29. Cool... nIce Work... Keep it up!!

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

    ReplyDelete
  30. I have applied this code..but this effect did not show my work page can u help me plz :-(

    ReplyDelete
  31. Really Helped, thanks for download option

    ReplyDelete
  32. Wonderful work, code working fine. Thank you.

    ReplyDelete

Make in India