Стильная форма обратной связи для сайта с капчей на PHP

Когда-то давным давно я уже писал о том, как создать форму обратной связи для сайта и обработчик формы обратной связи. Эти статьи носили ознакомительный характер и были направлены на то, чтобы новички поняли сам принцип создания таких форм.
В этой же статье я расскажу Вам, как создать более качественную форму обратной связи с использованием класса валидации Validator.php, о котором я рассказывал в прошлой статье. Также наша форма обратной связи будет содержать капчу, для защиты от СПАМ-роботов.
HTML-разметка
Первым делом создадим html-разметку для нашей формы обратной связи.
<form action="" method="post" class="form"> <div> <label>Ваше имя:</label> <input type="text" class = "text" name="user_name" value="" /> </div> <div> <label>Ваш e-mail адрес:</label> <input type="text" class = "text" name="user_email" value="" /> </div> <div> <label>URL адрес сайта:</label> <input type="text" class = "text" name="user_url" value="" /> </div> <div> <label>Тема письма:</label> <input type="text" class = "text" name="subject" value=""/> </div> <div class="area"> <label>Текст сообщения:</label> <textarea cols="40" class = "textarea" rows="5" name="text"></textarea> </div> <div> <label class="captcha">Введите цифры изображенные на картинке:</label> <div class="capth_images"></div> <input type="text" class = "text" name="keystring" value=""/> </div> <div> <label> </label> <input type="submit" class="btn" value="Отправить сообщение" /> </div> </form>
Здесь нет ничего сложного. Самый простой html-код формы, где каждый элемент формы оборачивается в контейнер <div></div>. Внутри этого контейнера находится описание элемента формы, который обвернут в тег <label></label> и собственно само текстовое поле.
Для капчи есть отдельный контейнер div с классом class="capth_images", куда будут выводится защитные изображения. Для этого в коде необходимо прописать следующий код:
<div class="capth_images"><?php require 'captcha.php';?></div>
Более подробно о защитном коде Вы можете прочитать в статье «Создаем простую капчу для защиты формы обратной связи», поэтому здесь я на этом останавливаться не буду.
CSS-стили
form.form{ width: 600px; margin: 0 auto; } form.form div { padding:4px; margin: 4px 0; position:relative; } form.form input.text, .textarea { padding:5px 10px; height:20px; border:1px solid #ddd; color:#333; background:url(images/bginput.jpg) repeat-x bottom #fff; position:relative; z-index:2; font-size: 16px; } form.form input.text { width:290px; } form.form .textarea { height:150px; width:290px; } form.form label { float:left; width:120px; text-align:right; margin-right:15px; font-weight:bold; color:#666; font-size: 13px; } form.form .btn { display:block; height:31px; padding:0 10px; background:url(images/bgbtn.jpg) repeat-x; color:#565e62; font-weight:bold; font-size:12px; border:1px solid #e1e0df; outline:none; cursor: pointer; } /* CSS3 */ form.form .btn, form.form .text, form.form .textarea { -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; } div.error_field{ background: #FEDAFB; border: 1px solid #FA74F0; } div.errors{ width: 580px; margin: 15px auto; padding: 10px; border: 1px solid #ccc; background: #FDFEC2; } div.errors .error{ color: red; font-weight: bold; font-size: 12px; margin: 5px; }
В стилях тоже нет ничего особенного. Для полей задаются отступы, рамка, а также фоновое изображения. Используя CSS3 закругляем углы у текстовых полей. Также создаем стили для сообщений об ошибках. Итак идем дальше.
PHP обработчик формы
Если Вы обратили внимание, то у формы атрибут action пустой. Это означает, что все данные с формы будут переданы на туже страницу, на которой размещена сама форма. Поэтому и обработчик формы обратной связи будет находится в этом же файле что и сама форма. Поэтому в самом начале файла, где находится форма, необходимо добавить следующий код:
<?php session_start(); require_once 'validator.php'; $validator = new Validator(); $validator->set_error_delimiters('<div class="error">', '</div>'); //Задаем правила валидации $rules = array( array( 'field' => 'user_name', 'label' => 'Ваше имя', 'rules' => array( 'trim' => '', //Обрезаем пробелы по бокам 'strip_tags' => '', // Удаляем HTML и PHP теги 'required' => 'Поле %s обязательно для заполнения' ) ), array( 'field' => 'user_email', 'label' => 'Ваш e-mail адрес', 'rules' => array( 'trim' => '', 'required' => 'Поле %s обязательно для заполнения', 'valid_email' => 'Поле %s должно содержать правильный email-адрес' ) ), array( 'field' => 'user_url', 'label' => 'URL адрес сайта', 'rules' => array( 'trim' => '', 'valid_url' => 'Поле %s должно содержать правильный URL адрес' ) ), array( 'field' => 'subject', 'label' => 'Тема письма', 'rules' => array( 'trim' => '', //Обрезаем пробелы по бокам 'strip_tags' => '', // Удаляем HTML и PHP теги 'required' => 'Поле %s обязательно для заполнения' ) ), array( 'field' => 'text', 'label' => 'Текст сообщения', 'rules' => array( 'trim' => '', //Обрезаем пробелы по бокам 'strip_tags' => '', // Удаляем HTML и PHP теги 'required' => 'Поле %s обязательно для заполнения' ) ), array( 'field' => 'keystring', 'label' => 'Капча', 'rules' => array( 'trim' => '', //Обрезаем пробелы по бокам 'required' => 'Вы не ввели цифры изображенные на картинке', 'valid_captcha[keystring]' => 'Вы ввели не правильный цифры с картинки' ) ) ); //Устанавливаем правила валидации $validator->set_rules($rules); $message = ''; //Запускаем валидацию POST данных if($validator->run()){ //Здесь впишите свой e-mail адрес //на негу будут приходить уведомления с формы $to = 'mail@example.ru'; $from = "=?UTF-8?b?" . base64_encode($validator->postdata('user_name')) . "?="; $subject = "=?UTF-8?b?" . base64_encode( $validator->postdata('subject') ) . "?="; $mail_body = "Поступил новый ответ от формы обратной связи.\r\nАвтор оставил такие данные:\r\n"; //Формируем текст сообщения foreach($rules as $rule){ if($rule['field'] == 'keystring') continue; $mail_body .= $rule['label'].': '.$validator->postdata($rule['field'])."\r\n"; } $header = "MIME-Version: 1.0\n"; $header .= "Content-Type: text/plain; charset=UTF-8\n"; $header .= "From: ". $from . " <" . $validator->postdata('user_email'). ">"; //Отправка сообщения if(mail($to, $subject, $mail_body, $header)){ $message = '<div class="error">Ваше сообщение успешно отправлено!</div>'; //Очищаем форму обратной связи $validator->reset_postdata(); } else{ $message = '<div class="error">Ваше сообщение не отправлено!</div>'; } } else{ //Получаем сообщения об ошибках в виде строки $message = $validator->get_string_errors(); //Получаем сообщения об ошибках в виде массива $errors = $validator->get_array_errors(); } ?>
Теперь обо всем по порядку.
Первым делом запускаем сессию, так как защитный код формы будет хранится в сессии.
session_start();
Далее подключаем класс вилидации Validator.php и создаем экземпляр класса, который сохраняем в переменную $validator. Также задаем теги обрамления для сообщений об ошибках.
require_once 'validator.php'; $validator = new Validator(); $validator->set_error_delimiters('<div class="error">', '</div>');
После того, как создан объект Validator, задаем правила валидации. В качестве способа установки правил валидации я выбрал многомерный ассоциативный массив правил.
Более подробно о правилах валидации и способах их установки читайте в статье «Класс Validator для валидации POST данных»
После того, как правила валидации заданы, запускаем валидацию. Если валидация не прошла, получаем сообщения об ошибках. Иначе отправляем сообщение на наш e-mail адрес и выводим строку о том, что сообщение отправлено.
$message = ''; //Запускаем валидацию POST данных if($validator->run()){ //Здесь впишите свой e-mail адрес //на негу будут приходить уведомления с формы $to = 'mail@example.ru'; $from = "=?UTF-8?b?" . base64_encode($validator->postdata('user_name')) . "?="; $subject = "=?UTF-8?b?" . base64_encode( $validator->postdata('subject') ) . "?="; $mail_body = "Поступил новый ответ от формы обратной связи.\r\nАвтор оставил такие данные:\r\n"; //Формируем текст сообщения foreach($rules as $rule){ if($rule['field'] == 'keystring') continue; $mail_body .= $rule['label'].': '.$validator->postdata($rule['field'])."\r\n"; } $header = "MIME-Version: 1.0\n"; $header .= "Content-Type: text/plain; charset=UTF-8\n"; $header .= "From: ". $from . " <" . $validator->postdata('user_email'). ">"; //Отправка сообщения if(mail($to, $subject, $mail_body, $header)){ $message = '<div class="error">Ваше сообщение успешно отправлено!</div>'; //Очищаем форму обратной связи $validator->reset_postdata(); } else{ $message = '<div class="error">Ваше сообщение не отправлено!</div>'; } } else{ //Получаем сообщения об ошибках в виде строки $message = $validator->get_string_errors(); //Получаем сообщения об ошибках в виде массива $errors = $validator->get_array_errors(); }
Как видно мы получаем сообщения в виде строки и массива. Это сделано специально.
Сообщения в виде строки мы выводим над формой обратной связи. Для этого перед формой необходимо прописать следующий php-код:
<?=(!empty($message))? '<div class="errors">'.$message.'</div>': ''?>
А ассоциативный массив с сообщениями об ошибках нужен для того, чтобы подсвечивать текстовые поля, в которых есть ошибки. Для этого необходимо контейнеру div, который содержит элемент формы, дописать класс error_field. Для примера я приведу код, для текстового поля subject
<div <?=(!empty($errors['subject']))? 'class="error_field"': '';?>> <label>Тема письма:</label> <input type="text" class = "text" name="subject" value="<?=$validator->postdata('subject');?>"/> </div>
Также следует заметить, что для того, чтобы пользовательские данные не стирались при возникновении ошибок, текстовому полю атрибуту value необходимо прописать такой код:
<?=$validator->postdata('subject');?>
Ну вот собственно и все! Пользуйтесь и оставляйте свои комментарии к этой статье!
-
Комментарии (111)
- Сайт
Facebook