Дополнение к статье http://shpargalkablog.ru/2014/01/feedback-form.html
<!DOCTYPE html>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<style>
#feedback-form {
max-width: 400px;
padding: 2%;
border-radius: 3px;
background: #f1f1f1;
}
#feedback-form [required],
#feedback-form [disabled] {
width: 100%;
box-sizing: border-box;
margin: 2px 0 2% 0;
padding: 2%;
border: 1px solid rgba(0,0,0,.1);
border-radius: 3px;
box-shadow: 0 1px 2px -1px rgba(0,0,0,.2) inset, 0 0 transparent;
}
#feedback-form [required]:hover {
border-color: #7eb4ea;
box-shadow: 0 1px 2px -1px rgba(0,0,0,.2) inset, 0 0 transparent;
}
#feedback-form [required]:focus {
outline: none;
border-color: #7eb4ea;
box-shadow: 0 1px 2px -1px rgba(0,0,0,.2) inset, 0 0 4px rgba(35,146,243,.5);
transition: .2s linear;
}
#feedback-form [type="submit"] {
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 [type="submit"]:hover {
background: #5c90c2;
}
#feedback-form [type="submit"]: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);
}
</style>
<form method="POST" id="feedback-form">
Как к Вам обращаться:
<input type="text" name="nameFF" required placeholder="фамилия имя отчество" x-autocompletetype="name">
Email для связи:
<input type="email" name="contactFF" required placeholder="адрес электронной почты" x-autocompletetype="email">
<label><input type="radio" name="radioFF" value="0" checked="checked"/> Первый</label>
<label><input type="radio" name="radioFF" value="1"/> Второй</label>
<input type="text" id="radioFF0" required>
<input type="text" id="radioFF1" disabled>
Ваше сообщение:
<textarea name="messageFF" required rows="5"></textarea>
<input type="submit" value="отправить">
</form>
<script>
Array.prototype.slice.call(document.querySelectorAll('#feedback-form input[type="radio"]')).forEach(function(a) {a.addEventListener("click", onclickRadio)});
function onclickRadio(e) {
var inputFF = document.querySelectorAll('[id^="'+e.currentTarget.name+'"]');
for (var i = 0; i < inputFF.length; i++) {
inputFF[i].disabled = true;
inputFF[i].required = false;
}
if (e.currentTarget.checked) {
document.querySelector('[id="'+e.currentTarget.name+e.currentTarget.value+'"]').disabled = false;
document.querySelector('[id="'+e.currentTarget.name+e.currentTarget.value+'"]').required = true;
}
}
document.getElementById('feedback-form').addEventListener('submit', function(evt){
var http = new XMLHttpRequest(), f = this;
evt.preventDefault();
http.open("POST", "contacts.php", true);
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
http.send("nameFF=" + f.nameFF.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value + "&radioFF=" + f.querySelector('input[id^="radioFF"][required]').value);
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!');
f.messageFF.removeAttribute('value');
f.messageFF.value='';
}
}
http.onerror = function() {
alert('Извините, данные не были переданы');
}
}, false);
</script>
<?
if (array_key_exists('messageFF', $_POST)) {
$to = 'свой@yandex.ru';
$subject = 'Заполнена контактная форма с '.$_SERVER['HTTP_REFERER'];
$subject = "=?utf-8?b?". base64_encode($subject) ."?=";
$message = "Имя: ".$_POST['nameFF']."\nEmail: ".$_POST['contactFF']."\nIP: ".$_SERVER['REMOTE_ADDR']."\nТовар: ".$_POST['radioFF']."\nСообщение: ".$_POST['messageFF'];
$headers = 'Content-type: text/plain; charset="utf-8"';
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n";
mail($to, $subject, $message, $headers);
echo $_POST['nameFF'];
}
?>