Форма обратной связи 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();

в котором пишется результат отправки формы, или же ошибка.

1.jpg

Для того, чтобы это сработало, выше в коде мы инициализируем 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:


150617_3.jpg
Всё готово. Форма должна работать.


Статьи на тему:

Комментарии:

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
Комментарий успешно отправлен и будет доступен после проверки модератором!