Ajax Stylish Captcha and Contact Form using JQuery and PHP.

Captcha is main component of just about any style in addition to when it is ajax centered and then it looks amazing. Desire you can like this in addition to post me personally the nourish returning. Thank you!



JQUERY CODE

   1: // <![CDATA[    

   2: $(document).ready(function() { 

   3:  

   4:  $('#Send').click(function() {  

   5:     

   6:         // name validation

   7:         

   8:         var nameVal = $("#name").val();

   9:         if(nameVal == '') {

  10:             

  11:             $("#name_error").html('');

  12:             $("#name").after('<label class="error" id="name_error">Please enter your name.</label>');

  13:             return false

  14:         }

  15:         else

  16:         {

  17:             $("#name_error").html('');

  18:         }

  19:         

  20:         /// email validation

  21:         

  22:         var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

  23:         var emailaddressVal = $("#email").val();

  24:         

  25:         if(emailaddressVal == '') {

  26:             $("#email_error").html('');

  27:             $("#email").after('<label class="error" id="email_error">Please enter your email address.</label>');

  28:             return false

  29:         }

  30:         else if(!emailReg.test(emailaddressVal)) {

  31:             $("#email_error").html('');

  32:             $("#email").after('<label class="error" id="email_error">Enter a valid email address.</label>');

  33:             return false

  34:          

  35:         }

  36:         else

  37:         {

  38:             $("#email_error").html('');

  39:         }

  40:     

  41:         $.post("post.php?"+$("#MYFORM").serialize(), {

  42:     

  43:         }, function(response){

  44:         

  45:         if(response==1)

  46:         {

  47:             $("#after_submit").html('');

  48:             $("#Send").after('<label class="success" id="after_submit">Your message has been submitted.</label>');

  49:             change_captcha();

  50:             clear_form();

  51:         }

  52:         else

  53:         {

  54:             $("#after_submit").html('');

  55:             $("#Send").after('<label class="error" id="after_submit">Error ! invalid captcha code .</label>');

  56:         }

  57:         

  58:         

  59:     });

  60:             

  61:     return false;

  62:  });

  63:  

  64:  // refresh captcha

  65:  $('img#refresh').click(function() {  

  66:         

  67:         change_captcha();

  68:  });

  69:  

  70:  function change_captcha()

  71:  {

  72:     document.getElementById('captcha').src="get_captcha.php?rnd=" + Math.random();

  73:  }

  74:  

  75:  function clear_form()

  76:  {

  77:     $("#name").val('');

  78:     $("#email").val('');

  79:     $("#message").val('');

  80:  }

  81: });

CSS CODE

   1: body{ font-family:Georgia, "Times New Roman", Times, serif; font-size:14px}

   2: #wrap{

   3:     border:solid #CCCCCC 1px;

   4:     width:203px;

   5:     -webkit-border-radius: 10px;

   6:     float:left;

   7:     -moz-border-radius: 10px;

   8:     border-radius: 10px;

   9:     padding:3px;

  10:     margin-top:3px;

  11:     margin-left:80px;

  12: }

  13:  

  14: .error{ color:#CC0000; font-size:12px; margin:4px; font-style:italic; width:200px;}

  15:  

  16: .success{ color:#009900; font-size:12px; margin:4px; font-style:italic; width:200px;}

  17:  

  18: img#refresh{

  19:     float:left;

  20:     margin-top:30px;

  21:     margin-left:4px;

  22:     cursor:pointer;

  23: }

  24:  

  25: #name,#email{float:left;margin-bottom:3px; height:20px; border:#CCCCCC 1px solid;}

  26:  

  27: #message{ width:260px; height:100px;float:left;margin-bottom:3px; border:#CCCCCC 1px solid;}

  28:  

  29: label{ float:left; color:#666666; width:80px;}

  30:  

  31: #Send{ border:#CC0000 solid 1px; float:left; background:#CC0000; color:#FFFFFF; padding:5px;}

HTML CODE

   1: <form action="#" name="MYFORM" id="MYFORM">

   2:     <label>Name</label>

   3:     <input name="name" size="30" type="text" id="name">

   4:     <br clear="all" />

   5:     <label>Email</label>

   6:     <input name="email" size="30" type="text" id="email">

   7:     <br clear="all" />

   8:     <label>Message</label>

   9:     <textarea id="message" name="message"></textarea>

  10:     <br clear="all" />

  11:     

  12:     <div id="wrap" align="center">

  13:         <img src="get_captcha.php" alt="" id="captcha" />

  14:         

  15:         <br clear="all" />

  16:         <input name="code" type="text" id="code">

  17:     </div>

  18:     <img src="refresh.jpg" width="25" alt="" id="refresh" />

  19:         

  20:     <br clear="all" /><br clear="all" />

  21:     <label>&nbsp;</label>

  22:     <input value="Send" type="submit" id="Send">

  23: </form>

DEMO & DOWNLOAD

---

Add this widget to your website for $10. Please contact us : info@9pixle.com

---