Как известно, контактная форма является прямой линией связи между администратором и пользователем. Но на некоторых сайтах контактная форма используется в виде оставленным администратором почтовым адресом. Это утруждает пользователей, в связи с множеством действий которые необходимо сделать чтобы оставить свои пожелания или жалобы. Поэтому, в сегодняшнем уроке мы рассмотрим процесс создания замечательной контактной формы с помощью  php, css и jquery.  Кроме этого будут использованы плагины..

..formValidator для проверки введенных данных и плагин для оформления полей и кнопок формы. Вдобавок ко всему этому будет использован класс PHPMailer для отправки сообщений. Ниже представлен код, который находится в шапке файла index.php. Подключаем все плагины и таблицу стилей:


<!--?=$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>

Выше можно заметить интересный стиль ?=$css? - это специальный набор 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('</pre>
<h1>Thank you!</h1>
<pre>
');
 /* показать сообщение подтверждения */
 }
 $('#loading').css('visibility','hidden');
 /* Спрятать вращающийся gif */
 });
 }
e.preventDefault();
 })
});

Весь скрипт исполняется только внутри метода $(document).ready, что гарантирует выполнение кода только после окончательной загрузки.

Теперь представим изображение, которые показывает, как форма обрабатывается при выключенном Javascript.

Теперь рассмотрим стили 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;
 }

продолжение 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='</pre>
<div>'.$_SESSION['errStr'].'</div>
<pre>
';
 unset($_SESSION['errStr']); /* будет показан только 1 раз */
 }
$success='';
 if($_SESSION['sent'])
 {
 $success='</pre>
<h1>Thank you!</h1>
<pre>
'; /* Сообщение об успехе */
$css='';
 /* специальное правило CSS, которое прячет форму */
 unset($_SESSION['sent']);
 }

Как Вы видите, мы используем массив $_SESSION для хранения 2-х случайных цифр и результата их сложения. Это будет далее использоваться в файле submit.php для captcha.

submit.php

<!--?php <br ?-->
/* начало конфига */

$emailAddress = '<span style="background-color: #99cc00;">СЮДА ВПИСЫВАЕМ ВАШ ЕМЕЙЛ</span>';

/* конец */

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('
',$err);
 $_SESSION['post']=$_POST;
 header('Location: '.$_SERVER['HTTP_REFERER']);
 }
 exit;
 }
/* тело письма */
 $msg=
 'Name: '.$_POST['name'].'

 Email: '.$_POST['email'].'

 IP: '.$_SERVER['REMOTE_ADDR'].'

Message:

'.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);
 }
?>

Вот и все, контактная форма достаточно красиво будет дополнять сайт. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: