форма в модальном окне в битрикс

Как сделать AJAX формы 1с-Битрикс в всплывающих окнах

Эта статья посвящена одному из способов сделать в 1с-Битрикс форму в всплывающем окне. Достоинства метода:
— можно использовать любые формы 1с-Битрикс, которые выводятся компонентом. Например, добавление элемента инфоблока или веб-форма.
— всплывающее окно создается «на лету» при помощи javascript и изменяет свой размер в зависимости от количества контента внутри.
— весь процесс работы формы, вывода ошибок и результата происходит при помощи AJAX без перезагрузки окна.

Готовим javascript

Для создания всплывающих окон воспользуемся плагином jquery.fancybox. Подключаем его в шаблоне сайта или непосредственно на странице, где будет ссылка для вызова окна, предварительно скопировав содержимое архива на сайт (в примере это /js/fancybox/).

Готовим форму

Итак, скрипт вызова формы будет находиться в файле /ajax_popup.php — он упоминался в javascript-коде выше. Создаем этот файл как обычную страницу в 1с-Битрикс, кладем и настраиваем. на ней нужный компонент, при необходимости изменения внешнего вида копируем шаблон. В процессе настройки не забудьте поставить галочку на «Включить режим AJAX». Если ее нет, не отчаивайтесь, пропишем руками позже. Далее, открываем страницу на редактирование в режиме php и находим код вызова компонента. Сделать это просто, он всегда начинается с текста ‘ IncludeComponent(‘ и заканчивается первой попавшейся ‘);?>’.

Все что выше этого куска кода заменяем на

Prolog_before.php подключит необходимые системе файлы без вывода шапки шаблона сайта, она в всплывающем окне не нужна. Скрипт ajax.js нужен для работы компонентов в режиме ajax.

Все что ниже подключения компонента заменяем на

Epilog_after.php подключит необходимые системе файлы без вывода подвала шаблона сайта.

Все, можно кликать на ссылку (которая на странице с javascript’ом и имеет класс «popup») и любоваться результатом:)

Если нет настройки «Включить режим AJAX»

Для тестового примера с iblock.element.form.add.form код с добавленными параметрами будет выглядеть так:

Указанным способом можно показывать не только формы, но и любой другой статический и динамический контент.

Источник

Всплывающее окно с формой обратной связи Битрикс

Давайте сделаем всплывающее окно с формой обратной связи. Вообще можно сделать всплывающее окно с любым компонентом системы управления, просто выбрал обратную связь как наиболее простой пример. Всплывающее окно будем делать без скриптов- на чистом CSS3. Вы сможете применить этот способ, например для авторизации или регистрации пользователя, быстрый просмотр товара и т.д.

Создание формы обратной связи

Далее переходим в режим «Редактирование исходного кода» и обворачиваем вывод компонента в div контейнер как в примере (можете просто скопировать отсюда к себе на страницу):

Добавляем в style.css шаблона вот такие стили:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

И переносим нашу форму в footer.php шаблона сайта, в самый низ до закрытия тега body:

Небольшая фенька.

Можно принудительно «нажимать» на ссылку вызывающую окно через определенный промежуток времени. Для этого достаточно добавить в шаблон сайта вот такой скрипт:

Источник

Ajax форма обратной связи на bitrix

Всем привет. В данном посту мы рассмотрим простой пример создания формы обратной связи, форму обратного звонка на сайте. Реализовать форму вы сможете у себя на сайте, это может быть отдельная страница, либо модальное окно, которое будет доступно при клике на определённые кнопки. Заявки, отправляемые с формы, будут записываться в информационных блок, так же администрации сайта будут отправляться почтовые уведомления о новых заявках.

Теперь давайте приступим непосредственно к примеру. Первым делом, что требуется нам сделать, это подготовить информационный блок, в который будут записываться данные, а также, создать почтовое событие + шаблон для отправки письма уведомления на почту.

Добавление инфоблока для записи заявок

Создаем информационный блок «Заявки», и добавляем свойства для информационного блока. В моём примере путь к созданию нового инфоблока следующий:
Контент > Инфоблоки > Типы инфоблоков > Каталог > Добавить инфоблок

Назначение полей свойств говорит само за себя, мы будет записывать ID элемента, с которого отправляется форма, имя пользователя, телефон, почтовый адрес, а также записывать URL страницы, с которой были отправлены данные.

Добавление почтового события и шаблона

