Как сделать ajax отправку веб-формы Битрикс в всплывающем окне

Создание и настройку веб-формы рассмотрим в другой раз, т.к. это уже описано в документации, перейдем сразу к делу.

Подготовка

Для вывода формы во всплывающем окне будем использовать Fancybox.

1) Подключаем jQuery

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

2) Подключаем Fancybox

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

3) Создаем папку ajax в корне структуры сайта.

4) Создаем файл form.php в папке ajax, в котором у нас будет расположена форма.

Создаем обработчик формы

<?
    require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php"); //Подключаем служебную часть пролога битрикса
?>
    <div class="popup-form">
<?
   //Подключаем компонент для вывода нашей веб-формы
   $APPLICATION->IncludeComponent(
	"bitrix:form.result.new",
	"",
	Array(
		"CACHE_TIME" => "3600",
		"CACHE_TYPE" => "A",
		"CHAIN_ITEM_LINK" => "",
		"CHAIN_ITEM_TEXT" => "",
		"COMPONENT_TEMPLATE" => ".default",
		"EDIT_URL" => "",
		"IGNORE_CUSTOM_TEMPLATE" => "N",
		"LIST_URL" => "",
		"SEF_MODE" => "N",
		"SUCCESS_URL" => "",
		"USE_EXTENDED_ERRORS" => "N",
		"VARIABLE_ALIASES" => Array("RESULT_ID"=>"RESULT_ID","WEB_FORM_ID"=>"WEB_FORM_ID"),
		"WEB_FORM_ID" => "1" // ID нашей веб-формы
	)
    );
?>
</div>

Отправка веб-формы по ajax

Добавим ссылку, на которую мы повесим обработчик события для вывода формы во всплывающем окне:

 <a href="#" class="pushme">Показать форму</a>

Сам обработчик вывода, отправки формы:

<script>
  $(function(){
     $('.pushme').click(function(e){
        getForm(); //выводим форму
        e.preventDefault();
     });
       $('body').on('submit','.popup-form form',function(e){
		e.preventDefault(); //отключаем стандартный обработчик события отправки формы
		var dataForm = $(this).serialize()+'web_form_submit=Y'; //сериализация полей формы в строку + добавляем параметр web_form_submit (данные переданы из веб-формы)
		$.fancybox.showLoading(); //отображаем загрузчик Fancybox
		getForm(name,dataForm); // отправляем форму		
	});
  });
     //функция отправки и отображения формы
     function getForm(name,data){		
		$.ajax({
		  url: '/ajax/form.php',
		  type: 'POST',
		  data: data,
		  success: function(data){
			$.fancybox({content:data,helpers:{overlay:{locked: false}}});
			$.fancybox.hideLoading();
		  }
		});
	}
</script>

Собственно при клике на ссылку происходит вызов функции getForm, которая отправляет ajax запрос к файлу form.php, где у нас подключен вызов компонента с нашей веб-формой. В результате выводится форма фенсибоксе.

При отправке формы у нас срабатывает обработчик события submit, в котором функция getForm отправляет ajax запрос с данными к файлу form.php, и выводится форма с результатом отправки.