Плавающие подписи полей формы в Tilda
Как сохранить название поля видимым после ввода и настроить движение подписи.Подробнее о модеСвернуть описание
Плавающие подписи полей формы в Tilda
Как сохранить название поля видимым после ввода и настроить движение подписи.Что умеет мод
- Поднимает подпись при фокусе и сохраняет её поднятой в заполненном поле.
- Берёт название из заголовка поля Tilda или его placeholder.
- Позволяет настроить размеры, цвета и фон под поднятой подписью.
- Даёт настройки шрифта, скорости анимации и селектора форм.
Как подключить
Подготовьте названия
В Tilda задайте понятный заголовок поля или placeholder. Если оба пустые, мод не создаст подпись. Телефонные поля остаются со штатным оформлением.
Подберите оформление
Задайте размеры подписи в покое и наверху, цвета и шрифт. Фон под поднятой подписью должен совпадать с фоном поля, чтобы граница выглядела аккуратно.
Выберите формы
В «Расширенном» оставьте все формы или укажите CSS-селектор нужной области. Скопируйте код в T123 после формы и опубликуйте страницу.
Проверьте состояния
Проверьте пустое и заполненное поле, переход клавишей Tab, очистку текста и мобильную ширину. Подпись не должна пересекаться с введённым значением или сообщением об ошибке.
Что учитывать. Телефонные поля и их штатные маски, а также поля Uploadcare исключены из обработки. Если на тех же полях работают другие моды оформления, проверьте их совместный вид.
Вопросы и ограничения
Откуда берётся текст подписи?
Сначала из заголовка поля Tilda. Если его нет, используется placeholder. При отсутствии обоих поле пропускается.
Почему подпись не опускается после ввода?
Так и задумано: у заполненного поля она остаётся поднятой, чтобы не перекрывать значение.
Почему телефон выглядит как раньше?
Мод специально пропускает телефонные поля, включая штатную маску, и сохраняет их существующее оформление.
Нужно ли отдельно подключать шрифт?
Да, выбранный шрифт должен быть доступен на сайте. Укажите уже подключённое в Tilda семейство.
Доступ к конструктору
Мод доступен по подписке Pro. Войдите в аккаунт, чтобы настроить его и получить код. Действующие условия указаны в тарифах.
