1с битрикс создать форму

Обновлено: 03.07.2024

Форма, расположенная на данной странице, предназначена для создания новых и изменения параметров уже существующих веб-форм.

В продукте предусмотрены два режима работы с веб-формами:

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

Выбор режима осуществляется на странице настроек модуля.

Внимание: при переключении в расширенный режим редактирования нежелательно переключаться обратно в упрощенный режим, поскольку данные, сохраненные в расширенном режиме, при переключении поменяют структуру.

В любом режиме есть две контекстных панели, разделенных названием формы. Контекстная панель формы используется для быстрого перехода к управлению параметрами, результатами или вопросами конкретной формы, а в случае расширенного режима - для перехода к списку полей и статусов формы. Контекстная панель формы отображается только при редактировании существующей формы. С помощью Основной контекстной панели осуществляется то или иное действие непосредственно с самой веб-формой.

Контекстная панель формы

Кнопка	Описание
Параметры формы	Настройка параметров формы.
Результаты	Переход на страницу со списком результатов формы. Кнопка отображается на странице редактирования уже существующей формы.
Вопросы	Переход на страницу со списком вопросов веб-формы.

Основная контекстная панель

Кнопка	Описание
Список	Переход на страницу со списком веб-форм. Кнопка отображается только на странице создания новой формы.
Создать	Переход на страницу создания новой веб-формы. Кнопка отображается на странице редактирования уже существующей формы.
Копировать	Копирование редактируемой веб-формы в новую. Кнопка отображается на странице редактирования уже существующей формы.
Очистить результаты	Удаление всех результатов веб-формы. Кнопка отображается на странице редактирования уже существующей формы.
Удалить веб-форму	Удаление редактируемой веб-формы. Кнопка отображается на странице редактирования уже существующей формы.

Свойства

Форма редактирования может быть открыта через панель управления. Также ее можно загрузить из публичной части в режиме Правка с помощью меню действий компонента Редактировать параметры веб-формы.

* - поля, обязательные для заполнения.

Описание

Поле	Описание
Изображение	Изображение, используемое для описания формы в публичном разделе сайта. Для выбора изображения служит кнопка Обзор.
Описание	Созданное описание будет выводиться при показе веб-формы в публичном разделе сайта.

Шаблон формы

Использовать шаблон формы по умолчанию
Использовать свой шаблон формы

При выборе пункта Использовать свой шаблон формы возможно редактирование шаблона веб-формы с помощью визуального редактора.

Редактор дает следующие возможности:

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

Кнопки, расположенные внизу окна редактора, позволяют скрывать и разворачивать панели Элементы формы и Свойства.

Если панель Элементы формы развернута, то она расположена в правой части редактора и содержит следующие разделы:

Новые поля формы служит для добавления в веб-форму новых элементов;
Существующие поля формы содержит уже настроенные вопросы веб-формы;
Дополнительные элементы формы содержит инструментарий для вставки в шаблон веб-формы дополнительных структурных элементов.

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

Область редактирования

Работа с областью редактирования шаблона осуществляется аналогично работе с визуальным HTML-редактором . Элементы, которые нужно вставить в шаблон веб-формы, перетаскиваются мышью из панели Элементы формы. После размещения компонента его параметры можно настроить в панели Свойства.

Панель "Элементы формы"

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

