Создание веб-формы в упрощенном режиме - 1С

1С-Битрикс: Управление сайтом 6.x
Руководство по созданию и
размещению веб-форм на сайте
Содержание
Введение ....................................................................................................................... 3
Создание веб-формы в упрощенном режиме .............................................................. 3
Добавление веб-формы ................................................................................................. 3
Создание вопросов веб-формы ...................................................................................... 7
Размещение веб-формы на странице сайта ................................................................... 10
Создание страницы «Заполнение веб-формы» .............................................................. 11
Просмотр страницы в публичной части ......................................................................... 14
Создание шаблона веб-формы в визуальном режиме .............................................. 15
Расширенный режим управления веб-формами ....................................................... 18
Создание веб-формы в расширенном режиме ............................................................... 19
Добавление статуса веб-формы ................................................................................... 23
Пример работы с полями ............................................................................................. 25
Навигация по разделам настроек веб-формы ................................................................ 27
Установка прав доступа при работе с веб-формами ....................................................... 28
Публикация веб-формы ............................................................................................... 30
© «1С-Битрикс», 2008
2
Введение
Необходимость создания веб-форм на сайте возникает довольно часто. Они используются
для организации взаимодействия с посетителями сайта: для создания всевозможных анкет
на сайте, запросов к службе поддержки компании, отправка заявок на участие в семинарах,
для сбора информации на вакансии и т.д. В данном руководстве по созданию и размещению
веб-форм на сайте мы рассмотрим основные аспекты работы с веб-формами: создание вебформ в упрощенном режиме, размещение их на сайте, создание визуального шаблона для
веб-форм, также рассмотрим работу со статусами, т.е. работу в расширенном режиме.
В примерах будем использовать демо-версию продукта «1С-Битрикс: Управление сайтом»
версии 6.5.
Создание веб-формы в упрощенном режиме
При поставке продукта модуль Веб-формы настроен на работу в упрощенном режиме. Т.е.
настройки модуля имеют вид:
Процесс создания и размещения веб-формы состоит из нескольких основных этапов:
1. создание веб-формы;
2. настройка параметров веб-формы;
3. создание вопросов веб-формы;
4. создание статусов веб-формы (в упрощенном режиме этот пункт не выполняется);
5. размещение компонентов веб-формы на страницах сайта.
Добавление веб-формы
Создадим для примера форму Анкета посетителей. Форма будет содержать следующие
вопросы:
© «1С-Битрикс», 2008
3
1. Фамилия, имя, отчество
2. Дата рождения
3. Адрес
4. Вы женаты / замужем?
5. Какие области знаний вас интересуют?
6. и т.д.
Переходим на страницу Сервисы -> Веб-формы -> Настройка форм для добавления вебформы:
По кнопке Создать переходим к добавлению новой веб-формы.
В поле Наименование вводится название новой веб-формы. В данном случае - Анкета
посетителя сайта.
© «1С-Битрикс», 2008
4
Указывается порядок сортировки (порядок показа веб-формы в списке форм). Чем большее
значение вы укажете, тем ниже в списке будет показана данная веб-форма. Например, если
уже были созданы веб-формы со значениями в этих полях 100, 200 и 300, то новая форма с
порядком сортировки 400 будет расположена в списке на четвертой позиции.
Задаются пункты меню для административного раздела сайта, ведущие к таблицам
результатов. Например, для англоязычного интерфейса пункт меню будет называться Visitor
questionnaire, для русскоязычного – Анкета посетителя. Т.е. для каждого из языков,
установленных в системе, можно указать свое название.
Выбираются сайт или сайты системы, на которых будет показана веб-форма.
Указывается
текст,
который
будет
на
кнопке
для
отправки
результатов
веб-формы
(например, Сохранить).
Опция Использовать CAPTCHA подключает технологию CAPTCHA, которая служит для
предотвращения автоматического заполнения веб-формы. В форме CAPTCHA выглядит как
случайная надпись, которую пользователю надо ввести в заданное поле.
Установив опцию Отправлять результаты по email, результаты заполнения веб-формы
могут отсылаться по электронной почте на адрес, указанный в шаблоне письма. Упрощенный
режим позволяет автоматически сгенерировать почтовый шаблон, по которому будет
выполняться отправка сообщения. Почтовый шаблон будет сгенерирован сразу после
сохранения веб-формы. Ссылка Список шаблонов позволяет открыть список созданных
шаблонов и отредактировать их нужным образом, если требуется:
© «1С-Битрикс», 2008
5
В форме редактирования можно внести изменения в почтовый шаблон, используя доступные
поля, перечисленные внизу страницы.
Итак, основные параметры для нашей веб-формы мы ввели. На остальных закладках формы
редактирования можно
1. указать описание и изображение для формы. Загружается изображение с локального
компьютера. Изображение будет показано в публичной части рядом с названием и
описанием формы:
© «1С-Битрикс», 2008
6
2. создать визуальный шаблон веб-формы (рассмотрим это в следующей главе) –
закладка Шаблон формы;
3. ввести
ограничения
на
количество
результатов
от
одного
пользователя,
на
минимальный промежуток времени между результатами – закладка Ограничения;
4. чтобы отразить факты заполнения и сохранения формы в модуле статистики через
механизм регистрации событий (позволяющий, в том числе, проследить динамику
активности заполнения формы по дням и построить соответствующий график), на
закладке Статистика необходимо указать идентификаторы типа события для модуля
статистики. Например, event1=form и event2=anketa
5. наложить ограничения на доступ к форме. Уровень доступа по умолчанию
задается в настройках модуля Веб-формы, а на закладке Доступ можно его
переопределить. Для нашей формы оставим право доступа для всех пользователей по
умолчанию – заполнение формы.
Сохраняем нашу форму по кнопке Применить или Сохранить.
Создание вопросов веб-формы
В
разделе
описывается
процедура
добавления
вопросов
веб-формы.
Вопросы
будут
расположены в теле веб-формы в формате «текст вопроса – поле для ответа» - будет
использован шаблон формы по умолчанию.
© «1С-Битрикс», 2008
7
Чтобы добавить вопрос, нужно выполнить следующие действия.
1. Перейти по ссылке «+» в столбце Вопросы
2. Откроется форма создания вопроса.
3. Установить флажок в поле Активен. Это означает, что вопрос будет отображаться на
веб-форме, при ее размещении в публичном разделе сайта.
4. Задать значение поля Порядок сортировки. Значение этого поля определяет
положение вопроса в списке: чем меньше значение поля, тем выше в списке будет
расположен вопрос.
5. Установить флажок в поле Обязателен. Это означает, что ответ на данный вопрос
будет обязательным.
6. Можно загрузить изображение для вопроса с локального компьютера. Ввести текст
вопроса
в
виде
обычного
текста
или
HTML-кода.
При
необходимости
можно
использовать визуальный HTML-редактор.
7. Выбирается тип поля для ответа. В зависимости от выбранного типа отображаются
свои настройки. Так, для типа Строка определяется только размер поля.
На этом шаге вопрос можно сохранять.
Отметим, что в форме создания вопроса присутствуют дополнительные возможности. А
именно, валидаторы позволяют добавить ограничения на вводимые данные в ответе.
© «1С-Битрикс», 2008
8
Набор валидаторов также зависит от типа вопроса. Добавление/удаление валидаторов
производится с помощью интуитивно понятного интерфейса. Также можно добавить
произвольный служебный комментарий к вопросу.
Таким образом создадим и все остальные вопросы формы:
© «1С-Битрикс», 2008
9
Размещение веб-формы на странице сайта
Размещение веб-формы в публичной части сайта осуществляется с помощью визуальных
компонентов веб-формы.
Переходим в публичной части сайта в раздел Общение -> Веб-формы и нажимаем кнопку
административной панели для создания страницы.
Доступны следующие компоненты для размещения и работы с веб-формами в публичной
части сайта:
 Комплексный компонент
