Современные формы бронирования

В этой статье рассказывается, как создать, настроить и опубликовать формы поиска, услуг, сотрудника и с тегами в Bookly.

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

Если нужна помощь с выбором формы, см. Выбор формы записи. О записи через диалог в чате читайте в статье Форма записи AI Assistant.

В Bookly также есть Форма отмены бронирования для отмены записей и Форма оплаты для оплаты по прямой ссылке. Их настройка описана отдельно: Форма отмены бронирования и Форма оплаты.

Перед началом

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

Для формы с тегами также назначьте теги сервисам в Bookly > Сервисы. См. раздел Форма с тегами ниже.

Создание современной формы бронирования

1. Перейдите в Bookly > Внешний вид.
2. Выберите Форма поиска, Форма услуг, Форма сотрудника или Форма с тегами, затем нажмите Добавить новую форму.
3. Нажмите на элемент в области предпросмотра, чтобы изменить его текст или настройки на панели справа. Переключайтесь между шагами бронирования с помощью вкладок над предпросмотром.
4. Откройте меню с тремя точками в редакторе формы и выберите Настройки, чтобы задать название и внешний вид формы.
5. Нажмите Сохранить. Позже можно вернуться в редактор и изменить описанные ниже настройки.

Сохранение и публикация формы бронирования

1. Сохраните форму и нажмите Назад, чтобы вернуться к списку форм.
2. Найдите карточку своей формы и скопируйте её шорткод через меню карточки.
3. Добавьте шорткод на страницу или в запись WordPress. В блочном редакторе WordPress используйте блок Шорткод.
4. Откройте предпросмотр страницы, затем опубликуйте или обновите её, когда форма будет готова.

Например, шорткод может выглядеть так: [bookly-search-form my-form] или [bookly-services-form my-form-413]. Скопируйте шорткод, созданный для вашей формы, а не один из этих примеров.

Slug — это идентификатор формы, например my-form в первом примере. После сохранения его можно найти в разделе Настройки формы.

Можно создать отдельные формы для конкретных сервисов или сотрудников и разместить их на разных страницах. Все записи, оформленные через эти формы, будут отображаться в одном и том же календаре Bookly.

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

Настройка формы бронирования

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

Подписи и элементы формы

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

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

Настройки и внешний вид формы

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

Во всех современных формах бронирования настройки внешнего вида также позволяют:

• Включить адаптивную сетку карточек.
• Сделать фон формы прозрачным.
• Изменить положение фильтров и календаря.
• Настроить скругление углов и тени карточек.
• Скрыть границы формы.

Для дополнительной настройки оформления откройте то же меню с тремя точками и выберите Пользовательские CSS.

После внесения изменений нажмите Сохранить.

Первоначальный вид формы бронирования

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

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

Доступные даты в календаре

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

• Отображать даты согласно расписанию: показываются рабочие дни сотрудников, даже если на этот день не осталось свободных временных интервалов.
• Отключить даты без доступных временных интервалов: дни без свободных временных интервалов затемняются. В этом режиме время загрузки зависит от количества записей, сотрудников, сервисов и локаций.

Внешний вид и содержимое карточки сервиса

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

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

Скрытые сервисы

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

Режим отображения карточек

На той же панели Режим отображения карточек определяет, какие карточки показывает форма поиска:

• Показывать карточки только с временными интервалами: показывает только комбинации сервиса, сотрудника и места, у которых на выбранный день есть свободные временные интервалы.
• Показывать все доступные карточки: также показывает карточки без свободных временных интервалов. Для таких карточек клиент увидит сообщение «Нет доступных временных интервалов».

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

На последнем шаге бронирования включите Добавить в календарь, чтобы клиенты могли добавлять свои записи в календари Google, Outlook, Apple или Yahoo.

Формы для конкретной категории, сотрудника или сервиса

В форме услуг и форме сотрудника можно выбрать, какие категории, сервисы или сотрудники будут показаны клиентам:

1. Откройте форму в Bookly > Внешний вид.
2. Выберите нужный шаг и нажмите на карточку категории, сервиса или сотрудника в предпросмотре.
3. На панели справа выберите Пользовательские и укажите элементы для отображения.
4. Нажмите Сохранить.

Скрытие шагов «Категории» или «Сервисы»

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

Видеоурок: форма услуг

Посмотрите, как настроить форму услуг:

Форма с тегами

Форма с тегами позволяет клиентам сужать список сервисов на одном или нескольких шагах фильтрации. Назначьте теги сервисам в Bookly > Сервисы, затем выберите, какие теги предложить на каждом шаге формы.

Например, на первом шаге можно предложить Волосы, Ногти и Массаж, а на втором — Полный и Экспресс. Если клиент выберет Массаж и Экспресс, форма покажет только сервисы с обоими тегами.

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

Создание шагов фильтрации

1. В Bookly > Внешний вид выберите Форма с тегами и нажмите Добавить новую форму.
2. На вкладке Теги нажмите Добавить подраздел.
3. Выберите теги, которые нужно показать на этом шаге фильтрации.
4. Добавьте ещё подразделы, если нужны дополнительные шаги фильтрации. Чтобы убрать тег с шага, нажмите на него в подразделе.
5. Нажмите Сохранить.

Основные настройки

Для шагов выбора тегов настройте следующие параметры:

• Заголовок раздела: текст, который клиент видит на этом шаге.
• Разрешить пропуск: позволяет клиенту пропустить шаг выбора тега.
• Название кнопки “Пропустить”: текст на кнопке пропуска.
• Ширина / Высота заголовка / Высота текста: размер карточек тегов.

Название, описание и изображение каждого тега настраиваются в Bookly > Сервисы.

Когда форма будет готова, сохраните её и добавьте шорткод на страницу.

Проверка формы бронирования

Прежде чем поделиться страницей с клиентами:

1. Откройте её как посетитель и проверьте форму на компьютере и телефоне.
2. Убедитесь, что показаны нужные сервисы и сотрудники, а скрытые поля используют ожидаемые значения по умолчанию.
3. Пройдите тестовое бронирование до последнего шага.
4. Проверьте, что запись правильно отображается в календаре Bookly.

Частые вопросы

• Как скрыть поля категории, сервиса или сотрудника в форме записи?
• Как убрать шаг оплаты из формы записи?
• Все шорткоды