jQuery Feedback Form

HI, Today i am going to show you a simple feedback form using jquery, i have designed a simple form using jquery, you should design a good form to give better look to user and give a vallibel feedback to your website, you can do this in simple way.

HTML

take a simple structure of form elements using html structure input box, text area ant submit button, when the user click on send button we will show the error and success messages using jqeruy.

<div id="lessoncup">
<div id="formbox">
<div class="error"></div>
<ul>
<li>
<span>Name:</span><br/>
<input name="name" type="text" id="name" class="forms"></li>
<li>
<span>Message:</span><br/>
<textarea name="message" cols="" id="message" rows="" class="forms" style="height:100px; width:200px;"></textarea></li>
<li style="margin:0; padding-top:0;"><input name="send" type="button" value="Send" class="send"></li>
</ul>
</div>

CSS

write the css to form elements to give better look and style the elements, take one div to display the messages and put it in hide mode using display:none property.

#formbox{ width:235px; height:auto; padding:5px; border:10px solid #E0E0E0;-webkit-box-shadow: 2px 2px 2px #666;
box-shadow: 2px 2px 2px #666; margin:0 auto; margin-top:20px; background-color:#F5F5F5;}

.error{color:#F00;padding:0 0 0 5px;display:none;}

.success{ color:#090;}

ul{ margin:0; padding:0; list-style:none;}

li{ padding:10px; padding-bottom:0;}

.forms{ padding:5px; border:solid #CCC 1px; resize:none; margin:5px 0 5px 0; outline:none;}

.send{ background-color:#F60; border:none; padding:5px; cursor:pointer; color:#FFF; outline:none;}

Javascript

write the click function to send button, first check the form fields weather it is filled or not if it is not filled will show the error message in error div, if every thing is good will show the success message in same div changing style using addClass() method

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $('.send').click(function(){

  var name=$('#name').val();
  var mess=$('#message').val();
  
  if(name==""){
   
   $('.error').fadeIn(400).html('<b>Enter Your Name..</b>');
   
  }else if(mess==""){
   
   $('.error').fadeIn(400).html('<b>Enter Your Message..</b>');
   
  }else{
   
   $('.error').addClass('success').html('<b>Thank you to Message '+name+'</b>');
   $('#name').val('');
   $('#message').val('');
   
  }
 });
 
});

</script>

Live Demo   Download Script