Веб-форма (комплексный компонент)
Описание 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 раза.
Bitrix вставить форму на страницу
Современные сайты наполняются содержанием с помощью специального программного обеспечения: CMS.
Для кого этот курс?
Курс Контент-менеджер адресован тем, кто работает с содержанием сайта: наполнение, изменение текста, загрузка и размещение картинок и так далее.
У нас часто спрашивают, сколько нужно заплатить
Ещё у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.
Баллы опыта
уроке.
Практика и тесты
При изучении курса рекомендуется повторять описываемые действия на демонстрационной версии сайта, установленной локально или в Виртуальной лаборатории.
После изучения курса пройдите тесты на сертификацию. При успешной сдаче последовательности тестов со страницы Моё обучение скачайте сертификат об успешном прохождении курса в формате PDF.
Для преподавания оффлайн
Если данный курс берётся в качестве основы для оффлайного преподавания, то рекомендуемая продолжительность: 2 дня (16 академических часов).
Если нет интернета
Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на
Android:
EPUB Reader
CoolReader
FBReader
Moon+ Reader
eBoox
iPhone:
FBReader
CoolReader
iBook
Bookmate
Windows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google Chrome
Как проходить учебный курс?
Создание и редактирование веб-формы
Форма, расположенная на данной странице, предназначена для создания новых и изменения параметров уже существующих веб-форм.
В продукте предусмотрены два режима работы с веб-формами:
Выбор режима осуществляется на странице настроек модуля.
Контекстная панель формы
| Кнопка | Описание |
|---|---|
| Параметры формы | Настройка параметров формы. |
| Результаты | Переход на страницу со списком результатов формы. Кнопка отображается на странице редактирования уже существующей формы. |
| Вопросы | Переход на страницу со списком вопросов веб-формы. |
Кнопка отображается на странице редактирования уже существующей формы.
Кнопка отображается только в полном режиме редактирования веб-форм.
Кнопка отображается только в полном режиме редактирования веб-форм.
Основная контекстная панель
| Кнопка | Описание |
|---|---|
| Список | Переход на страницу со списком веб-форм. Кнопка отображается только на странице создания новой формы. |
| Создать | Переход на страницу создания новой веб-формы. Кнопка отображается на странице редактирования уже существующей формы. |
| Копировать | Копирование редактируемой веб-формы в новую. Кнопка отображается на странице редактирования уже существующей формы. |
| Очистить результаты | Удаление всех результатов веб-формы. Кнопка отображается на странице редактирования уже существующей формы. |
| Удалить веб-форму | Удаление редактируемой веб-формы. Кнопка отображается на странице редактирования уже существующей формы. |
Свойства
Форма редактирования может быть открыта через панель управления. Также ее можно загрузить из публичной части в режиме Правка с помощью меню действий компонента Редактировать параметры веб-формы.
| Поле | Описание |
|---|---|
| *Наименование | Название формы. |
| *Символьный идентификатор | Мнемонический идентификатор формы, вызывающий форму без использования ID в коде. Задается латинскими буквами. Удобен, например, при переносе базы данных. Поле отображается только в расширенном режиме редактирования. |
| Порядок сортировки | Относительный «вес», определяющий положение веб-формы в общем списке. |
| Меню результатов в административном разделе | Пункты меню в административном разделе сайта, ведущие на страницу с результатами формы. Названия пунктов меню указываются для всех языков интерфейса. |
| Сайты формы | Сайты, на которых используется веб-форма. |
| Отправлять результаты по email | Если вы хотите, чтобы каждый раз при заполнении веб-формы результаты заполнения отправлялись в виде письма на определённый адрес, то установите флаг в это поле. После сохранения параметров веб-формы автоматически будет сгенерирован почтовый шаблон, на основе которого будут отправляться сообщения. Для перехода к просмотру доступных шаблонов воспользуйтесь ссылкой Список шаблонов. Поле отображается только в упрощённом режиме редактирования веб-форм. |
| Подпись на кнопке, сохраняющей результаты формы | Надпись на кнопке, сохраняющей результаты формы. Например, Отправить или Сохранить. |
| Использовать CAPTCHA | Только при установленном параметре предусмотренная в форме CAPTCHA будет работать. |
Описание
| Поле | Описание |
|---|---|
| Изображение | Изображение, используемое для описания формы в публичном разделе сайта. Для выбора изображения служит кнопка Обзор. |
| Описание | Созданное описание будет выводиться при показе веб-формы в публичном разделе сайта. |
Шаблон формы
При выборе пункта Использовать свой шаблон формы возможно редактирование шаблона веб-формы с помощью визуального редактора.
Редактор дает следующие возможности:
В центральной части находится схематичный вид шаблона редактируемой веб-формы, в котором поля, а также дополнительные элементы представлены в виде иконок. Вверху имеется Панель инструментов, аналогичная панели визуального HTML-редактора системы.
Кнопки, расположенные внизу окна редактора, позволяют скрывать и разворачивать панели Элементы формы и Свойства.
Если панель Элементы формы развернута, то она расположена в правой части редактора и содержит следующие разделы:
Аналогично, если панель Свойства развернута, то она расположена в нижней части редактора. В этой панели настраиваются параметры элементов, добавляемых в шаблон формы.
Область редактирования
Панель «Элементы формы»
В разделе Новые поля формы содержатся компоненты, которые используются в качестве полей формы.
| Поле | Описание |
|---|---|
 Строка | Вставка нового вопроса с ответом в виде поля типа text (поле для ввода однострочного текста длиной до 255 символов) |
 Текст | Вставка нового вопроса с ответом в виде поля типа textarea (поле для ввода многострочного неограниченного текста) |
 Группа переключателей | Вставка нового вопроса с ответами в виде полей типа radio (поле для выбора одного варианта из нескольких) |
 Флажок | Вставка нового вопроса с ответами в виде полей типа checkbox (поле для выбора нескольких вариантов из списка или поле-флаг) |
 Выпадающий спиок | Вставка нового вопроса с ответами в виде поля типа dropdown (выбор одного варианта из выпадающего списка) |
 Множественный список | Вставка нового вопроса с ответами в виде поля типа multiselect (поле для выбора одного или нескольких вариантов из списка) |
 Дата | Вставка нового вопроса с ответом в виде поля типа date (поле для ввода даты) |
 Изображение | Вставка нового вопроса с ответом в виде поля типа image (поле для прикрепления изображения к результату веб-формы) |
 Файл | Вставка нового вопроса с ответом в виде поля типа file (поле для прикрепления произвольного файла к результату веб-формы) |
 Адрес e-mail | Вставка нового вопроса с ответом в виде поля типа email (текстовое поле для ввода e-mail-адреса с дополнительной проверкой) |
 Адрес WWW | Вставка нового вопроса с ответом в виде поля типа url (текстовое поле для ввода интернет-адреса) |
 Пароль | Вставка нового вопроса с ответом в виде поля типа password (текстовое поле со скрытым вводом) |
