Как добавить свою иконку в поле формы 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. Если работаешь со стандартной формой, нужно отключить функцию «Оставлять подсказку видимой при клике на поле». Иначе код не будет работать.