Далее создаём почтовое событие, которое будет вызываться при успешной отправке данных с формы на сервер.
Добавить новое почтовое событие можно по пути:

Настройки > Настройки продукта > Почтовые события > Типы почтовых событий > Добавить тип

Тип почтового события я указал как NEW_USER_RESPONSE, в самом деле вы можете назвать его по-своему, это не так принципиально. Далее создаем почтовый шаблон, который будет использован для отправки писем на почту администрации сайта.
Путь к созданию нового почтового шаблона такой:

Настройки > Настройки продукта > Почтовые события > Почтовые шаблоны > Добавить шаблон

Выбираем в качестве почтового события запись с кодом NEW_USER_RESPONSE, далее, как показано на скриншоте:

После того как сохранили почтовый шаблон, можно приступать непосредственно к самой форме отправки. Сайт, который использовался в примере свёрстан с использованием bootstrap 4, этого не говорит о том, что вам необходимо его так же использовать. Вы можете реализовать эту форму самостоятельно, без использование сторонних фреймворков для верстки. В моём же примере используется модальные окна, которые хорошо описаны в документации по bootstrap 4.
Сам код формы я поместил в основной файл шаблона header.php, так как модальное окно с формой должно быть доступно по всему сайту.

Кнопка вызова модального окна так же располагается на странице, выглядит она таким образом:

Итак, действие с открыванием и закрыванием модального окна выполняется самим фреймворком bootstrap, и большого интереса для нашего поста это не представляет. Для нас интересна сама отправка данных с формы. Начинать проверку полей и отправку мы будем при нажатии на кнопке «отправить».
Код написан на js + jquery, выполняет валидацию заполнения полей, а также отправку данных на сервер:

В корне сайта создаем ajax.customer-response.php который будет выполнять код на стороне сервера, при ajax-запросе.

Источник

Форма обратной связи ajax

Сегодня я покажу, как сделать форму обратной связи, с отправкой данных через ajax, использованием стандартных модальных окон битрикса, проверкой captcha и прочими фишками.

Форма будет выводиться через механизм включаемых областей. Для этого разместим на любой странице вот такой код (я это сделал на странице контакты):

Затем, в папку /include поместим файлы feedback_form.php и send.php со следующим содержимым:

В файле feedback.php при успешном получении данных через ajax появляется стандартное модальное окно:

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

Для того, чтобы это сработало, выше в коде мы инициализируем jquery и библиотеку для работы с модальными окнами:

В случае, если все поля заполнены правильно, данные ajax’ом передаются в send.php, и затем вызывается событие FEEDBACK_SEND.

Добавим украшательства – зайдем в папку шаблона (/bitrix/templates/имя_шиблона/) файл template_styles.css, в конец добавим код:

Создание почтового события

Теперь создадим почтовое событие и шаблон для него. Для этого в админке битрикса перейдем в настройки – почтовые шаблоны – типы почтовых событий, и нажмем добавить тип:

Cозадим тип почтового события FEEDBACK_SEND.

Далее переходим в почтовые шаблоны, и создаем новый почтовый шаблон для события битрикса FEEDBACK_SEND:

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

Источник

Форма обратной связи ajax

Сегодня я покажу, как сделать форму обратной связи, с отправкой данных через ajax, использованием стандартных модальных окон битрикса, проверкой captcha и прочими фишками.

Форма будет выводиться через механизм включаемых областей. Для этого разместим на любой странице вот такой код (я это сделал на странице контакты):

Затем, в папку /include поместим файлы feedback_form.php и send.php со следующим содержимым:

В файле feedback.php при успешном получении данных через ajax появляется стандартное модальное окно:

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

Для того, чтобы это сработало, выше в коде мы инициализируем jquery и библиотеку для работы с модальными окнами:

В случае, если все поля заполнены правильно, данные ajax’ом передаются в send.php, и затем вызывается событие FEEDBACK_SEND.

Добавим украшательства – зайдем в папку шаблона (/bitrix/templates/имя_шиблона/) файл template_styles.css, в конец добавим код:

Создание почтового события

Теперь создадим почтовое событие и шаблон для него. Для этого в админке битрикса перейдем в настройки – почтовые шаблоны – типы почтовых событий, и нажмем добавить тип:

Cозадим тип почтового события FEEDBACK_SEND.

Далее переходим в почтовые шаблоны, и создаем новый почтовый шаблон для события битрикса FEEDBACK_SEND:

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

Источник