Made on
Tilda
03
Модуль 2 · Занятие 2
Превращаем модель данных в страницу с формой, которую можно открыть и заполнить
Программа занятия
От сценария к экранам. Стандартные блоки, Zero Block и Вайб-блок. Форма: типы полей, обязательность, имена переменных. Сборка черновика и проверка на четырёх ширинах.
Результат: черновик страницы MVP
Сверка полей с моделью данных. Валидация на клиенте и на сервере. Тексты сообщений об ошибках. Скрытое поле с источником. Публикация и пробная отправка.
Результат: опубликованная страница с формой
От модели к экрану
| Шаг сценария из урока 2 | Что нужно на экране | Чем собираем |
|---|---|---|
| Заходит на страницу | Первый экран: что за услуга и кнопка | Обложка или Zero Block |
| Смотрит услуги | Карточки с названием, составом и ценой | Стандартный блок «Карточки» |
| Нажимает «Записаться» | Кнопка-якорь на форму | #form |
| Заполняет форму | Поля ровно из модели данных | Блок формы |
| Получает подтверждение | Сообщение об успехе после отправки | Настройка блока формы |
Если шага нет в сценарии — на странице его быть не должно. Лишний блок это ещё один экран для проверки и ещё одно поле, которое некуда сохранить.
Сколько страниц нужно MVP
Все шаги сценария — блоки на одной странице, переходы — якоря. Меньше навигации и меньше мест, где человек может потеряться.
…у шага своя задача и свой адрес: «Спасибо» с инструкцией, оферта, политика обработки персональных данных.
Красоты, привычки «так принято» и будущего раздела, которого ещё нет в сценарии.
Структура
01
Меню. Логотип и два-три якоря. Кнопка «Записаться» справа.
02
Первый экран. Что за услуга, для кого, кнопка на форму.
03
Услуги. Карточки: название, что входит, цена, длительность.
04
Как это работает. Три-четыре шага от заявки до встречи — снимает вопросы до формы.
05
Форма. Якорь #form, поля ровно из модели данных.
06
Подвал. Контакты и ссылка на политику обработки данных.
Шесть блоков — это весь интерфейс MVP. Остальное добавляется только тогда, когда появляется в сценарии.
Выбор инструмента
| Стандартные блоки | Zero Block | |
|---|---|---|
| Скорость | Минуты: выбрал блок, заменил тексты | Десятки минут: холст пустой, всё ставится руками |
| Адаптив | Готовый, за телефон отвечает Tilda | Настраивается вручную для каждой ширины |
| Гибкость | В рамках шаблона блока | Любая композиция, слои, анимации |
| Когда брать | Меню, карточки, шаги, форма, подвал | Нестандартный первый экран, уникальная инфографика |
Третий вариант
Блок принимает готовый HTML и CSS целиком и рендерит как есть. Поверх даёт панель: выбрал элемент — правишь текст, ссылку, цвет, отступы.
Zero Block разбирает дизайн на свои примитивы. Вайб-блок держит ваш код без изменений — и при этом остаётся редактируемым в панели.
Когда вёрстка уже есть или её быстрее написать кодом, но править тексты потом должен человек, который код не трогает.
Две особенности: наведение в панели не редактируется — эффекты :hover живут только в CSS; и кнопка должна быть тегом <a>, иначе панель не даст ей поле «Ссылка».
Демонстрация · редактор Tilda
01
Новая страница. Создаём и сразу даём адрес латиницей — он попадёт в ссылку.
02
Блоки из библиотеки. Обложка, карточки, шаги, форма, подвал. Порядок меняется перетаскиванием.
03
Тексты. Меняем демо-текст сразу: «Lorem ipsum» на защите читается как незаконченная работа.
04
Якорь на форму. В настройках блока формы ID form, в кнопке первого экрана ссылка #form.
05
Поля формы. Контент → список полей: тип, подпись, обязательность, имя переменной.
06
Предпросмотр. Переключатель ширины вверху справа: смотрим телефон сразу, а не в конце.
Всё это — настройки интерфейса. Ни строчки кода на этом шаге не нужно.
Форма
Имя, email, телефон, список, дата, чекбокс, текст, скрытое поле. Для услуги берите список, а не свободный текст: иначе в базу приедут «консультация», «Консультация» и «консульт».
Tilda не даст отправить форму с пустым обязательным полем. Каждая звёздочка — барьер для пользователя, ставьте её осознанно.
Подпись говорит, что вводить. Плейсхолдер показывает формат: +7 900 000-00-00.
Под этим ключом значение уйдёт в webhook. Это связующее звено с моделью данных — задаём вручную, не оставляем автоимя.
Добавляется в интерфейсе: блок формы → Контент → Добавить поле → «Скрытое поле». Уходит с формой, но пользователю не видно.
Обязательное поле consent. Форма, которая собирает имя и телефон без согласия на обработку данных, — юридический риск.
Имена переменных
| Плохо | Хорошо | Почему |
|---|---|---|
| Name_2, Input_345 | name | Автоимена не читаются и расходятся с моделью: на уроке 5 придётся гадать, что это за поле |
| Желаемая дата | date | Кириллица и пробелы ломают интеграции — ключ приедет перекодированным |
| E-mail, Mail | Одно поле — одно имя во всех слоях: в форме, в webhook, в колонке базы | |
| comment1, comment_new | comment | Номер появляется сам при копировании блока. Проверяйте имена после дублирования формы |
UX формы
Проверка
Маленький или старый телефон. Самое узкое, что реально встречается.
Обычный телефон. На этой ширине форму заполняет большинство.
Крупный телефон и узкий планшет. Ломается чаще всего именно здесь.
Ноутбук. Смотрим, что текст не растянулся в одну строку на весь экран.
Мини-артефакт урока 3
Вопросы для самопроверки
01
По какому признаку вы берёте Zero Block вместо стандартного блока?
02
Зачем задавать имя переменной вручную, если Tilda подставляет своё?
03
Почему скрытое поле не подходит для хранения ключа?