Плавающие подписи в Tilda: названия полей всегда видны

Подсказка внутри поля исчезает, когда человек начинает печатать. В длинной форме бывает трудно вспомнить: здесь просили компанию, должность или имя? Плавающая подпись сохраняет название поля над введённым значением.

Мод «Плавающие подписи полей» добавляет такое поведение к подходящим полям Tilda. Чтобы результат был удобным, важны не только движение подписи, но и её текст, размер и место внутри поля.

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

Начните с коротких названий: «Имя», «Компания», «Почта». Длинное пояснение лучше разместить рядом. Фраза «Укажите полное наименование вашей организации» плохо помещается в небольшую поднятую подпись.

Мод сначала использует заголовок поля в Tilda. Если заголовка нет, берёт placeholder — подсказку внутри. Если не заполнены оба, поле пропускается.

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

Выберите размер подписи в обычном и поднятом состоянии. Маленький текст должен читаться на телефоне. Не делайте его почти прозрачным ради лёгкости оформления.

Если подпись пересекает рамку поля, фон под ней должен совпадать с фоном самого поля. Иначе появится заметный прямоугольник другого цвета. Также оставьте достаточно места между верхней подписью и введённым ответом.

1. Задайте заголовки или подсказки нужным полям в Tilda.
2. Откройте конструктор и настройте шрифт, размеры и цвета.
3. Выберите все формы либо ограничьте нужную область в расширенных настройках.
4. Вставьте код в T123 после формы.
5. Опубликуйте страницу и проверьте поля в браузере.

Используйте уже подключённый на сайте шрифт. Одного названия семейства в настройке недостаточно, чтобы новый шрифт загрузился.

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

Особенно полезна проверка длинного ответа и сообщения об ошибке. Название не должно заходить на текст, а текст — на рамку. Если включено автозаполнение браузера, посмотрите, остаётся ли подпись на месте после подстановки значения.

Мод пропускает телефонные поля со штатной маской Tilda и поля Uploadcare. Это ожидаемое поведение. Не пытайтесь силой применить те же отступы к любому виду поля на странице.

Если вместе работают иконки, подсветка фокуса или другое оформление, проверьте их сочетание на одной форме. Для первого запуска проще менять один элемент оформления за раз. Так легче заметить, какой именно код сдвинул подпись или текст.

Читайте также: Иконки в полях формы Tilda: аккуратно и понятно · Маски ввода в Tilda: дата, время и свой формат.