О НАС
КЛИЕНТАМ
ПАРТНЁРАМ
СЛЕДИТЕ ЗА НАМИ
ОТВЕТИМ НА ВОПРОСЫ
В ЧАТ-БОТЕ:
В ЧАТ-БОТЕ:
Время прочтения: 10 минут
Сентябрь, 2023
Сочетание модификации с модом «Своя форма в Зеро блоке» от Нолим
Привет. Сегодня поговорим про мод NLM001 "Своя уникальная форма". Это один из первых модов от Нолим, и несмотря на то, что мы уже выпустили более 90 крутых и полезных модов, мод "Своя уникальная форма" остается одним из самых популярных блоков. И не зря, ведь мод позволяет модифицировать самый важный элемент сайта, с которым взаимодействуют пользователи — форму.
В этой статье мы собрали примеры того, как можно сочетать мод "Своя уникальная форма" с другими модификациями, чтобы улучшить свой сайт.
Содержание
В этой статье мы собрали примеры того, как можно сочетать мод "Своя уникальная форма" с другими модификациями, чтобы улучшить свой сайт.
Содержание
Свой popup в Zero Block
NLM020 "Свой popup в Zero Block"
Попап довольно сильный инструмент привлечения драгоценного внимания пользователя, и почему бы не воспользоваться этой функцией, создав блок с индивидуальным контентом и со своей уникальной формой.
Для этого можно использовать мод NLM020 "Свой popup в Zero Block". С помощью этого мода вы сможете создать индивидуальный дизайн и превратить блок его в попап. А совместно с модом NLM001 "Своя уникальная форма" вы сможете настроить и разместить форму под ваш контент.
Попап довольно сильный инструмент привлечения драгоценного внимания пользователя, и почему бы не воспользоваться этой функцией, создав блок с индивидуальным контентом и со своей уникальной формой.
Для этого можно использовать мод NLM020 "Свой popup в Zero Block". С помощью этого мода вы сможете создать индивидуальный дизайн и превратить блок его в попап. А совместно с модом NLM001 "Своя уникальная форма" вы сможете настроить и разместить форму под ваш контент.
Пример
Инструкция
Сначала создадим блок и настроем форму, а после сделаем из него попап.
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
1. Создаём popup в Zero Block:
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
6. Добавь блок Т123 и вставь в него сгенерированный HTML код.
Итак мы создали блок, теперь с помощью мода сделаем из нашего блока, попап-блок.
1. Создаём popup в Zero Block:
- Цвет фона — прозрачный.
- Window container height — 100%
- Шейп (на фон попапа), ширина и высота — 100%
- Container — Window container
- Выравнивание X — 0, Y — 0
- Opacity (Прозрачность) — 35% или любое другое значение
- Цвет #0
Имей в виду:
- Можно не создавать шейп для фона, а воспользоваться настройками в генераторе;
- Если не появляются изображения, отключи у них Lazy Load и переопубликуй страницу;
2. Вставляем в генератор id Zero Block в котором сделали popup;
3. В генераторе указываем ссылку через хештег (Например #open), затем привязываем ее к элементу, который будет «вызывать» (открывать) popup;
4. В генераторе указываем класс для закрытия попапа, который будет привязан ко всем элементам, отвечающим за закрытие;
Чтобы указать класс у элемента в Тильда, нажимаем на него правой кнопкой мыши и выбираем из списка предпоследнюю строку «Add CSS Class Name», далее, справа в настройках указываем тот же класс что и в генераторе;
3. В генераторе указываем ссылку через хештег (Например #open), затем привязываем ее к элементу, который будет «вызывать» (открывать) popup;
4. В генераторе указываем класс для закрытия попапа, который будет привязан ко всем элементам, отвечающим за закрытие;
Чтобы указать класс у элемента в Тильда, нажимаем на него правой кнопкой мыши и выбираем из списка предпоследнюю строку «Add CSS Class Name», далее, справа в настройках указываем тот же класс что и в генераторе;
5. Копируем сгенерированный HTML код и вставляем его в блок Т123.
Готово. Мы создали попап-блок используя в связке 2 мода от Нолим.
Вот что у нас получилось:
ОТПРАВИТЬ
АНКЕТА
1. Оцените, пожалуйста, насколько актуальной вам кажется возможность измерения качества в режиме онлайн? (от 1 до 5, где 1-совсем не актуально, а 5-очень актуально)
2. Насколько часто в вашей практике возникают проблемы с предоставлением информации о сроках и статусе поставки?
3. Расскажите, пожалуйста, каким образом вы сейчас осуществляете контроль поставки? Какими инструментами для этого пользуетесь?
Сообщение об успешной отправке!
Эффект состояния полей в форме
NLM071 "Эффект состояния полей в форме"
В хорошей форме поля должны быть отзывчивыми, чтобы пользователь мог понять, что от него требуется и правильно ли он все заполнил. Иногда это может повлиять на эффективность формы.
Чтобы сделать вашу форму более понятной и эффективной, вы можете использовать модификацию "Эффект состояния полей в форме". Этот мод поможет настроить эффект активации полей в форме, как при их заполнении, так и при нажатии на них.
В сочетании с модом "Своя уникальная форма" ваша форма будет уникальной благодаря вашему дизайну и более отзывчивой благодаря моду "Эффект состояния полей в форме".
В хорошей форме поля должны быть отзывчивыми, чтобы пользователь мог понять, что от него требуется и правильно ли он все заполнил. Иногда это может повлиять на эффективность формы.
Чтобы сделать вашу форму более понятной и эффективной, вы можете использовать модификацию "Эффект состояния полей в форме". Этот мод поможет настроить эффект активации полей в форме, как при их заполнении, так и при нажатии на них.
В сочетании с модом "Своя уникальная форма" ваша форма будет уникальной благодаря вашему дизайну и более отзывчивой благодаря моду "Эффект состояния полей в форме".
Пример
— Поле заполнено
— Поле активно
— Поле неактивно
Инструкция
Сначала создадим блок и настроем форму, а после настроем эффект состояния для полей в форме.
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
1. Для того чтобы настроить эффект состояния полей формы, в генераторе указываешь:
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
6. Добавь блок Т123 и вставь в него сгенерированный HTML код.
Итак мы создали блок с формой, теперь с помощью мода мы добавим эффект состояний для полей в форме.
1. Для того чтобы настроить эффект состояния полей формы, в генераторе указываешь:
- «id блока с формой» – Блока в котором необходимо кастомизировать поля;
- «Активность бордера» – Выбираешь как будет подсвечиваться бордер, при нажатии на поле;
- «Толщина бордера» – Выбираешь толщину бордера, при нажатии на поле;
- «Цвет бордера при нажатии»;
- «Цвет бордера при заполнении» – В этом поле можно настроить изменение цвета бордера, во время его заполнения;
- «Цвет фона при нажатии» – Выбираешь цвет фона поля, при нажатии на него;
- «Цвет фона при заполнении» – Настраиваешь изменение фона поля, во время его заполнения
- 2. Копируешь сгенерированный HTML код и вставляешь его в блок Т123;
Имей в виду:
В случае, если ты выбрал полную обводку или обводку слева, в настройках формы отключаешь галку «Оставлять подсказку видимой при клике на поле», иначе бордер будет наезжать на подсказку;
Своё окно успешной отправки формы из Зеро блока
NLM056 "Своё окно успешной отправки формы из Зеро блока"
Окно успешной отправки заявки является важным этапом процесса подачи заявки, поскольку оно информирует пользователя о том, что его заявка успешно отправлена, и предоставляет инструкции для дальнейших действий. Стандартное окно, предоставляемое Tilda, слишком ограничено в функциональности: пользователь может изменить только текст и цвет фона. Создание отдельной страницы для успешного сообщения о заявке может быть слишком затратным и неэффективным, особенно если у вас одностраничный лендинг.
Однако благодаря модификации от Нолим "Своё окно успешной отправки формы из Зеро блока", вы сможете сделать окно успешной отправки более функциональным, добавив кнопку, расписание, видео, изображение или что угодно, что может удовлетворить ваши задачи.
А чтобы окно сообщения об успешной отправки заявки было более цельным и соответствовал дизайну, вы можете использовать мод "Своя уникальная форма". Тем самым превратив стандартную форму в супер форму.
Окно успешной отправки заявки является важным этапом процесса подачи заявки, поскольку оно информирует пользователя о том, что его заявка успешно отправлена, и предоставляет инструкции для дальнейших действий. Стандартное окно, предоставляемое Tilda, слишком ограничено в функциональности: пользователь может изменить только текст и цвет фона. Создание отдельной страницы для успешного сообщения о заявке может быть слишком затратным и неэффективным, особенно если у вас одностраничный лендинг.
Однако благодаря модификации от Нолим "Своё окно успешной отправки формы из Зеро блока", вы сможете сделать окно успешной отправки более функциональным, добавив кнопку, расписание, видео, изображение или что угодно, что может удовлетворить ваши задачи.
А чтобы окно сообщения об успешной отправки заявки было более цельным и соответствовал дизайну, вы можете использовать мод "Своя уникальная форма". Тем самым превратив стандартную форму в супер форму.
Пример
Сообщение об успешной отправке!
Супер!
А еще у нас есть канал в Telegram, там ты еще быстрее будешь получать новости, честно честно))
Инструкция
Сначала создадим блок и настроем форму, а после настроем окно об успешной отправке заявки.
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
1. Внутри Зеро-блока собираешь свой pop-up, который будет появляться при успешной отправке формы;
2. Настраиваешь следующие поля в генераторе:
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
6. Добавь блок Т123 и вставь в него сгенерированный HTML код.
Итак мы создали блок с формой, теперь с помощью мода мы создадим уникальное окно об успешной отправке заявки.
1. Внутри Зеро-блока собираешь свой pop-up, который будет появляться при успешной отправке формы;
2. Настраиваешь следующие поля в генераторе:
- «Введите id зеро блока» — Вставляешь id Зеро-блока, в котором находится pop-up;
- «Введите id блока с формой» — Обычно при настройке этого мода нужно указывать id блока формы, после которого, должно появится окно успешной отправки формы; Но так как мы использем мод "Своё окно успешной отправки заявок" в сочетании с модом "Своя уникальная форма", в таком случае в поле «Введите id блока с формой» мы указываем id блока BF204N.
- «Ссылка для кнопки закрытия» —Указываешь ссылку для закрытия pop-up, которая будет привязана ко всем элементам, отвечающим за закрытие;
- «Затемнение фона» — Выбираешь, если требуется ли затемнение фона;
3. Копируешь сгенерированный HTML код и вставляешь его в блок Т123;
Имей в виду:
На странице может быть один зеро блок и несколько форм. Для этого нужно будет сгенерировать несколько кодов, в каждом указать id одного зеро блока, но разных форм.
Зависимые страницы успеха
NLM047 "Зависимая страница успеха от выбора значения в форме"
Модификация "Зависимые страницы успеха" улучшает формы на сайте. Она позволяет показывать разные страницы успеха в зависимости от выбора пользователя. Это делает формы более интересными и полезными. Если использовать мод "Зависимые страницы успеха", в сочетании с модом "Своя уникальная форма," то формы станут ещё очень эффективными за счёт функциональности и удобнее для заполнения. Это помогает привлекать больше клиентов и сохранять стиль сайта.
Модификация "Зависимые страницы успеха" улучшает формы на сайте. Она позволяет показывать разные страницы успеха в зависимости от выбора пользователя. Это делает формы более интересными и полезными. Если использовать мод "Зависимые страницы успеха", в сочетании с модом "Своя уникальная форма," то формы станут ещё очень эффективными за счёт функциональности и удобнее для заполнения. Это помогает привлекать больше клиентов и сохранять стиль сайта.
Пример
Сообщение об успешной отправке!
Инструкция
Не работает с корзиной;
Работает со стандартными попапами;
Если нужен зеро попап, используем модификацию Как в Zero Block сделать popup со своей кнопкой закрытия в Tilda
Работает со стандартными попапами;
Если нужен зеро попап, используем модификацию Как в Zero Block сделать popup со своей кнопкой закрытия в Tilda
Сначала создадим блок и настроем форму, а после настроем зависимую страницу успеха.
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
1. Указываем id блока стандартной формы, попапа или зеро блока;
2. Указываем имя переменной поля и значение. В примере имя поля "media", а значения: ютуб, контакт, инстаграм, телеграм. Если нам нужно 4 ответа, значит должно быть 4 имя поля "media", добавить их можно через кнопку "+ Добавить вариант"
3. Прописываем у каждого значения свою ссылку;
4. Для попап ссылка должна начинаться с #;
5. Для прямых ссылок на другие сайты, ссылка должна быть полная, например https://google.com;
6. Для внутренних страниц через слэш, например /thankyoupage;
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
6. Добавь блок Т123 и вставь в него сгенерированный HTML код.
Итак мы создали блок с формой, теперь с помощью мода мы настроем зависимую страницу успеха.
1. Указываем id блока стандартной формы, попапа или зеро блока;
2. Указываем имя переменной поля и значение. В примере имя поля "media", а значения: ютуб, контакт, инстаграм, телеграм. Если нам нужно 4 ответа, значит должно быть 4 имя поля "media", добавить их можно через кнопку "+ Добавить вариант"
3. Прописываем у каждого значения свою ссылку;
4. Для попап ссылка должна начинаться с #;
5. Для прямых ссылок на другие сайты, ссылка должна быть полная, например https://google.com;
6. Для внутренних страниц через слэш, например /thankyoupage;
7. Копируем сгенерированный HTML код и вставляем его в блок Т123;
Обращение по имени + свое окно
NLM041 "Обращение по имени после отправки формы"
После того, как посетитель отправляет форму, модификация автоматически внедряет в ответное сообщение обращение по имени, делая взаимодействие более персональным и приятным.
В случае использования модификации "Обращение по имени после отправки формы" совместно с модификацией "Своя уникальная форма", эффективность форм значительно возрастает. Пользователи не только получают персонализированный отклик, но и воспринимают процесс заполнения формы как более удобный и индивидуально настроенный под их потребности.
Такое комбинированное использование модификаций не только улучшает взаимодействие с клиентами, но и подчеркивает уникальность и стиль вашего веб-сайта. Сочетание функциональности "Обращение по имени после отправки формы" и удобства "Своя уникальная форма" позволяет не только удерживать посетителей, но и привлекать новых, создавая благоприятное впечатление.
После того, как посетитель отправляет форму, модификация автоматически внедряет в ответное сообщение обращение по имени, делая взаимодействие более персональным и приятным.
В случае использования модификации "Обращение по имени после отправки формы" совместно с модификацией "Своя уникальная форма", эффективность форм значительно возрастает. Пользователи не только получают персонализированный отклик, но и воспринимают процесс заполнения формы как более удобный и индивидуально настроенный под их потребности.
Такое комбинированное использование модификаций не только улучшает взаимодействие с клиентами, но и подчеркивает уникальность и стиль вашего веб-сайта. Сочетание функциональности "Обращение по имени после отправки формы" и удобства "Своя уникальная форма" позволяет не только удерживать посетителей, но и привлекать новых, создавая благоприятное впечатление.
Пример
Сообщение об успешной отправке!
Инструкция
Сначала создадим блок и настроем форму, а после настроем обращение по имени и указанным значениям.
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
Модификация работает на странице с формой
1. Указываем id блока в которой находится форма;
2. Указываем поля, которые хотим показать на странице спасибо и присваиваем им ссылки через #;
3. В настройках формы, в тексте об успешной отправке вставляем ссылки в соответствующее слово в тексте;
4. Копируем сгенерированный HTML код и вставляем его в блок Т123;
5. Настройки текста (цвет, жирность) редактируются в самой форме;
Также можно чтобы модификация работала на другой странице, к примеру странице об успешной оплате или ошибки оплаты
1. Проделываем все шаги как в первом варианте;
2. Копируем сгенерированный HTML код и вставляем его в блок Т123 на страницу с формой/корзиной;
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
6. Добавь блок Т123 и вставь в него сгенерированный HTML код.
Итак мы создали блок с формой, теперь с помощью мода мы настроем обращение по имени и указанным значениям.
Модификация работает на странице с формой
1. Указываем id блока в которой находится форма;
2. Указываем поля, которые хотим показать на странице спасибо и присваиваем им ссылки через #;
3. В настройках формы, в тексте об успешной отправке вставляем ссылки в соответствующее слово в тексте;
4. Копируем сгенерированный HTML код и вставляем его в блок Т123;
5. Настройки текста (цвет, жирность) редактируются в самой форме;
Модификация ищет ссылки на странице, которые вы указали в генераторе и заменяет их на текст, который указал посетитель сайта;
Также можно чтобы модификация работала на другой странице, к примеру странице об успешной оплате или ошибки оплаты
1. Проделываем все шаги как в первом варианте;
2. Копируем сгенерированный HTML код и вставляем его в блок Т123 на страницу с формой/корзиной;
3. Копируем тот же сгенерированный HTML код и вставляем его в блок Т123 на страницу об успешной оплате;
Чек боксы
NLM023 "Кастомные чекбоксы в формах"
Модификация "Кастомные чекбоксы" значительно улучшает пользовательский опыт при заполнении форм на сайтах. Она позволяет кастомизировать чекбоксы до мельчайших деталей, делая формы более привлекательными и понятными для пользователей.
Комбинирование этой модификации с "Своей уникальной формой" позволяет создавать более эффективные и удобные формы, что способствует снижению отказов и увеличению конверсии на вашем сайте.
Модификация "Кастомные чекбоксы" значительно улучшает пользовательский опыт при заполнении форм на сайтах. Она позволяет кастомизировать чекбоксы до мельчайших деталей, делая формы более привлекательными и понятными для пользователей.
Комбинирование этой модификации с "Своей уникальной формой" позволяет создавать более эффективные и удобные формы, что способствует снижению отказов и увеличению конверсии на вашем сайте.
Пример
Инструкция
Сначала создадим блок и настроем форму, а после настроем внешний вид чекбоксов в форме.
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
1. Добавляем id блока стандартной формы или формы в Zero Block в генератор. В форме должен стоять тип поля "Вопросы с вариантами ответа" (Question with answers) и выбираем "Несколько вариантов ответа" (галочки)(Multiple variants of answer (checkboxes));
2. Выбираем тип чекбокса: Квадрат, С текстом, Большой круглый, Маленький круглый;
3. Выбираем расположение: стандартное или в ряд (количество определяется размером формы);
4. После выбора типа, настраиваем цвета активного и не активного чекбокса;
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
6. Добавь блок Т123 и вставь в него сгенерированный HTML код.
Итак мы создали блок с формой, теперь с помощью мода мы настроем внешний вид чекбоксов в форме.
1. Добавляем id блока стандартной формы или формы в Zero Block в генератор. В форме должен стоять тип поля "Вопросы с вариантами ответа" (Question with answers) и выбираем "Несколько вариантов ответа" (галочки)(Multiple variants of answer (checkboxes));
2. Выбираем тип чекбокса: Квадрат, С текстом, Большой круглый, Маленький круглый;
3. Выбираем расположение: стандартное или в ряд (количество определяется размером формы);
4. После выбора типа, настраиваем цвета активного и не активного чекбокса;
5. Добавляем блок Т123 и вставляем в него сгенерированный HTML код или вставляем код в Настройки сайта → Еще → Пользовательские CSS-стили;
Цвет основного бордера настраивается на стороне Тильды;
В стандартном блоке Настройки → Стиль полей для ввода → Цвет галочки, переключателей и др. элементов и вставляем свой цвет;
В стандартном блоке Настройки → Стиль полей для ввода → Цвет галочки, переключателей и др. элементов и вставляем свой цвет;
В Zero блоке выбираем форму Settings → Form style → Color of checkboxes, radio btns, and other elements и вставляем свой цвет;
Радиокнопки
NLM021 "Радиокнопки"
"Кастомные радиокнопки" значительно улучшают заполнение форм на сайтах и делают их намного удобнее. С модификацией можно настроить внешний вид радиокнопки, что делает формы более креативными и понятными для пользователей.
Если добавить "Свою уникальную форму" к этому, то получится еще более удобный и эффективный способ снижения отказов и увеличения конверсии на сайте.
"Кастомные радиокнопки" значительно улучшают заполнение форм на сайтах и делают их намного удобнее. С модификацией можно настроить внешний вид радиокнопки, что делает формы более креативными и понятными для пользователей.
Если добавить "Свою уникальную форму" к этому, то получится еще более удобный и эффективный способ снижения отказов и увеличения конверсии на сайте.
Пример
Инструкция
Сначала создадим блок и настроем форму, а после настроем внешний вид радиокнопок в форме.
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
1. Добавляем id блока стандартной формы или формы в Zero Block в генератор. В форме должен стоять тип поля "Вопросы с вариантами ответа" (Question with answers) и выбираем "Один вариант ответа" (радиокнопки) (One variant of answer (radio button));
2. Выбираем тип радиокнопки: Стандартный круг или кнопки;
3. Выбираем расположение: стандартное или в ряд (количество определяется размером формы);
4. После выбора типа, настраиваем цвета активного и не активного бордера;
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
6. Добавь блок Т123 и вставь в него сгенерированный HTML код.
Итак мы создали блок с формой, теперь с помощью мода мы настроем внешний вид радиокнопок в форме.
1. Добавляем id блока стандартной формы или формы в Zero Block в генератор. В форме должен стоять тип поля "Вопросы с вариантами ответа" (Question with answers) и выбираем "Один вариант ответа" (радиокнопки) (One variant of answer (radio button));
2. Выбираем тип радиокнопки: Стандартный круг или кнопки;
3. Выбираем расположение: стандартное или в ряд (количество определяется размером формы);
4. После выбора типа, настраиваем цвета активного и не активного бордера;
5. Добавляем блок Т123 и вставляем в него сгенерированный HTML код или вставляем код в Настройки сайта → Еще → Пользовательские CSS-стили;
Цвет основного бордера настраивается на стороне Тильды;
В стандартном блоке Настройки → Стиль полей для ввода → Цвет галочки, переключателей и др. элементов и вставляем свой цвет;
В стандартном блоке Настройки → Стиль полей для ввода → Цвет галочки, переключателей и др. элементов и вставляем свой цвет;
В Zero блоке выбираем форму Settings → Form style → Color of checkboxes, radio btns, and other elements и вставляем свой цвет;
Изображения в выпадающих списках
NLM012 "Изображения в выпадающем списке формы"
"Изображения в выпадающем списке формы" сильно улучшают пользовательский опыт при заполнении форм на сайтах. Теперь можно добавить картинки к вариантам в выпадающем списке, что делает формы более привлекательными и информативными для пользователей.
Комбинирование этой модификации с "Своей уникальной формой" позволяет создавать более эффективные и удобные формы, что способствует снижению отказов и увеличению конверсии на вашем сайте.
"Изображения в выпадающем списке формы" сильно улучшают пользовательский опыт при заполнении форм на сайтах. Теперь можно добавить картинки к вариантам в выпадающем списке, что делает формы более привлекательными и информативными для пользователей.
Комбинирование этой модификации с "Своей уникальной формой" позволяет создавать более эффективные и удобные формы, что способствует снижению отказов и увеличению конверсии на вашем сайте.
Пример
Инструкция
Сначала создадим блок и настроем форму, а после добавим иконки для пунктов в выпадающем списке.
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
1. Добавляешь стандартную форму или форму в Zero Block на страницу и добавляешь поле "Выпадающий список (Dropdown)";
2. В генераторе указываешь имя поля (VARIABLE NAME) и вставляешь его в созданную форму в поле "Выпадающий список (Dropdown)";
3. Настраиваешь цвет фона активного пункта и при наведении;
4. Настраиваешь бордер, толщина, скругление и цвет;
5. Настраиваешь тип текста и цвет;
6. Вставляешь ссылки на свои картинки или иконки;
Чтобы получить ссылку картинки или иконки,на свою страницу вставляем, к примеру, галерею GL12 и загружаем в неё изображение. Копируем ссылку и вставляем в генератор. Формат файла советуем использовать svg или png.
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
6. Добавь блок Т123 и вставь в него сгенерированный HTML код.
Итак мы создали блок с формой, теперь с помощью мода добавим иконки для пунктов в выпадающем списке.
1. Добавляешь стандартную форму или форму в Zero Block на страницу и добавляешь поле "Выпадающий список (Dropdown)";
2. В генераторе указываешь имя поля (VARIABLE NAME) и вставляешь его в созданную форму в поле "Выпадающий список (Dropdown)";
3. Настраиваешь цвет фона активного пункта и при наведении;
4. Настраиваешь бордер, толщина, скругление и цвет;
5. Настраиваешь тип текста и цвет;
6. Вставляешь ссылки на свои картинки или иконки;
Чтобы получить ссылку картинки или иконки,на свою страницу вставляем, к примеру, галерею GL12 и загружаем в неё изображение. Копируем ссылку и вставляем в генератор. Формат файла советуем использовать svg или png.
7. Копируешь сгенерированный HTML код и вставляешь его в блок Т123.
- Не забудь настроить бордер для поля, так как данная модификация не подтягивает настройки полей формы;
- Максимальное количество загружаемых картинок — 15 штук;
- Очередность картинок соответствует очередности их загрузки. Например, в списке пять пунктов. Вставляя ссылку на первую картинку в генератор, она будет соответствовать первому пункту в выпадающем списке.
Свои иконки в полях
NLM006 "Свои иконки в поле любой формы"
"Свои иконки в поле любой формы" - это мод, которое позволяет вам добавлять собственные иконки в поля вашей формы. Это значит, что вы можете сделать вашу форму более информативной и интересной для пользователей, добавив иконки, которые соответствуют типу информации, которую нужно заполнить. Например, вы можете добавить иконку телефона к полю для ввода номера телефона или иконку почты к полю для адреса электронной почты. Это помогает сделать вашу форму более интуитивной и привлекательной.
Если вы комбинируете модификацию "Свои иконки в поле любой формы" с модификацией "Своя уникальная форма", то у вас есть полный контроль над тем, как вы размещаете поля в вашей форме. Вы можете перетаскивать их, изменять их размеры и располагать их так, как вам удобно. Это особенно полезно, если вам нужно создать сложные формы с разными типами полей. В итоге, вы получаете более гибкий и креативный способ собирать информацию от пользователей, делая процесс заполнения формы более приятным и эффективным.
"Свои иконки в поле любой формы" - это мод, которое позволяет вам добавлять собственные иконки в поля вашей формы. Это значит, что вы можете сделать вашу форму более информативной и интересной для пользователей, добавив иконки, которые соответствуют типу информации, которую нужно заполнить. Например, вы можете добавить иконку телефона к полю для ввода номера телефона или иконку почты к полю для адреса электронной почты. Это помогает сделать вашу форму более интуитивной и привлекательной.
Если вы комбинируете модификацию "Свои иконки в поле любой формы" с модификацией "Своя уникальная форма", то у вас есть полный контроль над тем, как вы размещаете поля в вашей форме. Вы можете перетаскивать их, изменять их размеры и располагать их так, как вам удобно. Это особенно полезно, если вам нужно создать сложные формы с разными типами полей. В итоге, вы получаете более гибкий и креативный способ собирать информацию от пользователей, делая процесс заполнения формы более приятным и эффективным.
Пример
Инструкция
Сначала создадим блок и настроем форму, а после добавим иконки для пунктов в выпадающем списке.
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
1. Добавляешь стандартную форму или форму в Zero Block на страницу и добавляешь поле "Выпадающий список (Dropdown)";
2. В генераторе указываешь имя поля (VARIABLE NAME) и вставляешь его в созданную форму в поле "Выпадающий список (Dropdown)";
3. Настраиваешь цвет фона активного пункта и при наведении;
4. Настраиваешь бордер, толщина, скругление и цвет;
5. Настраиваешь тип текста и цвет;
6. Вставляешь ссылки на свои картинки или иконки;
Чтобы получить ссылку картинки или иконки,на свою страницу вставляем, к примеру, галерею GL12 и загружаем в неё изображение. Копируем ссылку и вставляем в генератор. Формат файла советуем использовать svg или png.
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
6. Добавь блок Т123 и вставь в него сгенерированный HTML код.
Итак мы создали блок с формой, теперь с помощью мода добавим иконки для пунктов в выпадающем списке.
1. Добавляешь стандартную форму или форму в Zero Block на страницу и добавляешь поле "Выпадающий список (Dropdown)";
2. В генераторе указываешь имя поля (VARIABLE NAME) и вставляешь его в созданную форму в поле "Выпадающий список (Dropdown)";
3. Настраиваешь цвет фона активного пункта и при наведении;
4. Настраиваешь бордер, толщина, скругление и цвет;
5. Настраиваешь тип текста и цвет;
6. Вставляешь ссылки на свои картинки или иконки;
Чтобы получить ссылку картинки или иконки,на свою страницу вставляем, к примеру, галерею GL12 и загружаем в неё изображение. Копируем ссылку и вставляем в генератор. Формат файла советуем использовать svg или png.
7. Копируешь сгенерированный HTML код и вставляешь его в блок Т123.
Поле загрузки
NLM005 "Поле загрузки"
С помощью модификацию "Поле загрузки" вы сможете настроить кнопку "Загрузить файл" в ваших формах. Мод позволяет добавить свою собственную иконку, выбрать размер и цвет текста, а также задать цвет фона до и после загрузки. Также вы можете настроить тип и толщину бордера для кнопки, чтобы она соответствовала вашему дизайну.
Когда вы сочетаете модификацию "Поле загрузки" с модификацией "Своя уникальная форма", у вас есть полный контроль над тем, как ваше поле загрузки будет выглядеть и в каком месте формы оно будет размещено. Это дает вам возможность создавать формы, которые выглядят и ведут себя точно так, как вам нужно, делая процесс загрузки файлов более интуитивным и привлекательным для ваших пользователей.
С помощью модификацию "Поле загрузки" вы сможете настроить кнопку "Загрузить файл" в ваших формах. Мод позволяет добавить свою собственную иконку, выбрать размер и цвет текста, а также задать цвет фона до и после загрузки. Также вы можете настроить тип и толщину бордера для кнопки, чтобы она соответствовала вашему дизайну.
Когда вы сочетаете модификацию "Поле загрузки" с модификацией "Своя уникальная форма", у вас есть полный контроль над тем, как ваше поле загрузки будет выглядеть и в каком месте формы оно будет размещено. Это дает вам возможность создавать формы, которые выглядят и ведут себя точно так, как вам нужно, делая процесс загрузки файлов более интуитивным и привлекательным для ваших пользователей.
Пример
Инструкция
Сначала создадим блок и настроем форму, а после настроим кнопку загрузки файлов.
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
1. Если нужно чтобы все поля загрузки во всех формах на сайте были одинаковыми, то можно не указывать id блока формы или Zero блока в которой находится форма;
2. Настраиваешь стили кнопки: цвет текста, фона, бордера, толщина и тип обводки, радиус скругления, размер и насыщенность текста внутри кнопки;
3. Настраиваешь дополнительный текст кнопки, сам текст, цвет, размер и насыщенность;
4. Вставляешь галерею GL12 и загружаешь в неё свою иконку "загрузка". Переходишь по ссылке и копируешь её. Вставляешь в генератор. Формат файла советуем использовать svg;
5.Настраиваешь стили кнопки при наведении;
6. Настраиваешь стиль кнопки при статусе "Файл загружен";
1. Создай и собери в зеро блоке свой блок с индивидуальным дизайном, а также свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
2. У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
3. Создай свою кнопку (картинка, шейп, кнопка, текст) в зеро блоке и укажи ей ссылку, такую же как и в генераторе #sendform;
4. Добавь на страницу блок BF204N. Настрой в ней текст успешной отправки сообщения, страницу успеха и подключи сервисы приема данных, которые нужны. Поля в этой форме абсолютно не важны. Скрипт возьмет их из зеро блока.
5. Копируй id зеро блока, в которой находится форма, и вставь в генератор. Также копируй id блока BF204N.
6. Добавь блок Т123 и вставь в него сгенерированный HTML код.
Итак мы создали блок с формой, теперь с помощью мода настроим кнопку загрузки файлов.
1. Если нужно чтобы все поля загрузки во всех формах на сайте были одинаковыми, то можно не указывать id блока формы или Zero блока в которой находится форма;
2. Настраиваешь стили кнопки: цвет текста, фона, бордера, толщина и тип обводки, радиус скругления, размер и насыщенность текста внутри кнопки;
3. Настраиваешь дополнительный текст кнопки, сам текст, цвет, размер и насыщенность;
4. Вставляешь галерею GL12 и загружаешь в неё свою иконку "загрузка". Переходишь по ссылке и копируешь её. Вставляешь в генератор. Формат файла советуем использовать svg;
5.Настраиваешь стили кнопки при наведении;
6. Настраиваешь стиль кнопки при статусе "Файл загружен";
7. Добавляешь блок Т123 и вставляешь в него сгенерированный HTML код на страницу, где находится форма или в шапку сайта.
ВАЖНО: Модификация не работает с Uploadcare!
Считаете, что наша статья недостаточно полная и мы упустили важные моменты?
Дополните ее, заполнив форму ниже
Сообщение об успешной отправке!
Было полезно?