Форма обратной связи 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
Всё готово. Форма должна работать.


Статьи на тему: Оставить комментарий
x
Комментарий успешно отправлен и будет доступен после проверки модератором!