Веб-форма позволяет создать сразу полный набор
страниц работы с веб-формой: заполнение, просмотр, редактирование результата,
список результатов;
 Компонент
Заполнение
веб-формы.
Мы
воспользуемся
именно
этим
компонентом, т.к. нам требуется лишь собрать информацию с пользователей;
 Компонент
Просмотр результата служит для создания страницы с результатами
заполнения формы;
 Компонент
Редактирование результата создает страницу, на которой можно
изменить результаты заполнения формы;
 Компонент
Список результатов создает страницу, на которой выводится список
всех результатов данной формы.
Итак,
воспользуемся
компонентом
Заполнение
веб-формы
для
вывода
веб-формы
в
публичной части
© «1С-Битрикс», 2008
10
Создание страницы «Заполнение веб-формы»
В панели Компоненты 2.0 переходим в раздел Сервисы -> Веб-формы и размещаем
компонент Заполнение веб-формы на странице
После добавления компонента внизу страницы отобразится панель Свойства для настройки
компонента (если панель не отобразилась, нажмите указателем мыши на компонент,
размещенный на странице).
В панели Свойства выведены все настройки компонента, распределенные по группам.
Мы устанавливаем следующие параметры:
 ID веб-формы. Выбираем нашу форму Анкета посетителя сайта;
 Далее параметры оставляем по умолчанию, т.е. ЧПУ включать не будем, настройки