Поле	Описание
Строка	Вставка нового вопроса с ответом в виде поля типа text (поле для ввода однострочного текста длиной до 255 символов)
Текст	Вставка нового вопроса с ответом в виде поля типа textarea (поле для ввода многострочного неограниченного текста)
Группа переключателей	Вставка нового вопроса с ответами в виде полей типа radio (поле для выбора одного варианта из нескольких)
Флажок	Вставка нового вопроса с ответами в виде полей типа checkbox (поле для выбора нескольких вариантов из списка или поле-флаг)
Выпадающий спиок	Вставка нового вопроса с ответами в виде поля типа dropdown (выбор одного варианта из выпадающего списка)
Множественный список	Вставка нового вопроса с ответами в виде поля типа multiselect (поле для выбора одного или нескольких вариантов из списка)
Дата	Вставка нового вопроса с ответом в виде поля типа date (поле для ввода даты)
Изображение	Вставка нового вопроса с ответом в виде поля типа image (поле для прикрепления изображения к результату веб-формы)
Файл	Вставка нового вопроса с ответом в виде поля типа file (поле для прикрепления произвольного файла к результату веб-формы)
Адрес e-mail	Вставка нового вопроса с ответом в виде поля типа email (текстовое поле для ввода e-mail-адреса с дополнительной проверкой)
Адрес WWW	Вставка нового вопроса с ответом в виде поля типа url (текстовое поле для ввода интернет-адреса)
Пароль	Вставка нового вопроса с ответом в виде поля типа password (текстовое поле со скрытым вводом)

Существующие поля формы

Панель появляется только при редактировании уже созданной веб-формы. В ней перечислены уже созданные и настроенные вопросы веб-формы. В этом списке также отображаются неактивные вопросы с соответствующей пометкой. Они отображаются в виде: <Значок поля><Текст вопроса>. Например:

Дополнительные элементы формы

Дополнительные компоненты, используемые для оформления внешнего вида формы.

Свойства элементов

При клике на любой добавленный в шаблон элемент, представленный иконкой, можно получить доступ к его параметрам в панели Свойства.

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

расположение изображения относительно окружающего текста;
максимальная ширина и высота изображения;
увеличивать ли изображение в отдельном окне, если оно превышает максимальные размеры;
подпись для ссылки увеличения;
вертикальные и горизонтальные отступы от окружающего текста;
толщину рамки вокруг изображения.

При желании можно отключить использование шаблона оформления, выбрав опцию Использовать шаблон формы по умолчанию над редактором. При этом редактор будет скрыт, и будет использоваться шаблон по умолчанию. Шаблон веб-формы будет сохранен вместе с изменениями структуры вопросов веб-формы.
Если в настройках веб-формы установлен флаг Использовать CAPTCHA, а в шаблоне веб-формы элементы для ввода CAPTCHA отсутствуют, то флаг автоматически снимется при сохранении веб-формы.
Вопрос, отсутствующий в шаблоне веб-формы, при сохранении будет помечен как неактивный. Это также выражается в том, что если добавить новый элемент в веб-форму, а потом удалить его, то он сохранится в виде неактивного вопроса. Исключение - если на веб-форме уже присутствует элемент с таким строковым идентификатором. В этом случае элемент, отсутствующий в шаблоне, будет удален.
При копировании веб-формы вопросы новой веб-формы будут иметь те же самые строковые идентификаторы, что и у исходной. Идентификатор самой веб-формы получит случайно сгенерированный постфикс.
При повторной вставке в шаблон веб-формы уже существующего вопроса (например, из панели Существующие поля формы или методом copy/paste) результатом будет создание связанной копии вопроса, все изменения которой будут отражаться и на изначальном элементе. Если Вы хотите продублировать элемент, создайте ещё один элемент того же типа с такими же параметрами (кроме, разумеется, строкового идентификатора) или воспользуйтесь инструментом копирования вопроса (в списке вопросов веб-формы).

Ограничения

Указание ограничений на добавление результатов.

Поле	Описание
Использовать ограничения	При отмеченной опции становятся активными нижеследующие поля и на добавление результатов будут использованы ограничения.
Максимальное количество результатов от пользователя	Задается максимальное количество результатов заполнения формы, получаемых от одного пользователя.
Минимальный промежуток времени между результатами	Указывается число единиц времени, определяющее минимальный интервал между результатами заполнения формы.
Использовать ограничения только для результатов в статусах	Используя Ctrl+правый клик мыши выбираются статусы данной веб-формы, для которых будут использованы ограничения.

Дополнительно

Отображается только в полном режиме создания веб-форм.

Позволяет настроить шаблоны, используемые при работе с веб-формой.

