Иконки в полях формы Tilda: аккуратно и понятно

Значок конверта помогает быстро узнать поле почты, а силуэт человека — поле имени. Но если иконка закрывает первые буквы ответа, форма становится только неудобнее.

Мод «Иконки в полях формы» позволяет использовать готовые значки или свои изображения. Разберём, как подобрать их к нужным полям, сохранить понятные названия и оставить достаточно места для текста.

Иконки хорошо работают в коротких знакомых формах: имя, почта, компания, сообщение. В сложной анкете они не заменяют точные подписи. Условный чемодан может означать и должность, и компанию, и опыт работы.

Сначала прочитайте форму без картинок. Если назначение полей понятно, значки могут дополнить оформление. Если непонятно, исправьте названия. Не заставляйте посетителя разгадывать каждый символ.

В конструкторе можно включить встроенный набор либо задать свои пары: слово в поле и ссылка на картинку. Собственная иконка имеет приоритет перед встроенной.

Мод ищет слово в имени переменной или placeholder без учёта регистра. Если подходят несколько правил, используется первое. Поэтому выбирайте понятные имена и не ставьте слишком общее правило перед точным.

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

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

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

Введите длинную почту и несколько строк сообщения. Посмотрите, где начинается текст, виден ли курсор и не прижимается ли ответ к значку. У многострочного поля значок не должен мешать первой строке.

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

Телефонные поля со штатной маской Tilda и поля Uploadcare пропускаются. Это ожидаемое ограничение. Если значка нет у обычного текстового поля, проверьте его имя, подсказку, порядок правил и доступность своей картинки.

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

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