кеширования также оставим по умолчанию;
 Пути к страницам (со списком результатов, странице редактирования результата и
т.д.), не указываем, поля оставляем пустыми. Если указать путь к этим страницам, то
они должны быть созданы отдельно с использованием соответствующих компонентов.
После завершения настройки компонента следует сохранить страницу.
При выборе пункта меню
Сохранить как… появляется
возможность выбрать в
диалоговом окне директорию, где будет расположена созданная страница, задать ее имя и
название, которое будет отображаться в теле страницы при обращении к ней в публичном
разделе сайта.
© «1С-Битрикс», 2008
11
Мы находимся в разделе /communication/web-forms/. Создадим в этом разделе папку
anketa с помощью кнопки
менеджера файлов. И сохраним нашу страницу с названием
index.php в этой папке.
Нажимаем Сохранить и страница будет сохранена.
Переходим в публичный раздел. Добавим нашу страницу в меню. В разделе Общение ->
Веб-формы переходим в режим редактирования сайта (закладка
).
Переходим к редактированию меню:
© «1С-Битрикс», 2008
12
Нажимаем Вставить пункт, вводим название и ссылку, перемещать пункты меню между
собой можно стрелочками:
Нажимаем Сохранить и новый пункт добавляется в левое меню.
© «1С-Битрикс», 2008
13
Просмотр страницы в публичной части
Теперь переходим на нашу страницу:
По кнопке Сохранить или Применить пользователь получает сообщение:
© «1С-Битрикс», 2008
14
Создание шаблона веб-формы в визуальном режиме
Мы
при
создании
веб-формы
Анкета
посетителя
сайта
использовали
шаблон
по
умолчанию:
Можно создать свой шаблон веб-формы, используя средства визуального редактирования:
© «1С-Битрикс», 2008
15
Для вывода текстовой информации - текстов вопросов, сообщений об ошибках, сообщений
об
успешном
заполнении
формы,
кнопки,
поля
CAPTCHA
и
т.д.
–
используются
Дополнительные элементы формы.
Поля для ответов на вопросы размещены в разделе Новые поля формы. При перемещении
иконки поля в рабочую область она принимает внешний вид как в публичной части:
Создавать визуальный шаблон можно двумя путями:
1. когда вопросы формы уже созданы способом, описанным в предыдущей главе (на
странице Список вопросов формы). Тогда список всех вопросов соберется в
разделе Существующие поля формы и можно будет их разместить в шаблоне
нужным образом.
Как видим, обязательность заполнения поля отмечена.
2. во втором случае создавать вопросы заранее не требуется. Вы можете размещать
поля в рабочей области, настраивать их и при сохранении формы вопросы будут
созданы. Т.е. существующие поля и вопросы - суть одно и то же.
Подписи к полям можно создавать либо просто текстовые, либо использовать компонент
Подпись поля формы. Если подписи к полям создаются простым текстом, то знак
обязательности ответа на вопрос
необходимо добавить непосредственно. А компонент
поставит знак обязательно в публичной части сам.
Обратите внимание! Основным моментом при настройке полей является совпадение
строкового идентификатора подписи поля формы и самого поля формы:
© «1С-Битрикс», 2008
16
Таким образом, визуальное редактирование имеет широкую функциональность для создания
различного внешнего вида веб-форм.
Также обратите внимание, что после создания и сохранения своего шаблона формы можно
будет вернуться к шаблону по умолчанию при этом собственный шаблон не будет потерян.
Назначение каждого из компонентов, используемых при визуальном редактировании вебформ, описано в документации продукта.
Также
информацию
по
управлению
шаблонами
веб-форм
можно
найти
в
курсе
Администрирование.
© «1С-Битрикс», 2008
17
Расширенный режим управления веб-формами
Для включения расширенного режима работы с веб-формами в настройках модуля снимаем
флаг Использовать упрощённый режим редактирования форм:
Вообще говоря, расширенный режим предназначен для продвинутых пользователей, так как
для полной реализации заложенной функциональности, необходимо будет создавать,
например, свои файлы-обработчики.
Итак, расширенный режим отличается от упрощенного режима следующими моментами:
1. Добавляется возможность работы со статусами. В общем случае статусы означают
определенные этапы в обработке результата веб-формы. Например, на рассмотрении,
принято,
отклонено
дополнительное
и
т.д.
разграничение
Использование
прав
статусов
пользователей
на
позволяет
доступ
к
выполнять
управлению
результатами веб-форм. Важно! При работе с веб-формами в расширенном режиме
для каждой веб-формы обязательно должен быть создан и настроен хотя бы один
статус.
2. Поля формы предназначены для представления каких-либо промежуточных либо
окончательных результатов вычисления, получаемых на основе данных, вводимых в
поля для ответов веб-формы. Значения полей веб-формы вычисляются с помощью
программного скрипта, задаваемого в коде используемого визуального компонента.
3. Кроме
того,
в
расширенном
режиме
увеличивается
количество
параметров,
определяемых при редактировании формы.
© «1С-Битрикс», 2008
18
Создание веб-формы в расширенном режиме
В форме создания/редактирования веб-формы в расширенном режиме имеются следующие
различия:
1. На
закладке
Свойства
присутствует
обязательный
параметр
Символьный
идентификатор:
2. Добавляется возможность ввести ограничения для одного или нескольких статусов;
3. Есть возможность задать шаблоны, используемые для:
a. фильтра по таблице результатов в административной части;
b. таблицы результатов в административной части;
c. почтового
шаблона
для
отправки
результата
по
почте
(предусмотрена
автоматическая генерация шаблонов)
Обратите внимание, ссылка Создать отображается после того, форма будет
сохранена по кнопке Применить. С помощью ссылки Просмотр шаблона можно
перейти к просмотру и редактированию сгенерированного шаблона в новом окне
браузера.
Примечание! Для каждой веб-формы может быть создано неограниченное число почтовых
шаблонов.
4. Появляются дополнительные уровни доступа пользователей к веб-форме и результатам ее
заполнения:
© «1С-Битрикс», 2008
19
Уровень доступа по умолчанию устанавливается из настроек модуля Веб-формы.
Здесь можно выбрать любой из имеющихся. В расширенном режиме добавляются уровни доступа,
зависящие от статуса.
© «1С-Битрикс», 2008
20
Добавление вопроса веб-формы в расширенном режиме
При добавлении вопроса в расширенном режиме дополнительно определяются следующие
параметры:
1. Уникальный Символьный идентификатор вопроса:
2. Текст вопроса и изображение задаются на отдельной вкладке Вопрос;
3. Настраиваем формат поля для ответа:
a. Обратите
внимание,
что
необходимо
установить
пробел
в
поле
Текст
[ANSWER_TEXT] для типа поля text;
b. поле Значение оставляется незаполненным;
c. в поле со списком Тип поля выбирается значение Text, так как ответ будет
введен в виде произвольного однострочного текста;
d. в поле Ширина устанавливается ширина текстового поля, например, равная
80 текстовым символам;
e. в поле Акт. устанавливается флажок, для того чтобы активировать данное
поле ответа.
4. Для
отображения
ответов
в
таблице
результатов
установить
флажки
в
соответствующие поля и задать заголовок столбца в таблице.
© «1С-Битрикс», 2008
21
5. Чтобы
указать,
что
данный
ответ
при
установке
фильтра
в
таблице
будет
использоваться как текст, в поле Поля в фильтре для вводимого значения
выбирать значение текстовое поле.
Остальные параметры заполняем аналогично упрощенному режиму редактирования форм.
© «1С-Битрикс», 2008
22
Добавление статуса веб-формы
Для
каждого
результата
заполнения
формы
можно
назначить
определенный
статус,
например: принято к рассмотрению, опубликовано, отклонено и т.д. В настройках статуса вы
можете указать различные права доступа для различных групп пользователей, а также
отдельно для создателя результата.
Обратите внимание! Для каждой формы должен быть определен хотя бы один статус. В
противном случае результаты заполнения формы не будут сохранены и почтовые сообщения
не будут отправлены.
В разделе описывается создание статуса Принято, который означает, что результаты
заполнения формы были получены и рассмотрены.
Для создания нового статуса нужно выполнить следующие действия:
1. Перейти к списку статусов с помощью ссылки Статусы.
Обратите внимание, при работе в упрощенном режиме внутренний статус (DEFAULT)
присутствует, но не отображается. При переходе от упрощенного к расширенному, этот
статус показывается явно.
2. Нажать кнопку Добавить для добавления нового статуса.
3. Установить флаг в поле Активен, чтобы сделать данный статус активным.
4. Ввести заголовок создаваемого статуса.
5. Ввести в поле Описание краткую характеристику данного статуса.
© «1С-Битрикс», 2008
23
6. Значение поля CSS класс для отображения заголовка статуса и полей для
указания файлов-обработчиков можно оставить равными значениям по умолчанию.
7. В полях Права групп пользователей нужно выбрать группы пользователей,
наделенные указанными правами.
8. Сохранить новый статус, нажав кнопку Сохранить.
© «1С-Битрикс», 2008
24
Пример работы с полями
Поля
формы
предназначены
для
представления
каких-либо
промежуточных
либо
окончательных результатов вычисления, получаемых на основе данных, вводимых в поля
для ответов веб-формы или данных, которые можно получить от пользователя (например,
IP).
Добавим поле для нашей веб-формы Анкета посетителя сайта. Переходим к добавлению
поля со страницы со списком форм:
По нажатию на «+» перейдем к форме добавления поля. Создадим текстовое поле, в котором
будем хранить IP пользователя, заполнившего форму:
Обработчик этого поля поместим в файл init.php, который автоматически подключается
системой
до
выполнения
основного
кода
страницы.
Файл
расположен
в
разделе
/bitrix/php_interface:
function my_onAfterResultAddUpdate($WEB_FORM_ID, $RESULT_ID)
{
// действие обработчика распространяется только на форму с ID=4
if ($WEB_FORM_ID == 4)
{
// запишем в дополнительное поле 'user_ip' IP-адрес пользователя
© «1С-Битрикс», 2008
25
CFormResult::SetField($RESULT_ID, 'user_ip', $_SERVER["REMOTE_ADDR"]);
}
}
// зарегистрируем функцию как обработчик двух событий
AddEventHandler('form', 'onAfterResultAdd', 'my_onAfterResultAddUpdate');
AddEventHandler('form', 'onAfterResultUpdate', 'my_onAfterResultAddUpdate');
После заполнения формы значение поля будет сохранено. Отображение его в списке
результатов будет зависеть от настроек компонента, выводящего результат веб-формы: в
настройках должно быть отмечено поле
, и тогда в списке
результатов формы будет выведено:
© «1С-Битрикс», 2008
26
Навигация по разделам настроек веб-формы
Для навигации по разделам настройки веб-формы можно использовать два вида меню:
Меню,
расположенное
вверху
страниц
настройки
формы
(страниц
создания
и
редактирования формы, вопросов, статусов, полей формы);
Страница, на которой вы находитесь в данный момент подсвечена в меню (страница со
списком вопросов).
Со страницы со списком форм можно перейти к любой странице (списка вопросов, статусов,
результатов):
К просмотру результатов формы можно также перейти из меню доступа к содержанию и
структуре:
© «1С-Битрикс», 2008
27
Установка прав доступа при работе с веб-формами
Права доступа к веб-формам устанавливаются на различных уровнях:
 Права доступа к модулю Веб-формы устанавливаются как и ко всем модулям в форме
