Динамические формы

Динамические формы – формы внутри баннера, с возможностью подгрузки дополнительных элементов форм на основе введенных пользователем данных.

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

Конечные результаты форм могут отправляться по вебхуку выгрузки форм.

Оглавление

• Заведение сабтудея с поддержкой динамических форм

• Механизм работы вебхук-интеграции

• Элементы формы

  • Заголовок (title)

  • Барабан (picker)

  • Чекбокс (checkbox)

  • Поле ввода текста (text)

  • Поле ввода эл.почты (email)

  • Поле ввода телефона (phone)

  • Поле ввода даты (date)

  • Кнопка завершения редактирования формы (submit)

  • Примечание (notice)

  • Сообщение после заполнения формы (alert)

  • Фото (photo)

• Запрос клиентом следующих элементов формы

Заведение сабтудея с поддержкой динамических форм

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

Механизм работы webhook - интеграции

При посещении пользователем страницы внутри баннера с динамической формой происходит запрос начальной формы. Вам приходит название запрашиваемой формы:

{
  formName: 'form123'
}

В ответ сервер должен отправить содержание формы:

{
  "success": true,
  "name": "form123",
  "form": {
    "alertText": "We have received your feedback.",
    "alertTitle": "Thanks for participating",
    "title": "Запишитесь сегодня!",
    "elements": [...],
  }
}

• success – boolean, успех отправки формы

• name – название запрашиваемой и отправляемой формы

• form

  • alertText и alertTitle – заголовок и текст сообщения после заполнения формы

  • title – заголовок формы

  • elements – массив с элементами формы

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

Элементы формы

Заголовок (title)

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

Передается в js

"title": "Запишитесь сегодня!"

Барабан (picker)

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

Передается в elements

{
  "name": "service",
  "placeholder": "Выберите услугу",
  "required": true,
  "type": "picker",
  "title": "Выберите услугу",
  "list": ["Терапевт", "Ортопед", "Массажист"],
  "nextElementsNames": ["date"]
}

• name – идентификатор элемента

• placeholder – плейсхолдер для поля ввода

• required – true/false, является для данный элемент обязательным для заполнения

• type – тип элемента (picker)

• title – заголовок элемента

• list – массив из строк с вариантами выбора

• nextElementsNames – подгрузка следующих элементов формы

Чекбокс (checkbox)

Чекбокс.

Передается в elements

{
  "name": "checkbox",
  "title": "Перезвоните мне",
  "type": "checkbox"
}

• name – идентификатор элемента

• type – тип элемента (checkbox)

• title – надпись справа от чекбокса

Поле ввода текста (text)

Поле для ввода текста.

Передается в elements

{
  "name": "username",
  "placeholder": "Имя",
  "title": "Введите имя",
  "required": true,
  "type": "text"
}

• name – идентификатор элемента

• placeholder – плейсхолдер для поля ввода

• required – true/false, является для данный элемент обязательным для заполнения

• type – тип элемента (text)

• title – заголовок элемента

Поле ввода эл.почты (email)

Поле с форматированием электронной почты.

Передается в elements

{
  "name": "email",
  "title": "Эл.почта",
  "placeholder": "Введите адрес",
  "required": true,
  "type": "email"
}

• name – идентификатор элемента

• placeholder – плейсхолдер для поля ввода

• required – true/false, является для данный элемент обязательным для заполнения

• type – тип элемента (email)

• title – заголовок элемента

Поле ввода телефона (phone)

Поле с форматированием телефонного номера.

Передается в elements

{
  "name": "phone",
  "title": "Телефон",
  "placeholder": "Введите телефон",
  "required": true,
  "type": "phone"
}

• name – идентификатор элемента

• placeholder – плейсхолдер для поля ввода

• required – true/false, является для данный элемент обязательным для заполнения

• type – тип элемента (phone)

• title – заголовок элемента

Поле ввода даты (date)

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

Передается в elements

{
  "name": "dob",
  "title": "Дата рождения",
  "placeholder": "Выберите дату рождения",
  "required": true,
  "type": "date"
}

• name – идентификатор элемента

• placeholder – плейсхолдер для поля ввода

• required – true/false, является для данный элемент обязательным для заполнения

• type – тип элемента (text)

• title – заголовок элемента

Кнопка завершения редактирования формы (submit)

Кнопка завершения заполнения формы, при нажатии данные отправляются на сервер и появляется сообщение.

Передается в elements

{
  "name": "submitBtn",
  "placeholder": "Записаться",
  "disabledPlaceholder": "Заполните поля",
  "type": "submit"
}

• name – идентификатор элемента

• placeholder – надпись на кнопке

• disabledPlaceholder – надпись на кнопке в заблокированном состоянии ( когда пользователь не ввел данные в обязательные поля)

• type – тип элемента (submit)

Примечание (notice)

Примечание, надпись мелким шрифтом.

Передается в elements

{
  "name": "notice",
  "placeholder": "Заполняя форму, вы соглашаетесь с условиями обработки персональных данных.",
  "type": "notice"
}

• name – идентификатор элемента

• placeholder – надпись

• type – тип элемента (notice)

Сообщение после завершения заполнения формы (alert)

Сообщение, которое отображается после нажатия на сабмит.

Передается в form

"alertText": "We have received your feedback. Thanks for participating.",
"alertTitle": "Thanks for participating",

• alertTitle – заголовок сообщения

• alertText – тело сообщения

Фото

Данный элемент позволяет прикрепить фото из шалереи телефона

{
  "name": "receipt-photo",
  "title": "Приложите фото чека",
  "type": "photo",
  "maxPhotos": 1
}

• name - идентификатор поля

• title - заголовок

• maxPhotos - максимальное количество фото, которое можно прикрепить (сейчас поддерживается только 1)

При отправке фото, в этом поле будет передан список файлов в BASE64 кодировке. Пример:

{
    "data": {
        "receipt-photo": ["XXXXXXXXXXXXXXXX"]
    }
}

Запрос клиентом следующих элементов формы

При выборе значения в барабане и наличии в барабане массива с идентификаторами следующих полей nextElementsNames происходит дозапрос от сервера следующих элементов формы.

Сервер принимает JSON с введенными пользователем значениями в поле data, где ключ – идентификатор элемента как в поле name в отправленных элементах:

{
  formName: 'form123',
  data: {
    checkbox: true,
    text: 'Some text',
    phone: '[phone]',
    email: '[e-mail]',
    date: '25 января',
    picker: 'Ортопед'
  },
  nextElementsNames: [ 'next_services' ]
}

В ответ сервер отправляет следующие элементы форм, например:

{
  "name": "form123",
  "success": true,
  "elements": [
    {
      "name": "date",
      "placeholder": "Выберите дату",
      "required": true,
      "type": "picker",
      "title": "Выберите дату",
      "list": [
        "26 мая",
        "27 мая",
        "28 мая",
        "29 мая",
        "30 мая",
        "31 мая",
      ],
      "nextElementsNames": ["time"]
    }
  ]
}

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

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

Конечные результаты форм могут отправляться по вебхуку выгрузки форм.