Форма обратной связи

<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
<script type="text/javascript" src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
 
<div id="forma">
    <div class="wrap3">
<h3>Форма обратной связи</h3><br />
<h4>Если вы готовы к сотрудничеству с нашей командой, просим Вас заполнить <br />
предлагаемую форму ниже и наши менеджеры свяжутся с вами в кротчайшие сроки. </h4>
<table class="form">
<form  method="post" id="feedback-form" action="contacts.php"> 
 
    <tr>
    <td>
<label for="nameFF"><p class="pp">1. Ваше имя:</p></label><br />
<input type="text" name="nameFF" id="nameFF" required x-autocompletetype="name" class="w100">
<br /><br /></td>  </tr>
<tr>
<td><label for="ageFF"><p class="pp">2. Сколько лет опыта в данной сфере:</p></label><br />
<input name="ageFF" type="radio" required value="1 год" /><span class="text-g">1 год</span>
<input name="ageFF" type="radio" required value="2 года" /><span class="text-g">2 года</span>
<input name="ageFF" type="radio" required value="3 года и более" /><span class="text-g">3 года и более</span>
</td>
  </tr>
 
<tr>
 
<td><label for="siteFF"><p class="pp"><br />3. На каких из этих сайтов вы работали:</p></label><br />
<input name="siteFF1" type="radio"   value="Dream Marriage" /><span class="text-g">Dream Marriage</span>
<input name="siteFF2" type="radio"  value="Natasha Club" /><span class="text-g">Natasha Club</span>
<input name="siteFF3" type="radio"  value="Charmdate" /><span class="text-g">Charmdate</span>
<input name="siteFF4" type="radio"  value="Anastasia" /><span class="text-g">Anastasia</span>
<input name="siteFF5" type="radio"  value="Все" /><span class="text-g">Все</span>
<input name="siteFF6" type="radio"  value="Другой" /><span class="text-g">Другой, укажите:</span><br />
<input type="text" name="site" id="site" required placeholder="" class="w100">
</td>
  </tr>
        <tr> <td><br /><label for="phoneFF"><p class="pp">4. Телефон, по которому с вами можно связаться:</p></label><br />
<input type="text" name="phoneFF" id="rostFF" required placeholder="" class="w100"><br /><br /></td>  </tr>
 
 
 
 
      <tr>
   <td><label for="cityFF"><p class="pp">5. Укажите ваш город проживания:</p></label><br />
<input type="text" name="cityFF" id="cityFF" required  x-autocompletetype="name" class="w100"><br /><br /></td>   </tr>
    <tr>
<td><label for="reasonFF"><p class="pp">6. Почему мы должны предпочесть вашу кандидатуру:</p></label><br />
<input type="text" name="reasonFF" id="hairFF" required x-autocompletetype="name" class="w100"><br /><br /></td>
  </tr>
    <tr>
<td>
<label for="contactFF"><p class="pp">7. Ваш Email:</p></label><br />
<input type="email" name="contactFF" id="contactFF" required placeholder="" x-autocompletetype="email" class="w100">
  <br /><br /></td>
  </tr>
  <br />
 
 
 
</table><br />
<input value="ОТПРАВИТЬ АНКЕТУ" type="submit" id="submitFF">
</form> <br /><br />  <br /><br />
<div class="clear"></div>
 
 
 
</div>
 
</div>
 
</div>
<div id="footer"><p class="foot-t">Не стремитесь, чтобы было легче,
стремитесь, чтобы было лучше.</p></div>
 
 
 
 
 
 
<script>
document.getElementById('feedback-form').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "contacts.php", true);
  http.onreadystatechange = function() {
        
        if( http.readyState != 4 ) return;
 
        $(".window").fadeIn(400);
            
        if( http.status == 200 ) {
 
            $.colorbox({html: '<p style="color:green; margin: 5px;">Ваше сообщение получено, спасибо!</p>', closeButton: false});
 
            
        } esle {
 
            $.colorbox({html: '<p style="color:red; margin: 5px;">Извините, данные не были переданы</p>', closeButton: false});             
        }
    }
  }
  http.send(new FormData(f));
}, false);
</script>