Существующие поля формы
Дополнительные элементы формы
Дополнительные компоненты, используемые для оформления внешнего вида формы.
При клике на любой добавленный в шаблон элемент, представленный иконкой, можно получить доступ к его параметрам в панели Свойства.
Для каждого элемента из раздела Дополнительные элементы формы есть свой набор настраиваемых свойств. Если элемент никаких настроек не имеет, это будет выведено в панели Свойства.
Ограничения
Указание ограничений на добавление результатов.
| Поле | Описание |
|---|---|
| Использовать ограничения | При отмеченной опции становятся активными нижеследующие поля и на добавление результатов будут использованы ограничения. |
| Максимальное количество результатов от пользователя | Задается максимальное количество результатов заполнения формы, получаемых от одного пользователя. |
| Минимальный промежуток времени между результатами | Указывается число единиц времени, определяющее минимальный интервал между результатами заполнения формы. |
| Использовать ограничения только для результатов в статусах | Используя Ctrl+правый клик мыши выбираются статусы данной веб-формы, для которых будут использованы ограничения. |
Дополнительно
Отображается только в полном режиме создания веб-форм.
Позволяет настроить шаблоны, используемые при работе с веб-формой.
| Поле | Описание |
|---|---|
| Почтовый шаблон | Указываются шаблоны, используемые для отправки результатов веб-формы. |
| Шаблон фильтра по таблице результатов в административной части | Путь к шаблону, используемому для фильтрации (поиска) результатов веб-формы в административном разделе. |
| Шаблон для таблицы результатов в административной части | Путь к шаблону, используемому для отображения таблицы результатов в Административном разделе. |
Статистика
Служит для задания идентификаторов, с использованием которых событие заполнения веб-формы будет учитываться в модуле статистики.
Служит для настройка связей веб-формы с CRM портала.
| Поле | Описание |
|---|---|
| CRM | В выпадающем списке выбирается портал, в CRM которого будут отсылаться результаты заполнения веб-формы. Когда портал выбран, то становятся доступными нижеописанные поля. Если в системе не создана ни одна связь с CRM, то в списке следует выбрать пункт настроить новый. Откроется форма создания связи. |
| Способ отсылки | При ручном режиме данные передаются в CRM менеджером после их обработки. При автоматическом режиме результаты заполнения сразу передаются в CRM.. |
| Связанные поля | |
| Указывается каким данным веб-формы (показаны справа) будет соответствовать какое-либо поле лида (показаны слева). Чтобы задать новое соответствие, служит кнопка Добавить. | |
Доступ
Служит для настройки прав групп пользователей на доступ к веб-форме.
Смотрите также
Пользовательские комментарии
Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.
Для этого нужно всего лишь авторизоваться на сайте
Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.
Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.