Поле	Описание
Почтовый шаблон	Указываются шаблоны, используемые для отправки результатов веб-формы.
Шаблон фильтра по таблице результатов в административной части	Путь к шаблону, используемому для фильтрации (поиска) результатов веб-формы в административном разделе.
Шаблон для таблицы результатов в административной части	Путь к шаблону, используемому для отображения таблицы результатов в Административном разделе.

Статистика

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

Поле	Описание
Event1	Идентификатор типа события event1 .
Event2	Идентификатор типа события event2 .
Event3	Дополнительный параметр для события.

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

Доступ

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

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

Смотрите также

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

Комплексный компонент, создавая физически только одну страницу, позволяет получить несколько страниц: заполнение веб-формы, со списком результатов, редактирование результата, просмотр результата и т.д. Компонент стандартный и входит в дистрибутив модуля.

В структуре визуального редактора компонент расположен по пути Сервисы > Веб-формы > Веб-форма.

Компонент относится к модулю Веб-формы.

Параметры

new - страница добавления результата, т.е. будет представлена выбранная веб-форма для заполнения;
list - страница со списком результатов данной формы.

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

new - cтраница добавления результата;
list - cтраница списка результатов;
edit - cтраница редактирования результата;
view - cтраница просмотра результата.

A - Авто + Управляемое: автоматически обновляет кеш компонентов в течение заданного времени или при изменении данных;
Y - Кешировать: для кеширования необходимо определить время кеширования;
N - Не кешировать: кеширования нет в любом случае.

Пример вызова

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Покажу как сделать в 1С-Битрикс форму обратной связи, как её настроить, чтобы принимать лиды.

Будет использоваться модуль bitrix webforms.

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

Прежде, чем приступать, рекомендую выключить упрощенный режим редактирования форм в настройках модуля Вебформы. И сохранить настройку, соответственно.

Теперь идем в Сервисы -> Веб формы -> Настройка форм и жмем там Создать, чтобы создать форму.

Во вкладке Свойства заполняем все необходимые поля. Во вкладке "Доступ" проверьте, чтобы для группы "Все пользователи" было право "Заполнение формы".

Капчу на данном этапе включать не будем.

Жмем Применить, чтобы создать форму.

Переходим во вкладку Вопросы и добавляем их.

Настройка полей для формы:

Так же создаем статус по умолчанию для результатов, если он не создался.

Заголовок: Default. Во вкладке Доступ для всех операций поставьте "Создатель результата".

В панели администратора всё добавили и сохранили, молодцы!

Вывод формы в публичном разделе сайта

Если вы хотите разместить форму на отдельной странице, создайте страницу для формы.

А если хотите разместить в шаблоне, например в шапке, тогда создайте временную страницу, чтобы настраивать форму там. После скопируете вызов компонента формы с временной страницы. Я создам файл test.php.

Открываем редактирование страницы в визуальном редакторе, в компонентах ищем form.result.new, перетягиваем в окно правки.

Если нет поиска компонентов, то нажмите на кнопку у правой границы редактора.

Через несколько секунд появится окно настройки компонента.

Там нам надо заполнить:

После сохранения компонента, на странице появится форма. Она не очень красивая, поэтому установим свой шаблон.

Включим режим правки, наведем курсор на форму, там скопируем шаблон, как показано на картинке.

Укажем новое название шаблона, шаблон сайта - текущий.

В шаблоне компонента сразу удалим все лишние файлы. Если их не удалить, в будущем они будут создавать путаницу при доработке шаблона, потому что будем иметь полно файлов не понятного назначения. А еще сайт будет тяжелый, так как пользователь будет получать много не нужных скриптов и стилей.

Оставим только файл template.php

Приступим к редактированию шаблона.

В template.php доступны следующие переменные:

$arResult["F_RIGHT"] - код права на доступ к текущей форме (вкладка Доступ формы)
$arResult["WEB_FORM_NAME"] - символьный код формы
$arResult["arrVALUES"] - значения полей введенные пользователем
$arResult["CAPTCHACode"] - уникальный код капчи. Требуется для вывода картинки.
$arResult["arForm"]["STAT_EVENT1"] - event1 с вкладки Статистика формы
$arResult["arForm"]["STAT_EVENT2"] - event2 с вкладки Статистика формы
$arResult["arForm"]["STAT_EVENT3"] - event3 с вкладки Статистика формы $arResult["REQUIRED_SIGN"] - красная звездочка для подсвечивания обязательных полей

