Форма обратной связи для сайта - это форма связи с администраторами, владельцами сайта, через email. Обратная связь всегда должна присутствовать на каждом сайте. Она дает возможность пользователям, написать отзыв или предупреждение об ошибке или. что-то иное.
Сегодня, хочу вместе с вами создать форму обратной связи для сайта, с капчей, с проверочным кодом. И в сегодняшней первой публикации, на данную тему создадим саму форму и пропишим для нее стили css, для красивого отображения.
Для начала определимся какие поля нам необходимы для отправки и обратной связи.
Имя
E-mail адрес
Тема
Сообщение
Поле ввода проверочного кода
Для простой формы без приложения загружаемых файлов вполне достаточно и 5 поолей. Если согласны тогда давайте создадим форму. Обработчиком будем использовать файл, в котором создаем форму. Создадим пустой файл mail.php и уже в него вставим форму
Код формы
Код HTML
<form action="./" method="post" id="mail_form">
<input name="test" value="1" type="hidden">
<fieldset>
<label for="name"><b>Ваше имя:</b></label>
<input class="text" size="25" name="name" id="name" type="text">
<label for="email"><b>Ваш E-mail адрес:</b></label>
<input class="text" size="25" name="email" id="email" type="text">
<label for="message"><b>Тема сообщения:</b></label>
<input class="text" size="25" name="message" id="message" type="text">
<label for="text"><b>Сообщение:</b></label>
<textarea cols="50" rows="20" name="text" id="text"></textarea>
<input class="text" size="25" name="key" id="key" type="text">
<br><br>
<label><input class="submit" name="submit" id="submit" value=" Отправить " type="submit"></label>
</fieldset>
</form>
Здесь надеюсь ничего объяснять необходимости нет. Это самая простая форма. С ней мы и будим работать. Форму мы создали, далее неоходимо создавать стили для формы, я например использую такое решение, смотрим код css ниже. Создадим фойл style.css со следующим кодом, или добавим в существующие стили.
Код CSS
fieldset {
border:0;
margin:0;
padding:0; }
label {
display:block; }
input.text,textarea {
width:300px;
font:12px/12px 'courier new',courier,monospace;
color:#333;
padding:3px;
margin:1px 0;
border:1px solid #ccc; }
input.submit {
padding:2px 5px;
font:bold 12px/12px verdana,arial,sans-serif; }
Вы конечно можете использовать свои стили, я дал просто наводку, что можно поменять, изменить. Основная часть простой разметки создана, можно переходить к серверному программированию на php. А php у нас будет обрабатывать данные на сервере, и отсылать на наш почтовый ящик. Следующим шагом в файле mail.php в самом верху откроем теги php (<?php ?>) и выполним проверку обработчика формы обратной связи
Код PHP
// Когда пользователь нажал кнопку отправить
if ($_POST['test']== "1")
{
// Проверка на заполненость поля имя
if (isset($_POST['name']) && $_POST['name'] == "")
{
// Если пустое выводим ошибку
$error = "$errors_name";
}
// Заполненность поля email
elseif (isset($_POST['email']) && $_POST['email'] == "")
{
// Сообщаем о ошибке
$error = "$errors_mail";
}
// Проверка на правильность ввода email адреса
elseif(isset($_POST['email']) && !preg_match("/^([a-z,._,0-9])+@([a-z,._,0-9])+(.([a-z])+)+$/", $_POST['email']))
{
// Ообщение о нервильном вводе
$error = "$errors_incorrect";
unset($_POST['email']);
}
// Проверка на заполнение поля тема
elseif (isset($_POST['message']) && $_POST['message'] == "")
{
// Вывод сообщения ошибки
$error = "$errors_message";
}
// Проверяем поле текст сообщения
elseif (isset($_POST['text']) && $_POST['text'] == "")
{
// Если поле пустое выводим сообщение ошибки
$error = "$errors_text";
}
Вот мы проверили самым простым способом, таким конечно проверять мало, необходимо более, но для наглядности создания и принципа работы формы обратной связи достаточно. Как видите, здесь, я решил сделать вывод и сообщений о ошибках ввода. А как их выводить сейчас и разберем.
Создаем файл для вывода ошибок и назовем его error.php Его содержание будет следующим;
Код PHP
<?php
$errors_name = 'Введите ваше имя';
$errors_mail = 'Введите свой E-mail адрес';
$errors_incorrect = 'Заполните правильно Ваш E-mail адрес';
$errors_text = 'Введите текст вашего сообщения';
$errors_message = 'Введите тему сообщения';
?>
Все файл с ошибками готов, теперь в самом верху mail.php подключим файл error.php
Код PHP
// После открывающего тега <?php подключаем файл ошибок
require_once("error.php");
Файл с ошибками подключен теперь все проверки и ошибки готовы, двигаемся далее. Подключам функцию php mail для отправки писем с сайта.
Код PHP
// Сразу после проверок добавляем следующий код
elseif (!empty($_POST))
{
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: $content charset=$charset\r\n";
$headers .= "Date: ".date("Y-m-d (H:i:s)",time())."\r\n";
$headers .= "From: \"".$_POST['name']."\" <".$_POST['email'].">\r\n";
$headers .= "X-Mailer: My Send E-mail\r\n";
mail($mailto,$subject,$message,$headers);
unset($name, $text, $mailto, $subject, $message, $text);
// Если письмо отпревлено выводим сообщение о успешном действии
$statusSuccess = "$send";
}
}else{
// Здесь проверим капчу далее
}
}
Это в принципе стандартная, такая шапка для, такого рода скриптов отправки письма на email с сайта. Здесь, я добавил несколько непонятных вам переменных спросите вы, а откуда они взяты? Вот сейчас и все по полочкам розложу. Давайте создадим для удобства еще один файл в котором мы будим хранить всю конфигурацию нашего скрипта почтовика, и назовем его config.php или дбавить код в файл вашей конфигурации следующий код;
Код PHP
<?php
$mailto = "admin@phpguru.com.ua";
$charset = "utf8";
$subject = $_POST['text'];
$content = "text/plain";
$message = $_POST['text'];
$уrror = "";
$statusSuccess = ""; // Если успех то можно ввести сообщение о успешной отправке
?>
Все теперь у нас форма готова, обработчик готов, вывод сообщений о ошибках или успехе сделан. Далее осталось сделать защиту от спама. Защита от спама обязательно нужна, я уже создавал публикацию на тему капчи, какую капчу лучше использовать. Темнеменее, повторюсь, что капча должна быть уникальной, а не та, которую используют тысячи других сайтов. тогда ваша защита гарантирована. Но о том как прикруть капчу к форме обратной связи, я объясню в следующей публикации. Потому, что в одной слишком много текста и страница будет длинной в метр. Основное здесь, я написал, пробуйте тренируйтесь, а я пока напишу как создать уникальную капчу для формы обратной связи с проверкой, и примером в демо режиме. Всем удачного дня!