Урок 11. Собираем функциональность: формы и календарь

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

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

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

Веб-форма — это инструмент для сбора данных от посетителей сайта: заявок, контактной информации и ответов на вопросы. Веб-формы в 1С-Битрикс: Управление сайтом работают в двух режимах.

Упрощенный режим — это конструктор «заполнил и отправил». Он подходит для форм обратной связи, заявок и простых опросов. Вы создаете поля, получаете ответы — и все.

Расширенный режим — это уже целый бизнес-процесс. Он позволяет назначать статусы, создавать вычисляемые поля и настраивать сложную логику.

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

Начнем создание формы.

Создаем форму для заявок

1. Перейдите в административный раздел.
2. Откройте Сервисы > Веб-формы > Настройка форм.
3. Нажмите Создать.
   
4. Заполните название формы, например Заказать звонок.
   
   При желании можно сразу настроить дополнительные параметры:
   • В блоке Меню результатов в административном разделе заполните поля Название ссылки на результаты. Если этого не сделать, ссылка на ответы формы не появится в меню Сервисы > Веб-формы > Результаты.
   • Если нужно получать результаты заполнения формы на email, установите флажок Отправлять результаты по email. Система автоматически сгенерирует почтовый шаблон.
   • На закладке Ограничения можно ограничить число ответов.
   • Во вкладке Доступ укажите, кто имеет право заполнять форму.
5. Сохраните форму.

После сохранения форма появится в списке. Теперь можно добавлять вопросы.

Добавляем вопросы в форму

1. В списке форм найдите созданную форму.
2. В столбце Вопросы нажмите на значок +, чтобы добавить новый вопрос.
   
3. В строке Вопрос напишите, что нужно узнать: имя, телефон, email.
4. Если поле должно быть обязательным, отметьте это.
5. Выберите Тип поля. Например, Строка для имени и телефона, Адрес e-mail для почты.
   
6. При необходимости на вкладке Валидаторы можно настроить проверку ввода.
7. Нажмите Сохранить.

Повторите для каждого поля формы.

Публикуем форму на странице

После создания форму нужно вывести на страницу. Это делают через компонент:

1. Перейдите в нужный раздел в публичной части сайта.
2. Создайте страницу мероприятия. Оставьте включенной опцию перехода к редактированию страницы.
3. После мастера создания страницы откроется визуальный редактор.
4. В панели компонентов найдите компонент Веб-форма.
5. Добавьте компонент в нужное место страницы.
   
6. Откроются настройки компонента. Найдите секцию Основные параметры и в поле Источник данных выберите созданную форму.
   
7. Сохраните компонент и страницу.
8. Откройте страницу как посетитель и отправьте тестовую заявку.
   

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

Добавляем календарь

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

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

Тип календаря определяет, для чего он будет использоваться. Например, календарь компании содержит события для всех сотрудников, личный календарь — для отдельных пользователей.

Если нужный тип уже есть, можно сразу переходить к добавлению календаря на страницу. Если нет — создайте его.

Создаем тип календаря

1. Перейдите в административный раздел.
2. Откройте Настройки > Настройки продукта > Настройки модулей > Календарь событий.
3. Перейдите на вкладку Типы календарей и нажмите Добавить новый тип.
   
4. Заполните название и настройте права доступа для этого типа.
   
   
5. Сохраните изменения.

Тип календаря готов. Осталось вывести календарь на страницу.

Публикуем календарь на странице

1. Откройте страницу мероприятия в публичной части сайта.
2. На панели управления выберите Изменить страницу > В визуальном редакторе.
3. В панели компонентов найдите компонент Календарь событий 2.0 и перетащите его в нужное место страницы.
   
4. В настройках компонента выберите шаблон и тип календаря.
   
5. Сохраните компонент и страницу.

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

Добавляем событие в календарь

1. Нажмите кнопку Создать в левом верхнем углу календаря.
2. В слайдере откроется форма добавления нового события.
   

Вы можете указать название события, задать дату и время, настроить повторяемость, указать место проведения. По ссылке Дополнительно откроется нижняя часть слайдера. Здесь можно заполнить описание события, установить напоминание и цвет.

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

Документооборот: если нужна проверка перед публикацией

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

Для таких цепочек используют документооборот. Он ведет материал по этапам: черновик, проверка, публикация. Пока материал в черновике, он не показывается на сайте. После проверки статус повышают, в конце — публикуют.

Документооборот работает для статических страниц и для материалов инфоблоков.

Для статических страниц статус согласования можно посмотреть в административной части: Контент > Документооборот > Документы.

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

Двойной статус появляется автоматически, когда новость возвращается из статуса Опубликован в более низкий статус.