Css форма обратной связи. Создание формы обратной связи. Контактная форма в тёмных тонах
Итак, давайте приступим, первым делом мы разметим страницу и пропишем для неё стили. Разметка будет включать в себя обычную форму обратной связи с двумя input (телефон, почта) и одной текстовой областью, куда, по нашей задумке, пользователь будет вводить своё сообщение. Обработчик формы разместим на отдельной странице.
Форма обратной связи
Введите телефон:
Ваша почта:
Ваш вопрос:
Пропишем стили:
Html, body{ height: 100%; margin: 0; } html{ background-color: #fff; color: #333; font: 12px/14px Verdana, Tahoma, sans-serif; cursor: default; } #feedback-form{ background-color: #ececec; margin: 50px auto 0; text-align: center; width: 430px; padding: 15px; } #feedback-form h2{ margin-bottom: 25px; } #feedback-form input, #feedback-form textarea{ background-color: #fff; border: 1px solid #A9A9A9; padding: 1px 5px; width: 90%; } #feedback-form input{ height: 26px; } #feedback-form textarea{ height: 75px; padding-top: 5px; } #feedback-form input{ margin-top: 15px; background-color: #0B7BB5; border: 1px solid #CCCCCC; color: #FFFFFF; font-weight: bold; height: 40px; line-height: 40px; text-transform: uppercase; width: 225px; cursor: pointer; }
В результате всех этих действий получится вот такая форма:
Теперь пришло время заняться сервером. Наш скрипт будет включать в себя несколько частей:
- Настройка;
- Вспомогательные функции;
- Обработка пришедших данных;
- Вывод сообщений.
Все эти части, конечно, условные, так как нам никто не мешает сделать из кода кашу или наоборот вынести ключевые части в другие файлы. Но я думаю, обработчик лучше делать одним файлом, чтобы было удобно его подключать к другим проектам.
НастройкаНа этом этапе мы создадим три переменные: $my_email (почтовый ящик на который отправляются данные), $path_log (путь до файла логов) и $time_back (время возвращение пользователя обратно на сайт).
// Указываем свой почтовый ящик $my_email = "[email protected]"; // Указываем где будут храниться логи $path_log = "log.txt"; // Время возвращения пользователя на сайт (сек) $time_back = 3;
Вспомогательные функцииЗдесь опишем пять функций, которые упростят обработку данных.
Шаблоны вывода сообщений:
Function error_msg($message){ $message = "".$message.""; return $message; } function success_msg($message){ $message = "".$message.""; return $message; }
Очистка данных пришедших с формы:
Function clear_data($var){ return trim(strip_tags($var)); }
Отправка письма:
Function send_mail($email, $subj, $text, $from){ $headers = "From: ".$from." \r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html; charset=utf-8 \r\n"; $result = mail($email, $subj, $text, $headers); if(!$result){ return false; } return true; }
И последняя функция, которая будет проверять телефон и почту на правильность записи их формата.
Function check_format($data, $type){ switch($type){ case "email": $pattern = "/^*@(+(*+)*\.)++$/i"; if(preg_match($pattern, $data)){ return true; } break; case "phone": $pattern = "/^(\+?\d+)?\s*(\(\d+\))?[\s-]*([\d-]*)$/"; if(preg_match($pattern, $data)){ return true; } break; } return false; }
Как видите все написанные нами функции небольшого размера. Можно было их не выносить за приделы обработки данных, но, когда вам потребуется что-то изменить или расширить, например check_format(), это будет гораздо проще и удобнее.
Обработка пришедших данныхПервым делом мы узнаём, с какой страницы пришёл пользователь. Потом определяем переменные, в которых будут храниться наши сообщения и статус отправки письма.
// Узнаем предыдущую страницу $prev_page = $_SERVER["HTTP_REFERER"]; // Наши сообщения $msg = ""; // Статус письма $status_email = "";
Теперь, чтобы не возникло проблем с кодировкой, указываем её при помощи заголовка.
Header("Content-Type: text/html; charset=utf-8");
If($_SERVER["REQUEST_METHOD"] == "POST"){
if(isset($_POST["number"], $_POST["email"], $_POST["question"])){
$number = clear_data($_POST["number"]);
$email = clear_data($_POST["email"]);
$question = clear_data($_POST["question"]);
if(check_format($number, "phone") && check_format($email, "email") && !empty($question)){
// Формируем письмо
$e_title = "Новое сообщение";
$e_body = "";
$e_body .= "";
$e_body .= "Телефон: ".$number;
$e_body .= "
";
$e_body .= "Почта: ".$email;
$e_body .= "
";
$e_body .= "Вопрос: ".$question;
$e_body .= "";
$e_body .= "";
// END Формируем письмо
if(send_mail($my_email, $e_title, $e_body, $prev_page)){
$status_email = "success";
$msg = success_msg("Спасибо за ваш вопрос.
Мы ответим вам в ближайшее время.");
}else{
$status_email = "error";
$msg = error_msg("При отправке письма произошла ошибка.");
}
// Записываем в файл
$str = "Время: ".date("d-m-Y G:i:s")."\n\r";
$str .= "Телефон: ".$number."\n\r";
$str .= "Почта: ".$email."\n\r";
$str .= "Вопрос: ".$question."\n\r";
$str .= "Письмо: ".$status_email."\n\r";
$str .= "==========================\n\r";
file_put_contents($path_log, $str, FILE_APPEND);
}else{
$msg = error_msg("Заполните форму правельно!");
}
}else{
$msg = error_msg("Произошла ошибка!");
}
}else{
exit;
}
В написанном коде мы определяем, была ли отправлена форма, в противном случае закрываем этот файл при помощи функции exit. Далее проверяем наличие в массиве POST ячеек с нашими данными, если они пришли, чистим их от возможного мусора. После очистки проверяем форматы почты и телефона, а также наличие текста в переменной вопроса. Далее формируем письмо, отправляем и пишем логии, где, помимо данных, сохраняем статус отправки письма. Так мы сможем отследить работу функции mail() и одновременно не потерять данные.
Вывод сообщенийНам осталось только оповестить пользователя об успешной или «не очень» выполненной операции и вернуть его обратно на сайт с формой. Для этого мы используем разметку с включениями PHP скрипта.
Для перенаправления пользователя обратно на сайт, мы воспользуемся метатегом refresh, где делаем вставки PHP кода уже с созданными переменными. Ещё нам потребуются немного использовать JavaScript, чтобы сделать страницу чуть динамичней. Пишем функцию timeBack(), которая будет в обратном порядке считать секунды до перенаправления.