Форма обратной связи ajax
Сегодня я покажу, как сделать форму обратной связи, с отправкой данных через 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:
Всё готово. Форма должна работать.
Статьи на тему:
Комментарии:
2022.01.17
Александр
почему-то работает только если авторизоваться в битрикс
2022.10.29
ekykegyvo
<a href="
https://seodebug.ru/">продвижение сайта</a> Сегодня весь рынок – это веб, народ ищут там все, что им необходимо, любой товар или инфу. И согласно статистике, чаще всего, люди делают это через поисковики Яндекс и Google.
2022.12.03
erufibuk
В 2022-ом году весь рынок – это сайты, <a href="
https://seodebug.ru/">seodebug.ru</a> люди отыскивают там все, что им необходимо, любой продукт либо инфу. И согласно статистике, чаще всего, люди делают это через популярные поисковые системы Яндекс или Гугл.
2022.12.03
ysobaqob
Продвижение сайтов <a href="
https://megaceo.ru/">
https://megaceo.ru</a> Яндекс и Гугл
2022.12.05
ybywaxij
Девон-рекс – короткошерстная <a href="
https://xn----ctbfec4ashum.xn--p1ai/">здесь</a> разновидность котов, пришедшая к нам из Британии.
2022.12.08
enahabody
Продвижение сайтов <a href="
https://chastnyj-vebmaster.ru/">
https://chastnyj-vebmaster.ru/</a> Яндекс и Гугл
2022.12.11
ugivif
В любом жилье есть столь работы, <a href="
https://helpmens.ru/s/uslugi-jelektrika/">
https://helpmens.ru/</a> которая происходит "незаметно", если есть на подхвате умелые сильные руки. Наша фирма поможет вам с маленьким бытовым ремонтом.
2022.12.11
umyrab
В нашей компании <a href="
https://mosksm.ru/">тут</a> можно купить моторное масло в бочках оптом от изготовителей Castrol, Mobil, Shell, Роснефть, Лукойл и других. Наша компания уже порядочно лет с успехом занимается реализацией масел по вразумительным и аргументированным ценам.
2022.12.11
ysytewe
Мы <a href="
https://bik-oil.ru/">
https://bik-oil.ru/</a> занимаемся покупкой и перевозкой отработанных масел в Москве.В процессе применения в автомобильное масло оказываются примеси, делающие его токсичным для человека и окружающей среды. Выливать ГСМ в канализацию или на почву не разрешается, это штрафуется.
2022.12.11
arybo
Скачать AMXX Плагины для Сервера CS 1.6 <a href="
https://fungun.net/">
https://fungun.net/</a> оригинальную русскую версию и 113 сборок бесплатно
2022.12.11
ekyfyvy
Продвижение сайтов <a href="
https://chastnyj-vebmaster.ru/">
https://chastnyj-vebmaster.ru/</a> Яндекс и Гугл
2022.12.15
ozytagy
На нашем сайте <a href="
https://profakademia.ru/neftegazovoe-delo/">здесь</a> есть запись на профессиональную переподготовка. Дистанционное обучение имеет много преимуществ. В частности поэтому настоящий формат беспредельно популярен в концепции дополнительного профессионального образования
2022.12.15
urokowero
На нашем сайте <a href="
https://profakademia.ru/stroitelstvo/">
https://profakademia.ru/</a> есть запись на профессиональную переподготовка. Дистанционное обучение имеет множество бонусов. В частности поэтому сей формат безумно востребован в системе дополнительного профессионального образования
2022.12.16
ytamikyx
В этой подборке <a href="
https://kinogo.re/">киного</a> вы найдете именно такие киноленты – "каждый можно просматривать снова и снова, упиваясь каждой картиной или поворотом киносюжета".Превосходное киноискусство выходит из прекрасного сценария, изящной операторской работы, профессионального режиссёра и изящного состава актёров
2022.12.17
epeheryh
Подряды по обустройству автономной очистной системы позволяется утвердить <a href="
https://spb.septikcity.ru/">
https://spb.septikcity.ru/</a> септик СПБ.Установка септика – это лёгкий способ решения проблемки сбора стоков и их обработки в личных таунхаусах.
2022.12.17
ykavolefu
Веб-сайт <a href="
https://xn----7sbefefeb8cgfoa1a3qpb.xn--p1ai/">мебель недорого</a> предлагает великое множество вариантов мебели. Закупка мебели является достаточно хорошим шагом и относительно долговременным вложением. Дилемма в таком случае должен быть филигранно продуман.
2022.12.23
acorohu
Я сформировала резюме на «<a href="
https://kz.habooz.com/job/nur-sultan">срочно работа Нур-Султан</a>», так как это самый-самый распространенный сервис для поиска работы в Казахстане.
2022.12.24
usujij
доступный метод <a href="
https://www.vindecoderz.com/">VIN code</a> успешной приобретения автомобиля на вторичном торге — проверить его историю по VIN (вин коду) или номеру кузова/
2022.12.26
ydyves
Cамая модная и наикрупнейшая в мире компания по изготовлению спорт одежды и обуви <a href="
https://nike-sc.com/">
https://nike-sc.com/</a>. Логотип полагается был защищать движение в будущем.
2022.12.27
ohefyn
Банк <a href="
https://davrbank.uz/">
https://davrbank.uz/</a> — денежно-кредитная корпорация; регулирующая платёжный оборот в наличной и безналичной форме; денежная учреждение, которая заинтересовывает денежные средства на вклады.
2022.12.28
yryvoder
Поставить счетчик воды - <a href="
https://arshinmsk.ru/">
https://arshinmsk.ru</a>. Измеритель, предназначенный для измерения и учёта объема воды, протекающего по водопроводу в месте установки счётчика.
2022.12.28
ifepu
Поставить контролер воды - <a href="
https://arshinmsk.ru/">
https://arshinmsk.ru</a>. Механизм, предназначенный для измерения и учёта размера воды, проходящего по водопроводу в месте установки счётчика.
2023.01.09
ubewev
Компания «<a href="
https://brus-grad.ru/">
https://brus-grad.ru/</a>» специализируется на строительстве загородной недвижимости в СПБ и близлежащих областях, возведении усадеб и летников комфорт под ключ и проведении сложной работы для того, чтобы легитимировать каждое ваше действие и защитить от бесполезных забот.
2023.01.09
oxygeko
В любом жилище есть столь труда, <a href="
https://helpmens.ru/s/kliningovaja-kompanija/">
https://helpmens.ru/</a> каковая изготавливается "незаметно", если есть на подхвате опытные сильные руки. Наша компания поможет вам с маленьким повседневным ремонтом.
2023.01.10
ekapidot
<a href="
https://polmsk.ru/fibrobetonnyye-poly">Устройство фибробетонных полов</a> - промышленный бетонный пол многослойная конструкция, где все слои должны быть сделаны по порядку и соответственно определенным нормам, слои недопустимо пропускать, так как все они взаимосвязаны.
2023.01.11
usesecu
В каждом жилье есть настолько занятия, <a href="
https://master-find.ru/">
https://master-find.ru/</a> каковая совершается "незаметно", если есть на подхвате умелые мужские руки. Наша компания поможет вам с небольшим домашним ремонтом. На первый взгляд кажется, пока что выбрать мастера для какой угодно комнаты дома не составит труда. По сути дела, выбор так велик, что главнейший вопрос содержится в возможностях хозяина жилища.
2023.01.13
iwyxityf
Машина — значимое капитал, которое можно пускать в ход в качестве залога при утвержденье кредита. Функционируют финансовые организации <a href="
https://zalog-orel.ru/">кредит под залог авто</a>, в которых можно получить займ под залог ПТС авто.
2023.01.14
ynyhucav
Разменивание валют <a href="
https://green-obmenka.ru/masspayment/">green-obmenka.ru</a> — это операция по наличному или безналичному обмену национальных банкнот и монет и крипты в соответствии с валютным курсом, производящаяся в специализированных пунктах правительственные банков и негосударственных денежных учреждений, в соответствии с действующим законодательством.
2023.01.18
yqojuka
<a href="
https://seodebug.ru/">интернет реклама поисковое продвижение сайта</a> Сейчас весь рынок – это веб, люди отыскивают там все, что им нужно, любой продукт либо инфу. И согласно статистике, чаще всего, люди делают это через поиск Yandex и Гугл.
2023.01.23
ebufut
<a href="
https://petzona.ru/devon-reks-vse-ob-etoy-porode-koshachih/">порода Девон-рекс</a> короткошерстная порода кошек, прибывшая к нам из Британии. Они характеризуются хорошим, бархатным нравом и не менее милой внешностью. описание породы девон-рекс говорит, что средний вес животных составляет от 2,5 кг до 4,5 кг. Кот девон-рекс обычно больше и массивнее, чем кошка.
2023.01.23
yjuqe
<a href="
https://petzona.ru/devon-reks-vse-ob-etoy-porode-koshachih/">порода Девон-рекс</a> короткошерстная разновидность кошек, приехавшая к нам из Англии. Они имеют отличным, ласковым нравом и не менее привлекательной внешностью. описание породы девон-рекс гласит, что средний вес животных составляет от 2,5 кг до 4,5 кг. Кот девон-рекс обычно крупнее и мощнее, чем кошка.
2023.01.23
ocycuve
<a href="
http://hairstyless.ru/devon-reks-opisanie-porody/">Девон рекс</a> короткошерстная порода кошек, пришедшая к нам из Британии. Они обладают приятным, ангельским нравом и не меньше приятной видом. историю породы девон-рекс сообщает, что средний вес животных составляет от 2,5 кг до 4,5 кг. Кот девон-рекс обычно крупнее и увесистее, чем кошка.
2023.01.23
yquwudyn
<a href="
http://newsrosprom.ru/koshki-porody-devon-reks-opisanie-harakter-i-povedenie.html">порода девон рекс</a> короткошерстная порода котов, пришедшая к нам из Британии. Они имеют отличным, мягким нравом и не меньше притягательной внешний видом. описание породы девон-рекс сообщает, что средний вес животных равняется от 2,5 кг до 4,5 кг. Кот девон-рекс обычно больше и увесистее, чем кошка.
2023.01.23
ubuvaki
<a href="
http://newsrosprom.ru/koshki-porody-devon-reks-opisanie-harakter-i-povedenie.html">порода девон рекс</a> короткошерстная разновидность котов, пришедшая к нам из Британии. Они характеризуются приятным, мягким норовом и не менее симпатичной экстерьером. историю породы девон-рекс гласит, что средний вес животных равняется от 2,5 кг до 4,5 кг. Кот девон-рекс обычно больше и увесистее, чем кошка.
2023.01.26
efixibov
<a href="
https://ensonews.info/chto-sleduet-znat-o-koshkax-porody-devon-reks/">порода Девон-рекс</a> короткошерстная порода кошек, прибывшая к нам из Британии. Они имеют отличным, нежным характером и не менее прекрасной внешний обликом. историю породы девон-рекс гласит, что средний вес животных равняется от 2,5 кг до 4,5 кг. Кот девон-рекс обычно крупнее и больше, чем кошка.
2023.01.27
axulazi
<a href="
https://brys-dom.ru/">Дом из бруса</a> - это жилой дом или капитальное строение другой рекомендации, построенное в основном из цельного или клееного бруса, пиломатериалов из натурального дерева различных пород.
2023.01.29
usugeda
<a href="
https://jidarfence.ru/">Жидарский забор травяной цена</a> - Этот сверхпрочный современный забор из искусственной травы и оцинкованной проволоки сочетает в себе безопасность, природу и конфиденциальность.
Оставить комментарий
x
Комментарий успешно отправлен и будет доступен после проверки модератором!