Сегодня я покажу, как сделать форму обратной связи, с отправкой данных через ajax, использованием стандартных модальных окон битрикса, проверкой captcha и прочими фишками.
Форма будет выводиться через механизм включаемых областей. Для этого разместим на любой странице вот такой код (я это сделал на странице контакты):
<?
$APPLICATION->IncludeFile(
SITE_DIR."include/feedback_form.php",
Array(),
Array("MODE"=>"html")
);
?>
Затем, в папку /include поместим файлы feedback_form.php и send.php со следующим содержимым:
feedback_form.php
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<?
$code = $APPLICATION->CaptchaGetCode();
?>
<form action="" method="post" class="feedback_form">
<div class="item">
<label>Имя:</label><input type="text" name="name" value="" required />
</div>
<div class="item">
<label>E-mail:</label><input type="text" name="email" value="" required />
</div>
<div class="item">
<label>Текст сообщения:</label><textarea name="message" required></textarea>
</div>
<div class="item">
<label>Введите символы с картинки:</label>
<img src="/bitrix/tools/captcha.php?captcha_sid=<?=$code;?>" alt="CAPTCHA" width="120" class="captcha_img" />
<br />
<a href="#" rel="nofollow" class="update">обновить картинку</a> <br /> <br />
<input type="hidden" name="captcha_sid" value="<?=$code;?>" />
<input type="text" name="captcha_word" value="" required/>
</div><!-- captcha-holder -->
<input type="submit" value="Отправить" />
</form>
<div class="schema"></div>
<?
CJSCore::Init(array("jquery", "popup"));
?>
<script>
$(document).ready(function() {
$('.update').on('click', function(){
$.ajax({
url: '/include/send.php',
type: 'post',
data: 'get=captcha',
success: function(data){
$('.feedback_form .captcha_img').attr('src', '/bitrix/tools/captcha.php?captcha_sid=' + data);
$('.feedback_form input[name="captcha_sid"]').val(data);
}
});
return false;
});
$('.feedback_form').on('submit', function(){
var name = $('input[name="name"]').val();
var email = $('input[name="email"]').val();
var message = $('textarea[name="message"]').val();
var captcha_word = $('input[name="captcha_word"]').val();
var captcha_sid = $('input[name="captcha_sid"]').val();
$.ajax({
url: '/include/send.php',
type: 'post',
data: 'get=send&name='+name+'&email='+email+'&message='+message+'&captcha_word='+captcha_word+'&captcha_sid='+captcha_sid,
success: function(data){
var popup = new BX.CDialog({
'title': 'Отправка формы',
'content': data,
'draggable': true,
'resizable': false,
'width':250,
'height':200,
'buttons': [BX.CDialog.btnClose]
});
popup.Show();
}
});
return false;
});
});
</script>
send.php
<?
require_once($_SERVER['DOCUMENT_ROOT']. "/bitrix/modules/main/include/prolog_before.php");
if($_REQUEST['get'] == 'captcha')
{
echo $code = $APPLICATION->CaptchaGetCode();
}
if($_REQUEST['get'] == 'send')
{
$error = ''; if(!$APPLICATION->CaptchaCheckCode($_REQUEST['captcha_word'], $_REQUEST['captcha_sid']))
$error .="Рисунок с картинки введен неверно<br />";
if($_REQUEST['name']=='')
$error .="Заполните поле \"имя\"<br />"; if($_REQUEST['email']=='')
$error .="Заполните поле \"email\"<br />";
if($_REQUEST['message']=='')
$error .="Заполните текст сообщения<br />";
if($error)
echo "<span style='color:#ff0000;'>".$error."</span>";
else
{
$arEventFields = array(
"NAME" => $_REQUEST['name'],
"EMAIL" => $_REQUEST['email'],
"MESSAGE" => $_REQUEST['message'],
);
if(CEvent::Send("FEEDBACK_SEND", array(SITE_ID), $arEventFields))
echo "<span style='color:#0fcf00;'>Сообщение успешно отправлено!</span>";
else
echo "<span style='color:#ff0000;'>Ошибка почтового сервера!</span>";
}
}
?>
В файле feedback.php при успешном получении данных через ajax появляется стандартное модальное окно:
var popup = new BX.CDialog({
'title': 'Отправка формы',
'content': data,
'draggable': true,
'resizable': false,
'width':250,
'height':200,
'buttons': [BX.CDialog.btnClose]
});
popup.Show();
в котором пишется результат отправки формы, или же ошибка.
Для того, чтобы это сработало, выше в коде мы инициализируем jquery и библиотеку для работы с модальными окнами:
CJSCore::Init(array("jquery", "popup"));
Также здесь присутствует обработчик клика по ссылке «обновить картинку» - если подгрузилась нечитаемая картинка капчи.
$('.update').on('click', function(){
$.ajax({
url: '/include/send.php',
type: 'post',
data: 'get=captcha',
success: function(data){
$('.feedback_form .captcha_img').attr('src', '/bitrix/tools/captcha.php?captcha_sid=' + data);
$('.feedback_form input[name="captcha_sid"]').val(data);
}
});
В случае, если все поля заполнены правильно, данные ajax’ом передаются в send.php, и затем вызывается событие FEEDBACK_SEND.
Добавим украшательства – зайдем в папку шаблона (/bitrix/templates/имя_шиблона/) файл template_styles.css, в конец добавим код:
.feedback_form{
display:block;
width:400px;
border:solid 1px #ccc;
border-radius:5px;
padding:10px;
}
.feedback_form .item{
margin-bottom:10px;
width:100%;
float:left;
}
.feedback_form .item label{
display:block;
width:150px;
float:left;
}
.feedback_form .item input[type='text'], .feedback_form .item textarea{
width:200px;
float:right;
}
.feedback_form .item textarea{
height:200px;
}
Создание почтового события
Теперь создадим почтовое событие и шаблон для него. Для этого в админке битрикса перейдем в настройки – почтовые шаблоны – типы почтовых событий, и нажмем добавить тип:
Cозадим тип почтового события FEEDBACK_SEND.
Далее переходим в почтовые шаблоны, и создаем новый почтовый шаблон для события битрикса FEEDBACK_SEND:
Всё готово. Форма должна работать.