Модификация позволяет создавать несколько форм с кастомным дизайном внутри Zero-блока и собирать их в единую форму отправки данных
Как работает модификация
Общие механики
Модификация объединяет несколько Zero-форм, расположенных в одном блоке, в единую форму отправки данных. Первая форма (нижняя в слоях) становится основной — именно к ней подключаются приёмщики данных и именно она отправляет заявку. Значения всех остальных форм собираются и передаются в неё через скрытые поля.
После загрузки блок оборачивается в общий контейнер, а модификация дожидается полной отрисовки Zero-форм Тильды. Затем она считывает поля всех дополнительных форм, создаёт для них скрытые поля внутри основной формы и синхронизирует их значения при каждом изменении. Поддерживаются все типы полей: текст, телефон с маской, чекбоксы, радиокнопки и загрузка файлов.
Стандартные кнопки отправки в дополнительных формах удаляются, а отправка всех форм запускается по клику на свою кнопку со ссылкой #submit или по нажатию Enter. Перед отправкой выполняется проверка полей через валидацию Тильды — если есть ошибки, заявка не отправляется, а ошибки подсвечиваются. После успешной отправки модификация очищает поля и, если форма находится внутри стандартного поп-апа, закрывает его.
Модификация подгружается синхронно, до отрисовки страницы, поэтому формы собираются ещё до того, как пользователь начнёт с ними взаимодействовать.
Подробнее: Кастомная мультиформа в Zero-блоке
Своё окно успешной отправки данных
Модификация позволяет заменить стандартное сообщение об успешной отправке на свой Zero-блок. Заданный блок скрывается, клонируется во всплывающее окно успеха и показывается после отправки формы. Кнопкам закрытия задаётся ссылка #close.
Подробнее: Своё окно успешной отправки данных
Свои условия проверки форм
Модификация позволяет задавать собственные правила валидации для полей ввода и выводить кастомное сообщение при ошибке. В качестве условия можно использовать как стандартную операцию (больше, меньше, содержит и др.), так и собственную функцию.
Подробнее: Свои условия проверки форм в Zero-блоке
Начало работы
Установка библиотеки
Для работы мультиформ необходимо подключить библиотеку модификаций в <head> сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции.
<script src="https://cdn.postnikovmd.com/tilda@1.6/mods.min.js"></script>Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией хэдера. Подробнее: Синхронизация обновлений в модификациях
Дальнейшая настройка производится по инструкции к каждому из вариантов:
Элементы
Ниже приведены элементы, из которых состоит мультиформа. Они задаются и настраиваются в интерфейсе Тильды.
* – обязательные элементы
Функции и параметры
Методы, с помощью которых можно управлять работой хэдера. Подгружаются асихнронно как функции объекта forms.
В качестве аргументов для настройки форм передаются следующие параметры:
Для валидации полей через forms.validate передаются следующие параметры:
События
Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы:
Запустить сторонний код после сборки мультиформы
Если код нужно выполнить после того, как мультиформа полностью соберётся, добавьте слушатель события formsinit, которое срабатывает после сборки всех форм на странице:
Если код нужно выполнить после того, как мультиформа полностью соберётся, добавьте слушатель события formsinit, которое срабатывает после сборки всех форм на странице:
window.addEventListener("formsinit", function(){ /*...*/ })Запустить другую модификацию после сборки мультиформы
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить поп-ап после сборки мультиформы можно через событие formsinit:
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить поп-ап после сборки мультиформы можно через событие formsinit:
popup.init(".uc-popup", { event: "formsinit" })Инициализация
Код инициализации мультиформы вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом:
<!--forms.js Кастомные формы в Zero-блоке. https://postnikovmd.com/mods/forms-->
<script>forms.init("#rec00000000")</script>Примеры использования
Мультиформа в Zero-блоке
В Zero-блок добавляются несколько форм, приёмщики данных подключаются к первой (нижней в слоях) форме, стандартные кнопки скрываются, а в блок добавляется своя кнопка со ссылкой #submit. В коде инициализации указывается ID блока:
<script>forms.init("#rec00000000")</script>Пример: Мультиформа в Zero-блоке
Мультиформа в поп-апе
Если мультиформа находится внутри стандартного поп-апа Тильды, она собирается так же, как обычная, и работает внутри окна. После успешной отправки модификация автоматически закрывает поп-ап. Инициализация не отличается от обычной мультиформы:
<script>forms.init("#rec00000000")</script>Пример: Мультиформа в поп-апе
Валидация полей в формах
Для проверки значений задаётся название поля и правило валидации. Например, чтобы поле quantity принимало только значения больше 5, а при нарушении показывало своё сообщение:
<script>forms.validate("quantity", { rule: "more", value: 5, message: "Введите число больше 5" })</script>Если к одному полю нужно применить несколько правил, добавьте в блок T123 ещё один код с другими условиями.
Пример: Валидация полей в формах
Распространенные проблемы
Форма не отправляется или заявки не приходят
Проблема может возникать, если на странице есть несколько вызовов forms.init для одного блока. Для её решения оставьте один forms.init на класс блока и разделите код в T123 по модам.
Поля формы заезжают друг на друга или форму «ведёт»
В горизонтальных формах ширина полей не учитывает скрытую кнопку отправки, из-за чего поля могут растягиваться. Разбейте поля на отдельные формы — по одному полю на форму.
Не объединяются формы из разных блоков
Мультиформа работает только в пределах одного Zero-блока. Чтобы собрать данные из форм в разных блоках, передавайте значения через скрытые поля и JavaScript.
Окно успешной отправки не появляется
Окно успеха forms.success работает только с Zero-формой. Убедитесь, что на странице есть хотя бы одна Zero-форма (её можно сделать скрытой), а код инициализации в блоке T123 расположен после блока с сообщением об успехе.
Если модификация все равно не работает
Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой.
