<section id="contact">
<div class="container">
<h1 class="section-title scrollimation scale-in">Отправьте заявку на разработку сайта или мобильного приложения <br> со скидкой 10 000 рублей</h1>
<div class="row">
<div class="col-sm-5 contact-info scrollimation fade-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
<address>
John Doe<br>
W325 State Road 123<br>
Mondovi, WI(Wisconsin) 98746-54321<br>
(123) 456 - 7890
</address>
<ul class="socials">
<li><a href="index.html#fake"><i class="icon-twitter"></i></a></li>
<li><a href="index.html#fake"><i class="icon-facebook"></i></a></li>
<li><a href="index.html#fake"><i class="icon-dribbble"></i></a></li>
<li><a href="index.html#fake"><i class="icon-google-plus"></i></a></li>
</ul>
</div>
<form id="contact-form" class="col-sm-7 scrollimation fade-left" action="contact.php" method="post" novalidate>
<div class="form-group">
<label class="control-label" for="contact-name">Имя</label>
<div class="controls">
<i class="icon-user"></i>
<input id="contact-name" name="contactName" placeholder="Меня зовут..." class="form-control input-lg requiredField" type="text" data-error-empty="Please enter your name">
</div>
</div><!-- End name input -->
<div class="form-group">
<label class="control-label" for="contact-mail">Email</label>
<div class=" controls">
<i class="icon-envelope"></i>
<input id="contact-mail" name="email" placeholder="Тема сообщения..." class="form-control input-lg requiredField" type="email" data-error-empty="Please enter your email" data-error-invalid="Invalid email address">
</div>
</div><!-- End email input -->
<div class="form-group">
<label class="control-label" for="contact-message">Сообщение</label>
<div class="controls">
<i class="icon-comment"></i>
<textarea id="contact-message" name="comments" placeholder="Я хочу..." class="form-control input-lg requiredField" rows="5" data-error-empty="Please enter your message"></textarea>
</div>
</div><!-- End textarea -->
<p><button name="submit" type="submit" class="btn btn-theme btn-lg" data-error-message="Error!" data-sending-message="Sending..." data-ok-message="Message Sent"><i class="icon-location-arrow"></i>Отправить сообщение</button></p>
<input type="hidden" name="submitted" id="submitted" value="true" />
</form><!-- End contact-form -
 

 $(document).ready(function() {
   $('#contact-form').submit(function() {
      var buttonWidth=$('#contact-form button').width();
      
      var buttonCopy = $('#contact-form button').html(),
         errorMessage = $('#contact-form button').data('error-message'),
         sendingMessage = $('#contact-form button').data('sending-message'),
         okMessage = $('#contact-form button').data('ok-message'),
         hasError = false;
      
      $('#contact-form button').width(buttonWidth);
      $('#contact-form .error-message').remove();
      
      $('.requiredField').each(function() {
         if($.trim($(this).val()) == '') {
            var errorText = $(this).data('error-empty');
            $(this).parent().append('<span class="error-message">'+errorText+'.</span>');
            $(this).addClass('inputError');
            hasError = true;
         } else if($(this).is("input[type='email']") || $(this).attr('name')==='email') {
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if(!emailReg.test($.trim($(this).val()))) {
               var invalidEmail = $(this).data('error-invalid');
               $(this).parent().append('<span class="error-message">'+invalidEmail+'.</span>');
               $(this).addClass('inputError');
               hasError = true;
            }
         }
      });
      
      if(hasError) {
         $('#contact-form button').html('<i class="icon-remove"></i>'+errorMessage);
         setTimeout(function(){
            $('#contact-form button').html(buttonCopy);
            $('#contact-form button').width('auto');
         },2000);
      }
      else {
         $('#contact-form button').html('<i class="icon-refresh icon-spin"></i>'+sendingMessage);
         
         var formInput = $(this).serialize();
         $.post($(this).attr('action'),formInput, function(data){
            $('#contact-form button').html('<i class="icon-ok"></i>'+okMessage);
            setTimeout(function(){
               $('#contact-form button').html(buttonCopy);
               $('#contact-form button').width('auto');
            },2000);
            
         });
      }
      
      return false;   
   });
});