Своя форма в Зеро блоке

1. Собери в зеро блоке свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;

2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;

3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;

4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.

5. Настрой внешний вид всплывающего попапа с сообщением об успешной отправке формы (Цвет фона окна, Цвет заголовка, Цвет текста, Цвет иконки, Цвет галочки в иконке, Цвет фона кнопки, Цвет текста кнопки, Цвет крестика для закрытия окна).

6. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.

7. Добавь блок Т123 и вставь в него сгенерированный HTML код.

Имей в виду:

• Если на странице есть несколько кастомных форм, то у каждой такой формы должен быть обязательно свой блок BF204N и своя уникальная ссылка на кнопку отправки #sendform1, #sendform2 и т.д.;
• Если кнопка отправки формы не срабатывает, отключи в профиле Tilda опцию "Участвовать в тестировании новых функций";
• Чтобы всплывающие подсказки «Обязательное поле» не появлялись под другими полями, проверь очередность слоёв элементов внутри зеро блока;
• Не нужно подключать приемщики данных к каждому полю внутри зеро блока. Их нужно подключать к стандартной форме BF204N;
• Если языки ошибок внутри форм не совпадает с языком сайта, проверьте настройки: Язык ошибок в формах и Настройках сайта → Ещё → Язык сайта;
• Данная модификация не работает в связке с полем калькулятор и корзиной;
• Пошаговую форму можно сделать с помощью модификации NLM080, в данной модификации такой возможности, к сожалению, нет;
• Если вы используете модификацию вместе с модификацией NLM020, и если зероблок с формой на телефоне длиннее по высоте, чем экран, вам нужно в настройках блока установить overflow-y на auto.
• Если на устройствах с iOS форма при заполнении приближается и это мешает восприятию контента, в head сайта добавь код:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />