Home Tech How to create a cool contact form using javascript and jquery
Tech - November 2, 2013

How to create a cool contact form using javascript and jquery

For a cool global  contact form you need littlebit of JavaScript to enhance it. Let me give you a good coding where you can design a beautyful contact form which will work on all platform and form controls of your php or html file.

It has three section, one is global controls required validation and another is resting all control and the third one is to success it with an Ajax style msg display.

You need Jquery First.

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

and the final one which either will go on the page or you can use it using a custom.js

if ( $( 'form#contact-form' ).length && jQuery() ) { 
         $('form#contact-form').submit(function() {
  function resetForm($form) {
      $form.find('input:text, input:password, input:file, select, textarea').val('');
      $form.find('input:radio, input:checkbox')
      .removeAttr('checked').removeAttr('selected');
  }
  $('form#contact-form .error').remove();
  var hasError = false;
  
  $('.requiredField').each(function() {
   if(jQuery.trim($(this).val()) == '') {
    var labelText = $(this).prev('label').text();
    $(this).parent().append('
Please enter '+labelText+'
'); $(this).addClass('inputError'); hasError = true; } else if($(this).hasClass('email')) { var emailReg = /^([w-.][email protected]([w-]+.)+[w-]{2,4})?$/; if(!emailReg.test(jQuery.trim($(this).val()))) { var labelText = $(this).prev('label').text(); $(this).parent().append('
You entered an invalid '+labelText+'
'); $(this).addClass('inputError'); hasError = true; } } }); if(!hasError) { $('form#contact-form input.submit').fadeOut('normal', function() { $(this).parent().append(''); }); var formInput = $(this).serialize(); $.post($(this).attr('action'),formInput, function(data){ $('#contact-form').prepend('
Your email was successfully sent. We will contact you as soon as possible.
'); resetForm($('#contact-form')); $('.success').fadeOut(5000); }); } return false; });

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

The Speed of Nine Planet

The speed of Sun : Astronomically the Sun is fixed and it is the planets which are moving …