UniSite CMS - Современный движок для Ваших сайтов.

ZHUR ARTUR.ru

Персональный блог по созданию
мощных и современных Web-Проектов!

Нет судьбы кроме той, которую мы творим сами. © Жизнь

»

Введите код полученный после подписки

  • 12

  • 2

Форма обратной связи с помощью PHP и Ajax

Автор - Жур Артур | Добавлено - 2014-02-15 | Просмотров - 18775 | Скачено - 596

В этом уроке мы с Вами реализуем форму обратной связи (feedback) с отправкой письма без перезагрузки страницы с помощью Ajax и JQuery. Также реализуем проверку полей формы с помощью jquery.validate.

1Подключение плагинов

Первым делом нужно подключить плагин JQuery, скачать его можно тут. Разместите его на ваш сайт и подключите к страницам перед закрывающим тегом </head> . Без этого плагина JQuery код работать не будет!

Подключение плагина


Теперь нужно подключить плагин валидации, для проверки полей.

    
    

2Форма


// В этот параграф будут помещаться сообщения обработчика.

// Форма . Указываем в action обработчик.
  • + =

3CSS стили

#feedback-form li{
margin-top: 30px; 
}
#feedback-form > li >  input{
  border-radius:10px ; 
 -webkit-border-radius:10px ; 
 -moz-border-radius:10px ;
 width: 300px;
 height: 23px;  
 border: 1px solid #D3D7DC;
 padding-left: 10px;
 padding-right: 10px;
 color:  black;
 font: 15px sans-serif; 
}
#feedback-form > li >  input:focus{
 border: 1px solid #C5E5FF;
}
#feedback-form > li >  textarea{
  border-radius:10px ; 
 -webkit-border-radius:10px ; 
 -moz-border-radius:10px ;
 width: 300px;
 height: 100px;  
 border: 1px solid #D3D7DC;
 padding-left: 10px;
 padding-right: 10px;
 color:  black; 
 font: 15px sans-serif; 
}
#feedback-form > li >  textarea:focus{
 border: 1px solid #C5E5FF;
}
#feedback-form > li > label{
position: absolute;
margin-top: -20px;
font: 14px sans-serif;
}
#block-key p{
    float: left;
    margin: 5px 0;
    font: 15px sans-serif;
    margin-right: 10px;
}
#block-key input{
  border-radius:10px ; 
 -webkit-border-radius:10px ; 
 -moz-border-radius:10px ;
 width: 100px;
 height: 23px;  
 border: 1px solid #D3D7DC;
 padding-left: 10px;
 padding-right: 10px;
 color:  black; 
 font: 15px sans-serif;
}
#block-key input:focus{
 border: 1px solid #C5E5FF;
}
.error{
    color: #FF7F7F;
    font: 11px sans-serif;
    display: block;
    margin-top: 4px;
}
.message-feedback{
    display: none;
}
#message-feedback-error{
    font: 13px sans-serif;
    color: red;
    background-color: #FFECEC;
    border: 1px solid #FFDFDF;
    padding-left: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
}
#message-feedback-good{
    font: 13px sans-serif;
    color: black;
    background-color: #E4E9F2;
    border: 1px solid #D7DBE4;
    padding-left: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
}
#submit-send{
  width: 100%; 
  height: 30px; 
  margin-top: 20px;
  cursor: pointer;
  border: none;
  background-color: #E4EAF0;
}
#submit-send:hover{
  background-color: #DEE4EA;
}

4Код проверки


session_start(); // Включение сессии

$key1 = rand(1,100); // Случайная генерация числа от 1 до 100
$key2 = rand(5,35);  // Случайная генерация числа от 5 до 35

// Прибавляем два числа и сохраняем в сессию код проверки. 
$_SESSION['result_key'] = $key1 + $key2;

5Обработчик sendmail.php

В данном обработчике происходит проверка полей и отправка email.


// Проверяем как обратились к данному обработчику.
 if($_SERVER["REQUEST_METHOD"] == "POST")
{
 // Функция отправки email
 function send_mail($from,$to,$subject,$body)
{
	$charset = 'utf-8';
	mb_language("ru");
	$headers  = "MIME-Version: 1.0 \n" ;
	$headers .= "From: <".$from."> \n";
	$headers .= "Reply-To: <".$from."> \n";
	$headers .= "Content-Type: text/html; charset=$charset \n";
	
	$subject = '=?'.$charset.'?B?'.base64_encode($subject).'?=';

	mail($to,$subject,$body,$headers);
} 


session_start();    

 // Принимаем значения полей которые нам отправил Ajax
    
$name = $_POST["feedback_name"];
$email = $_POST["feedback_email"];
$subject = $_POST["feedback_subject"];
$txt = $_POST["feedback_txt"];
$key = $_POST["feedback_key"];

 // Создаём массив для ошибок.
$error = array();

 // Проверка переменных с данными от отправителя.
if (strlen($name) == 0){ $error[] = "Укажите своё имя!"; }
if (!preg_match("/^(?:[a-z0-9]+(?:[-_.]?[a-z0-9]+)?@[a-z0-9_.-]+(?:\.?[a-z0-9]+)?\.[a-z]{2,5})$/i",trim($email))){ $error[] = "Укажите корректный email!"; }
if (strlen($subject) == 0){ $error[] = "Укажите тему сообщения!"; }
if (strlen($txt) == 0){ $error[] = "Напишите сообщение!"; }
if ($key != $_SESSION['result_key']){ $error[] = "Не верный код проверки!"; }


 // Если есть ошибки, то выводим их.
if (count($error))
{
    echo implode('
',$error); // Переводим массив в строку. }else { // Если ошибок нет, то удаляем сессию с кодом проверки. unset($_SESSION['result_key']); // Отправка email send_mail( $email, '', // Email куда будут приходить письма от пользователей. $subject, // Тема письма 'От - '.$name.'

'.$txt); // Письмо echo 'true'; // Ответ Ajax'у } }

6Валидация формы


     

Интересное

Комментарии