Простая форма обратной связи для сайта php
Сегодня мы научимся создавать простую форму обратной связи для получения запросов с сайтов. Это может быть полезным, если вы не используете cms для своего сайта, или у вас специфичная cms, которая не позволяет легко создавать формы обратной связи.
Работать она будет в связке javascript + php, поэтому убедитесь, что ваш хостинг поддерживает php. Итак, поехали...
Для начала создадим саму форму, разметку:
<form method="POST" id="feedback-form"> <input type="text" name="nameFF" required placeholder="Имя" x-autocompletetype="name"> <input type="email" name="contactFF" required placeholder="E-mail" x-autocompletetype="email"> <textarea name="messageFF" required rows="5"></textarea> <input type="submit" value="отправить"> </form>
тут все просто, несколько полей: Имя, E-mail и сообщение.
Теперь добавим сообщение об успешной отправке, а также реализуем передачу полученных значений в исполняющий скрипт. Делать мы это будем на javascript:
document.getElementById('feedback-form').onsubmit = function(){ var http = new XMLHttpRequest(); http.open("POST", "contacts.php", true); http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); http.send("nameFF=" + this.nameFF.value + "&contactFF=" + this.contactFF.value + "&messageFF=" + this.messageFF.value); http.onreadystatechange = function() { if (http.readyState == 4 && http.status == 200) { alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в ближайшее время.\nБлагодарим за проявленный интерес!'); } } http.onerror = function() { alert('Извините, данные не были переданы'); } return false; }
Нам остается только создать файл contacts.php со следующим содержимым:
<? if (array_key_exists('messageFF', $_POST)) { mail ("ваш@ящик", "заполнена контактная форма с ".$_SERVER['HTTP_REFERER'], "Имя: ".$_POST['nameFF']."\nEmail: ".$_POST['contactFF']."\nСообщение: ".$_POST['messageFF']); echo $_POST['nameFF']; } ?>
Не забудьте заменить в файле contacts.php ваш@ящик на ваш e-mail.
Теперь после заполнения такой формы на почту будет приходить сообщение с введенными данными, а также будет указана страница, с которой пользователь отправил вам запрос. Всем успехов!
Полный код страницы (без файла contacts.php):
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <script> document.getElementById('feedback-form').onsubmit = function(){ var http = new XMLHttpRequest(); http.open("POST", "contacts.php", true); http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); http.send("nameFF=" + this.nameFF.value + "&contactFF=" + this.contactFF.value + "&messageFF=" + this.messageFF.value); http.onreadystatechange = function() { if (http.readyState == 4 && http.status == 200) { alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в ближайшее время.\nБлагодарим за проявленный интерес!'); } } http.onerror = function() { alert('Извините, данные не были переданы'); } return false; } </script> <style> form { width:300px; } form input, form textarea { width:100%; } </style> </head> <body> <form method="POST" id="feedback-form"> <input type="text" name="nameFF" required placeholder="Имя" x-autocompletetype="name"> <input type="email" name="contactFF" required placeholder="E-mail" x-autocompletetype="email"> <textarea name="messageFF" required rows="5"></textarea> <input type="submit" value="отправить"> </form> </body> </html>