Top.Mail.Ru
Loading...
No-code платформа для интеграции с российскими сервисами
Адаптер
Мы в соцсетях
Ответим на вопросы
Техподдержка
Образовательные курсы и гайды для IT-специалистов
Академия
Клиентам
О нас
Плагин для Тильды
Партнерам
Академия
Расширение
Техподдержка
Модификации
Профиль
Подписка
Партнерка
Новости +13
Шаблоны
Идеи
Услуги
NLM006 • ВРЕМЯ НАСТРОЙКИ: 1 МИНУТА

как добавить свою иконку в поле формы tilda?

Модификация поможет добавить свои иконки внутрь полей любой формы, настроить их расположение, отступы и цвет фона.
Инструкция (Развернуть↓)
Вариант #1 «При вводе текста в поле иконка пропадает»

1. Добавляешь стандартную форму или форму в Zero Block на страницу и добавляешь поле;

2. В генераторе указываешь имя переменной (VARIABLE NAME) и вставляешь его в форму;

3. Вставляешь ссылку на свою иконку.

Чтобы получить ссылку иконки на свою страницу, вставляем, к примеру, галерею GL12 и загружаем в неё изображение. Копируешь ссылку и вставляешь в генератор. Формат файла советуем использовать svg или png;

4. Выбираешь расположение: слева или справа;

5. Добавляешь блок Т123 и вставляешь в него сгенерированный HTML код. Повторяем шаги для нового поля, изменив имя поля и ссылку.

Вариант #2 «При вводе текста в поле иконка НЕ пропадает»

1. Повторяешь шаги из Варианта #1 c 1 по 4;

2. В выпадающем списке выбираешь "При вводе остается";

3. Настраиваешь отступ иконки внутри поля от краёв;

4. Настраиваешь бордер и фон;

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

Имей в виду:

1. Иконки подставляются только в типы полей:

  • Имя (Name);
  • Email (Email);
  • Телефон (Phone);
  • Поле для ввода одну строку (One line input field);
  • Поле для ввода в несколько строк (Multi-line text field);
  • Выпадающий список (Dropdown);
  • Дата (Date);
  • Время (Time);
  • Ссылка (Website);

2. Если в форме есть тип поля "Телефон (Phone)", то нужно отключить функцию "Автоматическая маска с кодом страны (Auto mask with country code)";

3. Если в форме есть тип поля "Дата (Date)" то нужно настроить в форме цвет стандартной иконки такой же как и цвет поля, а расположение нашей иконки должно быть только слева иначе стандартная иконка будет перекрывать нашу иконку;

4. Если работаешь со стандартной формой, нужно отключить функцию "Оставлять подсказку видимой при клике на поле". Иначе код не будет работать.
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 4
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 4 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 3
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 2
Создать аккаунт — это быстро и просто.
Войдите или зарегистрируйтесь на платформе
Шаг 1
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Копировать код
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1