В сегодняшнем уроке мы создадим очень красивую и функциональную форму обратной связи.
В данном уроке мы будем использовать силу PHP, CSS и jQuery. Кроме этого будут использованы плагины formValidator для проверки введенных данных и JQTransform для оформления полей и кнопок формы. Вдобавок ко всему этому будет использован класс PHPMailer для отправки сообщений.
Форма хороша тем, что прекрасно работает и с отключенным JavaScript.
Демо перенесено на наш сервер! Ура :)
Начнем!
Шаг №1 - XHTML
<div id="main-container"> <!-- Главный контейнер -->
<div id="form-container"> <!-- Контейнер формы -->
<h1>Fancy Contact Form</h1> <!-- Заголовки -->
<h2>Drop us a line and we will get back to you</h2>
<form id="contact-form" name="contact-form" method="post" action="submit.php"> <!-- The form, sent to submit.php -->
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="18%"><label for="name">Name</label></td> <!-- Text label for the input field -->
<td width="45%"><input type="text" class="validate[required,custom[onlyLetter]]" name="name" id="name" value="<?=$_SESSION['post']['name']?>" /></td>
<!-- Мы используем сессии для того, чтобы не потерять данные при редиректах -->
<td width="37%" id="errOffset"> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" class="validate[required,custom[email]]" name="email" id="email" value="<?=$_SESSION['post']['email']?>" /></td>
<td> </td>
</tr>
<tr>
<td><label for="subject">Subject</label></td>
<!-- Этот элемент select полностью заменен jqtransorm plugin -->
<td><select name="subject" id="subject">
<option value="" selected="selected"> - Choose -</option>
<option value="Question">Question</option>
<option value="Business proposal">Business proposal</option>
<option value="Advertisement">Advertising</option>
<option value="Complaint">Complaint</option>
</select> </td>
<td> </td>
</tr>
<tr>
<td valign="top"><label for="message">Message</label></td>
<td><textarea name="message" id="message" class="validate[required]" cols="35" rows="5"><?=$_SESSION['post']['message']?></textarea></td>
<td valign="top"> </td>
</tr>
<tr>
<td><label for="captcha"><?=$_SESSION['n1']?> + <?=$_SESSION['n2']?> =</label></td>
<!-- Простой пример каптчи -->
<td><input type="text" class="validate[required,custom[onlyNumber]]" name="captcha" id="captcha" /></td>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top"> </td>
<!-- Эти кнопки также заменены с помощью плагина -->
<td colspan="2"><input type="submit" name="button" id="button" value="Submit" />
<input type="reset" name="button2" id="button2" value="Reset" />
<?=$str?>
<!-- $str содержит ошибки, если форма обрабатывалась с выключенным JS -->
<img id="loading" src="img/ajax-load.gif" width="16" height="16" alt="loading" />
<!-- the rotating gif animation, hidden by default -->
</td></tr>
</table>
</form>
<?=$success?>
<!-- Переменная $success содержит сообщение об успехе, если форма успешно обработалась с выключенным JS -->
</div>
</div> <!-- Закрываем контейнеры-->
Как Вы видите на строке №8, мы передаем все данные формы в файл submit.php. Данный файл будет использоваться для обработки данных в обоих случаях (с включенным JS и нет).
Далее ВЫ можете увидеть, что используется массив $_SESSION для вывода данных, введенных в форму. Это сделано для того, чтобы не потерять данные во время редиректов со страницы на страницу.
Очень важный момент связан с классами полей ввода - classs=”validate[required,custom
]”. Эти классы используется плагином по проверке данных для определения правил проверки для каждого поля. В примере выше, мы указываем, что оно обязательное и разрешены только буквы.
Наша форма будет выглядеть вот так:
Шаг №2 - jQuery
demo.php
[HTML]<link rel="stylesheet" type="text/css" href="jqtransformplugin/jqtransform.css" />
<link rel="stylesheet" type="text/css" href="formValidator/validationEngine.jquery.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<?=$css?> <!-- Специальное CSS правило, созданное с помощью PHP -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js"></script>
<script type="text/javascript" src="formValidator/jquery.validationEngine.js"></script>
<script type="text/javascript" src="script.js"></script>
Выше представлен код, который находится в шапке файла demo.php. Подключаем все плагины и таблицу стилей. Строка №5 возможно будет Вам интересна - это специальный набор CSS правил, которые мы создадим с помощью PHP для показа подтверждающего сообщения. Об этом подробнее немного позже.
script.js
$(document).ready(function(){
/* После загрузки страницы */
$('#contact-form').jqTransform();
/* Видоизменить форму с помощью плагина jqtransform */
$("button").click(function(){
$(".formError").hide();
/* Спрятать все тултипы с ошибками */
});
var use_ajax=true;
$.validationEngine.settings={};
/* Инициализировать настройки для плагина formValidation */
$("#contact-form").validationEngine({ /* Создать проверку введенных данных */
inlineValidation: false,
promptPosition: "centerRight",
success : function(){use_ajax=true}, /* если все OK включить AJAX */
failure : function(){use_ajax=false} /* если есть ошибка, выключить AJAX */
})
$("#contact-form").submit(function(e){
if(!$('#subject').val().length)
{
$.validationEngine.buildPrompt(".jqTransformSelectWrapper","* This field is required","error")
return false;
}
if(use_ajax)
{
$('#loading').css('visibility','visible');
/* Показать вращающийся gif */
$.post('submit.php',$(this).serialize()+'&ajax=1',
/* используя метод post jQuery отправить данные */
function(data){
if(parseInt(data)==-1)
$.validationEngine.buildPrompt("#captcha","* Wrong verification number!","error");
/* если есть ошибка, создать сообщение об ошибке в captcha */
else
{
$("#contact-form").hide('slow').after('<h1>Thank you!</h1>');
/* показать сообщение подтверждения */
}
$('#loading').css('visibility','hidden');
/* Спрятать вращающийся gif */
});
}
e.preventDefault();
})
});
Весь скрипт исполняется только внутри метода $(document).ready, что гарантирует выполнение кода только после окончательной загрузки.
Ниже представлены изображения, которые показывают, как форма обрабатывается при включенном и выключенном Javascript.
Шаг №3 - CSS
demo.css
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* reset some of the page elements */
margin:0px;
padding:0px;
}
body{
color:#555555;
font-size:13px;
background: url(img/dark_wood_texture.jpg) #282828;
font-family:Arial, Helvetica, sans-serif;
}
.clear{
clear:both;
}
#main-container{
width:400px;
margin:30px auto;
}
#form-container{
background-color:#f5f5f5;
padding:15px;
/* rounded corners */
-moz-border-radius:12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius:12px;
}
td{
/* prevent multiline text */
white-space:nowrap;
}
a, a:visited {
color:#00BBFF;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
h1{
color:#777777;
font-size:22px;
font-weight:normal;
text-transform:uppercase;
margin-bottom:5px;
}
h2{
font-weight:normal;
font-size:10px;
text-transform:uppercase;
color:#aaaaaa;
margin-bottom:15px;
border-bottom:1px solid #eeeeee;
margin-bottom:15px;
padding-bottom:10px;
}
label{
text-transform:uppercase;
font-size:10px;
font-family:Tahoma,Arial,Sans-serif;
}
textarea{
color:#404040;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
td > button{
/* Специальный селектор CSS для не-IE6 брайзеров */
text-indent:8px;
}
.error{
/* этот класс используется, если JS выключен */
background-color:#AB0000;
color:white;
font-size:10px;
font-weight:bold;
margin-top:10px;
padding:10px;
text-transform:uppercase;
width:300px;
}
#loading{
/* loading (загрузка) gif спрятан при загрузке */
position:relative;
bottom:9px;
visibility:hidden;
}
.tutorial-info{
color:white;
text-align:center;
padding:10px;
margin-top:10px;
}
Тут ничего особенного.
Шаг №4 - PHP
продолжение demo.php
session_name("fancyform");
session_start();
$_SESSION['n1'] = rand(1,20); /* сгенерировать первую цифру */
$_SESSION['n2'] = rand(1,20); /* потом вторую */
$_SESSION['expect'] = $_SESSION['n1']+$_SESSION['n2']; /* результат сложения */
/* Код ниже используется, если JS выключен */
$str='';
if($_SESSION['errStr']) /* если submit.php выдает строку с ошибкой в массиве session */
{
$str='<div class="error">'.$_SESSION['errStr'].'</div>';
unset($_SESSION['errStr']); /* будет показан только 1 раз */
}
$success='';
if($_SESSION['sent'])
{
$success='<h1>Thank you!</h1>'; /* Сообщение об успехе */
$css='<style type="text/css">#contact-form{display:none;}</style>';
/* специальное правило CSS, которое прячет форму */
unset($_SESSION['sent']);
}
Как Вы видите, мы используем массив $_SESSION для хранения 2-х случайных цифр и результата их сложения. Это будет далее использоваться в файле submit.php для captcha.
submit.php
<?php
/* начало конфига */
$emailAddress = 'СЮДА ВПИСЫВАЕМ ВАШ ЕМЕЙЛ';
/* конец */
require "phpmailer/class.phpmailer.php";
session_name("fancyform"); /* начинаем сессию */
session_start();
foreach($_POST as $k=>$v)
{
/* если magic_quotes включены, очистить массив post */
if(ini_get('magic_quotes_gpc'))
$_POST[$k]=stripslashes($_POST[$k]);
$_POST[$k]=htmlspecialchars(strip_tags($_POST[$k]));
/* удалить special chars */
}
$err = array();
/* некоторые проверки на ошибки */
if(!checkLen('name'))
$err[]='The name field is too short or empty!';
if(!checkLen('email'))
$err[]='The email field is too short or empty!';
else if(!checkEmail($_POST['email']))
$err[]='Your email is not valid!';
if(!checkLen('subject'))
$err[]='You have not selected a subject!';
if(!checkLen('message'))
$err[]='The message field is too short or empty!';
/* Сравнить полученный результат captcha с результатом в массиве session */
if((int)$_POST['captcha'] != $_SESSION['expect'])
$err[]='The captcha code is wrong!';
/* Если ошибки есть */
if(count($err))
{
/* Если форма обработана с помощью AJAX */
if($_POST['ajax'])
{
echo '-1';
}
/* в противном случае заполнить массив SESSION и редирект обратно на форму */
else if($_SERVER['HTTP_REFERER'])
{
$_SESSION['errStr'] = implode('<br />',$err);
$_SESSION['post']=$_POST;
header('Location: '.$_SERVER['HTTP_REFERER']);
}
exit;
}
/* тело письма */
$msg=
'Name: '.$_POST['name'].'<br />
Email: '.$_POST['email'].'<br />
IP: '.$_SERVER['REMOTE_ADDR'].'<br /><br />
Message:<br /><br />
'.nl2br($_POST['message']).'
';
$mail = new PHPMailer(); /* используя PHPMailer */
$mail->IsMail();
$mail->AddReplyTo($_POST['email'], $_POST['name']);
$mail->AddAddress($emailAddress);
$mail->SetFrom($_POST['email'], $_POST['name']);
$mail->Subject = "A new ".mb_strtolower($_POST['subject'])." from ".$_POST['name']." | contact form feedback";
$mail->MsgHTML($msg);
$mail->Send();
unset($_SESSION['post']);
/* Форма удачно была отправлена */
if($_POST['ajax'])
{
echo '1';
}
else
{
$_SESSION['sent']=1;
if($_SERVER['HTTP_REFERER'])
header('Location: '.$_SERVER['HTTP_REFERER']);
exit;
}
/* дополнительные функции */
function checkLen($str,$len=2)
{
return isset($_POST[$str]) && mb_strlen(strip_tags($_POST[$str]),"utf-8") > $len;
}
function checkEmail($str)
{
return preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $str);
}
?>
Обратите внимание на красный текст в коде. Без правильного адреса форма будет отправлять письма "в далекие глубины всемирной паутины :)"
Вот наша форма и готова. Получилась очень солидная, красивая и многофункциональная форма.
Спасибо за Ваше внимание.
P.S. Комментарии в коде переведены :)