Как сделать свою форму в Зеро блоке на Тильде? ​

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

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

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

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

Важно: Если форма не отправляется, проверьте настройки полей в стандартном блоке BF204N. В этом блоке не должно быть никаких полей — если они есть, удалите их и переопубликуйте страницу. Если не помогло, отключите в настройках профиля Тильды опцию «Участвовать в тестировании новых функций».

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

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

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

Имей в виду:

• Если на странице есть несколько кастомных форм, то у каждой такой формы должен быть обязательно свой блок BF204N и своя уникальная ссылка на кнопку отправки #sendform1, #sendform2 и т. д.;
• Чтобы всплывающие подсказки «Обязательное поле» не появлялись под другими полями, проверьте очередность слоёв элементов внутри зеро блока;
• Не нужно подключать приемщики данных к каждому полю внутри зеро блока. Их нужно подключать к стандартной форме BF204N;
• Если языки ошибок внутри форм не совпадает с языком сайта, проверьте настройки: Язык ошибок в формах и Настройках сайта → Ещё → Язык сайта;
• Если вы используете модификацию вместе с модификацией NLM020, и если зероблок с формой на телефоне длиннее по высоте, чем экран, вам нужно в настройках блока установить overflow-y на auto. Если форма или некоторые её поля не отображаются в поп-апе, включите опцию «Включите это, если в попапе не отображается форма» в настройках модификации NLM020.
• Данная модификация не работает в связке с полем калькулятор и корзиной;
• Пошаговую форму можно сделать с помощью модификации NLM080, в данной модификации такой возможности нет;
• Если на устройствах с 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" />

Инструкция по автозакрытию поп-апа после отправки формы:

• Если поп-ап с модификацией NLM020 — добавьте кнопке отправки класс закрытия, как указано в настройках NLM020.
• Если поп-ап с блоком T1093 — установите для кнопки отправки формы ссылку #closepopup.
• Важно: в обоих случаях поп-ап закроется сразу после нажатия кнопки, даже если форма не заполнена.