Модификация поможет добавить свои иконки внутрь полей любой формы, настроить их расположение, отступы и цвет фона.
Инструкция (Развернуть↓)
Вариант #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. Если работаешь со стандартной формой, нужно отключить функцию "Оставлять подсказку видимой при клике на поле". Иначе код не будет работать.