#feedback-form { /* вся форма */ max-width: 550px; padding: 2%; border-radius: 3px; background: #f1f1f1; } #feedback-form label { /* наименование полей */ float: left; display: block; clear: right; } #feedback-form .w100 { /* поля */ float: right; max-width: 400px; width: 97%; margin-bottom: 1em; padding: 1.5%; } #feedback-form .border { /* граница полей */ border-radius: 1px; border-width: 1px; border-style: solid; border-color: #C0C0C0 #D9D9D9 #D9D9D9; box-shadow: 0 1px 1px rgba(255,255,255,.5), 0 1px 1px rgba(0,0,0,.1) inset; } #feedback-form .border:focus { outline: none; border-color: #abd9f1 #bfe3f7 #bfe3f7; } #feedback-form .border:hover { border-color: #7eb4ea #97cdea #97cdea; } #feedback-form .border:focus::-moz-placeholder { /* убрать при фокусе первоначальный текст поля */ color: transparent; } #feedback-form .border:focus::-webkit-input-placeholder { color: transparent; } #feedback-form .border:not(:focus):not(:hover):valid { /* правильно заполненные поля */ opacity: .8; } #submitFF { /* кнопка Отправить */ padding: 2%; border: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset; background: #669acc; color: #fff; } #feedback-form br { height: 0; clear: both; } #submitFF:hover { background: #5c90c2; } #submitFF:focus { box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05); } Имя: Договор: Email: Телефон: Сообщение: Прикрепить файл: 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 && http.status == 200) { alert(http.responseText); if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поле сообщения, если в ответе первым словом будет имя отправителя f.messageFF.removeAttribute('value'); f.messageFF.value=''; } } } http.onerror = function() { alert('Извините, данные не были переданы'); } http.send(new FormData(f)); }, false);