настройки модуля:
 Далее различают уровень доступа к самой веб-форме. Этот уровень определит право
доступа к самой веб-форме. Уровень доступа по умолчанию устанавливается в
настройках модуля на закладке Настройки
© «1С-Битрикс», 2008
28
Далее для каждой вновь создаваемой формы этот уровень может быть переопределен.
 Права на работу с результатами определяются в соответствии с настройками статусов.
Для каждого статуса определяются разные уровни доступа к обработке результатов. По
умолчанию полные права на работу со своим результатом имеет только его создатель:
 Переопределить можно как настройки статуса DEFAULT, так и создать другие статусы и
настроить их по желанию.
© «1С-Битрикс», 2008
29
Публикация веб-формы
Мы уже приводили пример публикации веб-формы с помощью компонента Заполнение вебформы. В этом разделе рассмотрим пример использования комплексного компонента Вебформы.
В
разделе
Общение
->
Веб-формы
созданию новой страницы по кнопке
(/communication/web-forms/)
переходим
к
(создать новую страницу в текущем разделе).
Располагаем комплексный компонент на странице и настраиваем его:
Обратите внимание, что с помощью комплексного компонента можно вывести в публичный
раздел весь набор страниц для работы с веб-формами и результатами ее заполнения, а
можно ограничить число страниц, отметив только нужные.
Из обязательных настроек вы указываете только ID веб-формы, остальные параметры
определяют
внешний
вид,
выводимые
данные
в
таблице,
настройки
кеширования,
управление режимом AJAX и т.д.
В публичном разделе право на просмотр страниц будет дано в соответствии с настройками
прав доступа.
Итак, в публичной части после заполнения формы пользователь, имеющий право на
просмотр результатов в статусе Принято будет переведен на страницу со списком
результатов:
© «1С-Битрикс», 2008
30
При создании формы Анкета посетителя сайта мы установили право на заполнение формы
для всех пользователей. А при добавлении статуса мы установили, что создатели своего
результата и группа Редакторы сайта могут работать с результатами в статусе Принято.
Отображение ссылок Изменить и Просмотр определяются настройками компонента. Ссылка
Удалить определяется настройками статуса.
© «1С-Битрикс», 2008
31