Подсветка активного поля в Tilda: рамка, линия и мягкое свечение

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

В конструкторе есть четыре варианта: свечение, граница, подчёркивание и подъём. Разберём, как выбрать спокойное выделение и проверить, что оно не спорит с подписями и сообщениями об ошибках.

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

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

Переключите доступные варианты в конструкторе и нажмите на поле в превью. Для формы с явными границами может подойти изменение рамки, для лёгкого оформления — подчёркивание. Свечение и подъём лучше примерять на фоне, близком к фону будущего блока.

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

Задайте акцентный цвет и длительность перехода. Доступные параметры толщины и прозрачности зависят от выбранного эффекта. Тонкая светлая линия может исчезать на белом фоне, а широкое кольцо — заходить на подпись или соседнее поле.

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

В расширенных настройках укажите селектор форм. Можно оставить все формы Tilda или ограничить применение формой внутри конкретного блока. Второй вариант удобен, если на странице есть и короткая подписка, и большая анкета с другим оформлением.

Разместите полученный код в T123 после формы и опубликуйте страницу. Затем откройте остальные формы на этой же странице: проверьте, не попали ли они под слишком широкий выбор. Сервис приёма данных и сами поля ради визуального эффекта менять не нужно.

На компьютере начните с первого поля и переходите клавишей Tab. В каждый момент должно быть понятно, какое поле активно. Вернитесь назад сочетанием Shift и Tab и убедитесь, что выделение следует за фокусом, а не остаётся на последнем нажатом элементе.

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

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

• Выделение видно и при клике, и при переходе клавиатурой.
• Подписи, иконки и подсказки не закрываются рамкой.
• После ухода из поля не остаётся лишний акцент.
• Ошибка читается отдельно, а поле можно снова выбрать и исправить.

Для проверки внешнего вида на рабочем сайте не требуется отправлять вымышленные заявки.

Читайте также: Плавающие подписи в Tilda: названия полей всегда видны · Иконки в полях формы Tilda: аккуратно и понятно.