Генератор форм

Баннер

Для веб-мастера

Реклама


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

Рейтинг:
Дата: 28 сентября 2011 Просмотры 100852 Комментарии 109
Стильная форма обратной связи для сайта с капчей на 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>&nbsp;</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');?>

Ну вот собственно и все! Пользуйтесь и оставляйте свои комментарии к этой статье!

Оцените эту статью:

Профессионал PHP

Это самое полное профессиональное руководство по освоению PHP на уровне мастера-виртуоза. Это для тех кто уже понимает что такое PHP, каковы мощь и потенциал этого языка.

Люди, завершившие курс, утверждают что один месяц обучения по данной программе можно сравнить с ГОДАМИ обучения по книгам или материалам из интернета! 

Подробнее ->

Похожие статьи
Интересно почитать

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Подписка

Подпишитесь прямо сейчас на почтовую рассылку:

"Новичку Инфо-Бизнеса.
От Простого К Сложному"

Ваше имя: *

Ваш e-mail: *

и получайте каждую неделю на свой электронный адрес список новых статей, опубликованных на страницах этого проекта.

Реклама

Баннер

Топ комментаторы

Нашли ошибку в тексте

Система Orphus
http://biznesguide.ru/coding/148.html
4,06 из 5 на основе 101 оценок.
Твиттер Facebook Google plus RSS