Для вывода полей надо брать вопросы из $arResult["QUESTIONS"] по символьному коду.

CAPTION - имя поля
IS_HTML_CAPTION - имя поля в формате HTML, Y/N.
REQUIRED - обязательно к заполнению, Y/N.
IS_INPUT_CAPTION_IMAGE - есть ли изображение вопроса
HTML_CODE - HTML код поля
STRUCTURE - детальное описание поля
IMAGE - описание изображения вопроса, если IS_INPUT_CAPTION_IMAGE равен Y.

Например, чтобы вывести инпут поля с символьным кодом NAME надо сделать в шаблоне так:

На основе переменных выше соберем шаблон

Логика его такая:

Вначале проверяем, подключает ли файл Битрикс или его открыл пользователь введя в браузере адрес шаблона. Если не битрикс - блокируем генерацию шаблона.

<?=$arResult["FORM_HEADER"]?> - выводит открытие формы со служебными скрытыми полями.

Поле web_form_submit в значении Y - триггер для Битрикс, говорящее о том, что форма отправлена и надо бы проверить, что там ввел пользователь.

Если есть ошибки - выводим их в диве с классом errors.

Далее выводим три поля, у каждого: Имя, если обязательное - галочка, HTML код инпута для ввода.

На этом можно закончить, форма уже будет работать.

Ajax отправка

Еще не забыли про ajax? Сейчас покажу вариант, который работает даже без JQuery.

Создайте в папке шаблона компонента файл script.js с контентом:

В шаблон (наш template.php) после <?=$arResult["FORM_HEADER"]?> добавьте строку <div ></div>. В конец файла добавьте следующее:

Выше мы привязали через функцию ajaxForm() ajax к форме. В $templateFolder хранится ссылка на папку текущего шаблона, в ней мы создадим файл ajax.php. Путь файла, например, может получиться такой: /bitrix/templates/books/components/bitrix/form.result.new/request_form/ajax.php.

Последний штрих - создать файл обработчик ajax запросов.

Создайте в папке шаблона компонента файл ajax.php с контентом:

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

Аналогично компоненту веб формы, запускаем обработчики событий.

В этом варианте нет минусов, как в варианте с битриксовым аякс, потому что битрикс подменяет каждый раз HTML в нашей форме, а в текущем варианте DOM страницы не трогается.

Ajax. Битриксовый вариант.

Чтобы форма отправлялась без перезагрузки страницы, надо добавить в параметры вызова компонента следующее:

"AJAX_MODE" => "Y",
"AJAX_OPTION_SHADOW" => "N",
"AJAX_OPTION_JUMP" => "N",
"AJAX_OPTION_STYLE" => "Y",
"AJAX_OPTION_HISTORY" => "N",

Кстати, с помощью этих параметров добавить AJAX можно в любой компонент. Эти параметры - не особенность вебформ, реализована работа с ajax в базовом классе компонентов.

Теперь Битрикс сам добавит нужные скрипты.

Алгоритм работы Ajax формы:

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

Особенность 1

Если в форме в поле телефона на JS ставится маска, например $('.my_phone_input').mask('9 (999) 999 9999'), то маска пропадет после замены битриксом формы. Поэтому маску придется накладывать в файле template.php, чтобы она накладывалась каждый раз заново.

Особенность 2

Если мы форму используем в попапе, а при открытии окна верстка копируется в отдельный блок (так работает fancybox) ajax режим работать не будет.

Представим ситуацию: верстку всего попапа мы убрали в шаблон формы. Имеем структуру на странице, как показано ниже.

Настройка капчи

Чтобы в форме появилась капча:

Добавьте в шаблон формы следующий код:

В настройках формы включите показ капчи.

