Как сделать AJAX формы 1с-Битрикс в всплывающих окнах
Эта статья посвящена одному из способов сделать в 1с-Битрикс форму в всплывающем окне. Достоинства метода:
— можно использовать любые формы 1с-Битрикс, которые выводятся компонентом. Например, добавление элемента инфоблока или веб-форма.
— всплывающее окно создается «на лету» при помощи javascript и изменяет свой размер в зависимости от количества контента внутри.
— весь процесс работы формы, вывода ошибок и результата происходит при помощи AJAX без перезагрузки окна.
Готовим javascript
Для создания всплывающих окон воспользуемся плагином jquery.fancybox. Подключаем его в шаблоне сайта или непосредственно на странице, где будет ссылка для вызова окна, предварительно скопировав содержимое архива на сайт (в примере это /js/fancybox/).
script type = «text/javascript» src = «http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js» > script >
script type = «text/javascript» src = «/js/fancybox/jquery.fancybox-1.3.4.pack.js» > script >
link rel = «stylesheet» type = «text/css» href = «/js/fancybox/jquery.fancybox-1.3.4.css» media = «screen»/>
script type = «text/javascript» >
$(function() <
// ссылка для вызова окна должна иметь класс «popup»
$(‘a.popup’).fancybox( <
‘overlayShow’: false, // значения параметров можно посмотреть на сайте разработчика
‘padding’: 0,
‘margin’ : 0,
‘scrolling’ : ‘no’,
‘titleShow’: false,
‘type’: ‘ajax’,
‘href’: ‘/ajax_popup.php’ // описание скрипта будет дано ниже по тексту:)
>);
>);
script >
a class = «popup» href = «» >Открыть окно a >
Готовим форму
Итак, скрипт вызова формы будет находиться в файле /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 код с добавленными параметрами будет выглядеть так:
Указанным способом можно показывать не только формы, но и любой другой статический и динамический контент.
Как сделать форму в Битрикс со своей версткой и Ajax режимом
Покажу как сделать в 1С-Битрикс форму обратной связи, как её настроить, чтобы принимать лиды.
Форма будет называться «Оставьте заявку». Наша обратная форма Битрикс будет содержать поля имя, телефон, сообщение.
Будет использоваться модуль bitrix webforms.
Создание и настройка формы в административном разделе
Прежде, чем приступать, рекомендую выключить упрощенный режим редактирования форм в настройках модуля Вебформы. И сохранить настройку, соответственно.
В противном случае, бывают баги, по типу «не отправляются сообщения из формы на почту», «не привязывается почтовый шаблон к форме».
Во вкладке Свойства заполняем все необходимые поля. Во вкладке «Доступ» проверьте, чтобы для группы «Все пользователи» было право «Заполнение формы«.
Капчу на данном этапе включать не будем.
Жмем Применить, чтобы создать форму.
Переходим во вкладку Вопросы и добавляем их.
Настройка полей для формы:
Так же создаем статус по умолчанию для результатов, если он не создался.
Заголовок: Default. Во вкладке Доступ для всех операций поставьте «Создатель результата».
В панели администратора всё добавили и сохранили, молодцы!
Вывод формы в публичном разделе сайта
Если вы хотите разместить форму на отдельной странице, создайте страницу для формы.
А если хотите разместить в шаблоне, например в шапке, тогда создайте временную страницу, чтобы настраивать форму там. После скопируете вызов компонента формы с временной страницы. Я создам файл test.php.
Открываем редактирование страницы в визуальном редакторе, в компонентах ищем form.result.new, перетягиваем в окно правки.
Если нет поиска компонентов, то нажмите на кнопку у правой границы редактора.
Через несколько секунд появится окно настройки компонента.
Там нам надо заполнить:
После сохранения компонента, на странице появится форма. Она не очень красивая, поэтому установим свой шаблон.
Включим режим правки, наведем курсор на форму, там скопируем шаблон, как показано на картинке.
В шаблоне компонента сразу удалим все лишние файлы. Если их не удалить, в будущем они будут создавать путаницу при доработке шаблона, потому что будем иметь полно файлов не понятного назначения. А еще сайт будет тяжелый, так как пользователь будет получать много не нужных скриптов и стилей.
Оставим только файл template.php
Приступим к редактированию шаблона.
В template.php доступны следующие переменные:
Например, чтобы вывести инпут поля с символьным кодом NAME надо сделать в шаблоне так:
На основе переменных выше соберем шаблон
— выводит открытие формы со служебными скрытыми полями.
На этом можно закончить, форма уже будет работать.
Ajax отправка
Еще не забыли про ajax?
Чтобы форма отправлялась без перезагрузки страницы, надо добавить в параметры вызова компонента следующее:
«AJAX_MODE» => «Y»,
«AJAX_OPTION_SHADOW» => «N»,
«AJAX_OPTION_JUMP» => «N»,
«AJAX_OPTION_STYLE» => «Y»,
«AJAX_OPTION_HISTORY» => «N»,
Теперь Битрикс сам добавит нужные скрипты.
Алгоритм работы Ajax формы:
Из этой логики мы получаем некоторые нюансы. Поля формы, обработанные на джаваскрипте при загрузке страницы, снова будут не обработанные, так как они заменились, а события загрузки страницы заново не было.
Особенность 1
Особенность 2
Если мы форму используем в попапе, а при открытии окна верстка копируется в отдельный блок (так работает fancybox) ajax режим работать не будет.
Представим ситуацию: верстку всего попапа мы убрали в шаблон формы. Имеем структуру на странице, как показано ниже.
Проблема в том, что ajax будет заменять контент скрытого блока, внутри блока #1, а в блоке #2, который видит пользовать, изменений не будет.
Как исправить это? Вынести разметку попапа из шаблона компонента формы, то есть в нашем случае, вызов компонента сделать внутри
Настройка капчи
Чтобы в форме появилась капча:
Добавьте в шаблон формы следующий код:
В настройках формы включите показ капчи.
На этом капча уже будет работать.
Обновление капчи пользователем.
Бывает такое, что код с картинки не читается и пользователь не может отправить форму. Поможем пользователю.
Теперь, если пользователь не может прочитать код, он может обновить картинку.
Настройка формата изображения капчи
Вид капчи можно настроить в панели администратора в разделе Настройки > Настройки продукта > CAPTCHA.
Своя верстка полей ввода в форме
До этого момента поля в форму мы вставляли HTML_CODE вопроса, в котором уже содержится код инпута. Давайте и его сами генерировать, ведь бывает и такая необходимость.
Функцию генерации поля ввода объявим как анонимную, чтобы можно было копировать шаблон компонента и не было ошибок на странице, что одна функция объявлена 2 раза.
Всплывающее окно с формой обратной связи Битрикс
Давайте сделаем всплывающее окно с формой обратной связи. Вообще можно сделать всплывающее окно слабым компонентом системы управления, просто выбрал обратную связь как наиболее простой пример. Всплывающее окно будем делать без скриптов- на чистом 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:
Небольшая фенька.
Можно принудительно «нажимать» на ссылку вызывающую окно через определенный промежуток времени. Для этого достаточно добавить в шаблон сайта вот такой скрипт:
Создание контактной формы по канонам БМ
Форма обратной связи — один из самых част встречающихся элементов на сайте и сейчас я хочу рассказать о том как сделать её на основе компонента, при этом не используя встроенный в битрикс модуля «Веб-формы» т.к. он доступен только начиная с лицензии «Стандарт», а подавляющее большинство сайтов не имеющих отношения к Интернет-торговле делаются на редакции «Старт». Так же мы учтём в форме один маленький лайфхак который я узнал на курсе Бизнес молодость ЦЕХ, который мне посчастливилось проходить летом 2019-го года. И так, поехали.
Подготовка компонента
Чтобы сэкономить время, предлагаю установить один прикольный модуль «Мастер создания компонента», он позволит быстро и без лишних телодвижений создать простой макет нашего компонента формы обратной связи. Устанавливаем компонент через страницу на маркетплейсе или через админку.
Для нашего компонента я выбрал следующие базовые настройки:
Почему пустой скрипт? Т.к. функциональность формы крайне простая мы будем описывать бизнес логику формы в файлах component_epilog.php или доп.файлах ajax.php в папке шаблона компонента. А сам компонент emptyscript послушит каркасом для ряда простых форм.
Опции шаблона компонента следующие:
Мы будем использовать jQuery Ajax для обработки формы, а так же будем хранить стили компонента прямо в папке шаблона. В итоге настройки для мастера будут должны получиться примерно такими:
Нажимаем «Создать», ждём пару секунд, готово! Компонент успешно создан! Можете поблагодарить автора компонента донатом, он действительно экономит кучу времени. Давайте создадим какой-нибудь раздел на сайте и разместим нашу заготовку.
Перейдём к описанию самой формы.
Шаблон формы обратной связи
Допустим вы фрилансер, вебмастер, у вас есть свой landing-page и вы хотите подвесить туда форму обратной связи. Как будет выглядеть наш шаблон? Какую информацию будем собирать о клиенте? Предлагаю собрать следующее:
Основываясь на этом списке, делаем форму:
Первые три поля обязательны, т.к. нам нужна эта информация чтобы дозвониться до клиента и обсудить проект, а если не дозвонились то отправить адресованное ему письмо с коммерческим предложением (КП) и т.д. в котором нужно обратиться по имени. Поля «Сайт» и «Описание проблемы или задачи» позволят вам лучше подготовиться к обработки заявки, сделать более адресное КП.
Блок «Как с вами связаться» очень важен. Есть категория клиентов которая не любит звонки им гораздо удобнее провести первичный контакт с исполнителем через WhatsApp или электронную почту. Этот блок позволяет узнать предпочтение клиента и связаться с ним, наиболее удобным для него способом.
И конечно же «Согласие с политикой конфиденциальности». Согласно закону 152-ФЗ «О персональных данных», вы как владелец веб-сайта обязаны запросить подобное согласие от клиента если собираете его персональные данные (имя, телефон и т.п.). Кстати быстро сгенерировать страницу для сайта с описание политики конфиденциальности поможет этот сервис.
С внешним видом определились, давайте верстать!
Для валидации используем стандартный HTML5, однако при желании можно подключить jQuery Validate или аналогичный плагин.
Большая часть стилей, это стандартный Bootstrap 4, однако для некоторых элементов формы стиля я всё же приведу (это scss):
И стили для чекбоксов блока «Как нам с вами связаться?»:
Мы будем подставлять в него ответ сервера и показывать пользователю popup.
Подключаем проверку Google
Перейдите на страницу Google reCaptcha (у вас должен быть аккаунт на Google), нажмите кнопку «Создать» и введите следующие настройки:
Указываем тип капчи «Я не робот»:
После сохранения настроек, вы получите пару ключей, а именно «Ключ сайта» и «Секретный ключ»:
Их лучше сразу сохранить в константах сайта. Обычно это файл init.php или отдельный файл constants.php подключаемый в начале init.php.
Добавим блок капчи в вёрстку формы, вот так (можно вставить его перед согласием с политикой конфиденциальности):
Так же необходимо подключить js скрипта api Goolge reCaptcha, делается это в файле header.php шаблона сайта:
Проверка ввода капчи
Для верификации ввода капчи нам потребуется дополнительный php класс ReCaptcha, его можно найти на GitHub. Скачиваем и подключаем его в наш компонент. Т.к. для обработки формы я собираюсь использовать ajax.php подключим этот класс туда (ajax.php это доп.файл в лежащий в папке с шаблоном компонента и отвечающий за серверную обработку запроса с формы).
Давайте добавим JavaScript обработчик нашей форме, чтобы удостовериться что всё работает:
Подробнее о том как работать с jQuery Ajax можно прочитать в этой статье. Проверим работу капчи:
Шаблон письма
Шаблон письма до безобразия прост, в нём мы отразим только самую необходимую информацию:
Осталось дополнить наш ajax.php чтобы в случае успешной проверки капчи он отправлял данные на почту:
Метод CEvent::Send() отвечает за отправку письма, число 10 в параметрах метода — это идентификатор почтового шаблона который мы подготовили ранее, у вам он может отличаться. Если вы всё сделали правильно, в результате вам на почту будет приходить такое вот письмо: 
Как видите для менеджера выделен предпочтительный способ связи с клиентом, это одна из фишек БМ, вы будете связываться с потенциальным покупателем максимально комфортным для него способом, что повысит его лояльность и возможно конверсию.
Заключение
На первый взгляд внедрение такого функционала может показаться сложным, но если всё разложить на последовательные логические шаги и использовать пару спец.инструментов задача становится значительно проще! Если у вас остались вопросы — пишите их в комментариях. Желаю удачи!
Всплывающие окно на конструкторе сайтов Битрикс24
Скорее всего вы столкнулись с проблемой, что обычным способом не получается вызвать popup-форму при нажатии на кнопку в стандартном блоке Битрикс24.
У нас была задача на главной странице сделать кнопку, при нажатии которой всплывала наша форма. Чтобы вас не грузить работой с кодом, мы решили написать инструкцию и выложили необходимый код для вас.
Первым делом создайте CRM-форму, скопируйте код для «Клика по кнопке или ссылке» и вставьте в любой текстовый редактор
К данному коду вставьте ниже вот этот скрипт:
Теперь важна ваша внимательность:
Все пункты указаны на скрине выше:
#callb – это значение нужно поставить в поле «ссылка» на любой кнопке стандартного блока (по этой кнопке будет происходить вызов popup).
b24-web-form-popup-btn-7 – значение берется из пункта 4 на скрине (это class кнопки предложен из CRM-формы, при создание новой формы он меняется)
В нашем случае, если вставите код на сайт и опубликуете, но на сайте появится кнопка «Мы перезвоним вам», для того чтобы её убрать нужно вставить в button код style=»display:none»
Последним этапом требуется скопировать полностью весь код, вставить в блок html на сайте и опубликовать. Если вы сделали все правильно, то теперь при нажатии на кнопку у вас будет всплывать нужная вам форма.
Наше digital-агентство Webstripe профессионально занимается разработкой сайтов любой сложности. Если у вас возникли трудности на каком-либо этапе или вам просто нужна консультация специалиста, то напишите нам в чат. Мы обязательно поможем вам и дадим все необходимые рекомендации.