На этом капча уже будет работать.

Обновление капчи пользователем.

Теперь, если пользователь не может прочитать код, он может обновить картинку.

Настройка формата изображения капчи

Вид капчи можно настроить в панели администратора в разделе Настройки > Настройки продукта > CAPTCHA.

Своя верстка полей ввода в форме

До этого момента поля в форму мы вставляли HTML_CODE вопроса, в котором уже содержится код инпута. Давайте и его сами генерировать, ведь бывает и такая необходимость.

Функцию генерации поля ввода объявим как анонимную, чтобы можно было копировать шаблон компонента и не было ошибок на странице, что одна функция объявлена 2 раза.

Задайте название и символьный код у ИБ, и добавьте нужные свойства для ИБ, они и будут служить полями для вашей формы

Названия - отвечает за вывод названия у поля
Сортировка - отвечает за порядок вывода полей
Тип - будет отвечать за внешний вид
Обязательность - будет проверять поля на обязательность, в случае если галочка стоит, а при отправлении нужное поле не заполнено, то пользователю появится предупреждение
Код - нужно для почтовых шаблонов, чтобы отправлять письма как клиенту, так и владельцам сайта (в зависимости от настроек)

Свойства должность и место работы - были отмечены обязательными

Свойство комментарий - был изменён размер поля для ввода значений:

Свойство стаж - выбрано с типом список и настроено след. образом:

2. Настроить любой наш компонент (поддерживающий формы) на вашу форму или разместить компонент на странице.

а. Настроить наш компонент
На данный момент формы поддерживаются в 2 компонентах bxready2:catalog.lite и bxready2:block
Для примера перенастроим форму в проектах на новый каталог, для начала зайдём в настройки компонента

Настроим компонент на новую форму

Сопроводительный текст формы - текст который выведется перед кнопкой, которая открывает форму;
Свойства, выводимые на заполнение - все свойства которые будут доступны для заполнения пользователю;
Название элемента брать из свойства - название для элемента, под которым он сохранится у вас в ИБ.
Код типа почтового события для уведомления - код типа почтового события , которое будет срабатывать после отправки данных пользователем

б. разместить компонент alexkova.business:form.iblock на странице.
Для размещение компонента воспользуйтесь документацией Битрикс ( размещение компонентов )

На тестовой странице размещаем компонент alexkova.business:form.iblock (id у формы устанавливаем form-test)

$APPLICATION->IncludeComponent(
"alexkova.business:form.iblock",
"popup",
Array(
"BUTTON_TEXT" => "",
"BXR_FORM_ID" => "form-test",
"BXR_FORM_SUBMIT_CAPTION" => "",
"BXR_FORM_SUBMIT_ICON" => "",
"FORM_TITLE" => "Заполните поля",
"GROUPS" => array(),
"IBLOCK_ID" => "187",
"IBLOCK_TYPE" => "services",
"MAX_FILE_SIZE" => "0",
"NAME_FROM_PROPERTY" => "1005",
"PROPERTY_CODES" => array("1005", "1006", "1007", "1009"),
"RESIZE_IMAGES" => "N",
"SEND_EVENT" => "KZNC_NEW_FORM_RESULT_TEST",
"STATUS_NEW" => "N",
"USER_MESSAGE_ADD" => "",
"USE_CAPTCHA" => "N"
)
);

3. Добавление собственных почтовых типов и почтовых шаблонов.
Документация Битрикс по добавлению почтовых типов и добавлению почтовых шаблонов .

Добавим тип почтового события (с кодом что мы ранее указывали в настройках компонента KZNC_NEW_FORM_RESULT_TEST (код может быть любым))
В описание укажите коды из созданного ИБ.

Нажмите Применить, после этого появится вкладка Шаблоны

Зайдите в нее и нажмите Добавить почтовый шаблон

На один тип почтового события можно задавать несколько почтовых шаблонов, и если у вас в форме есть поле email, то вы можете подставить данное поля в получатели (Кому), и ваш клиент будет получать соответствующее письмо.

Читайте также: