Как создать виджет для сбора контактов

Контактная форма — один из элементов построения долгосрочных отношений с клиентами. С ее помощью вы можете собрать email-адреса, номера телефонов, ссылки на соцсети или любые другие данные, необходимые для эффективной коммуникации. В этой статье покажем, как легко создать виджет на платформе.

Создание виджета

Перейдите в меню Сайт → Виджет, минилендинг.

Нажмите кнопку + для создания нового виджета.

Укажите название виджета и нажмите Сохранить.

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

Как выглядит редактор:

• Центральная часть — отображение формы и ее внешний вид.

• Левая панель — доступные элементы для добавления (кнопки, поля, изображения и т. д.).

• Правая панель — настройки для каждого выбранного элемента.

Этот интерфейс позволяет быстро изменять структуру формы, добавлять новые поля и компоненты, адаптируя ее под ваши цели.

Как настроить поля и шаги формы

Чтобы настроить форму, кликните по ней, чтобы выделить.

И нажмите + Элемент на боковой панели слева. Выберите нужный тип поля или дополнительный элемент.

В списке можно добавить не только контактные поля, но и другие полезные элементы:

• Кнопка — для запуска дополнительных действий, например перехода на другую страницу

• Рисунок — для оформления или визуального акцента

• Ссылка — для добавления внешних или внутренних переходов

• Таймер — для ограничения времени или создания ощущения срочности

• Социальные сети — кнопки с иконками Facebook, Instagram, Telegram и т. д.

• HTML — возможность вставить собственный код

• Заголовок и Описание — для текстовых пояснений или инструкций

• YouTube и Vimeo — для встроенного видео

• Контактные поля (имя, телефон, город и т. д.)

Примечание: Поля, которые вы добавляете в форму, автоматически сохраняются в карточке пользователя в CRM. Вы можете использовать как стандартные поля (имя, email), так и создавать свои собственные.

Если вам нужно собрать дополнительные данные, которые не входят в стандартный набор, вы можете создать собственные поля в настройках CRM, подробно об этом в отдельной статье.

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

Несколько шагов в форме: как и зачем?

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

В форме можно добавить 2 шага. Переключайтесь между ними, чтобы настроить содержание каждого шага отдельно.

Это удобно, если вы хотите вывести подтверждение или дополнительную информацию после первого шага. Чаще всего второй шаг содержит короткое сообщение типа «Ваша заявка принята», кнопку «Закрыть» или ссылку на дополнительный материал — например, телеграм-канал или чеклист.

Логика: применение данных из формы

Чтобы настроить, как будут использоваться данные из формы для сбора контактов,  выделите форму в центральной части редактора и перейдите к блоку Логика на левой панели.

Этот раздел определяет, что именно произойдет после нажатия кнопки в форме:

• Создан контакт в CRM. Данные из формы автоматически создают нового контакта в CRM Kwiga.

• Доступ к продукту. Контакт создается в CRM, и если предоставляется доступ к курсу или продукту, пользователь будет авторизован и перенаправлен на оплату или на страницу курса. 

• Сделка. Вместе с созданием контакта сразу создается сделка в указанной воронке и на выбранном этапе.

• Передано в сторонний сервис. С помощью Webhook данные можно отправить во внешние системы — например, в стороннюю CRM, чат-бота или другой сервис.

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

После отправки формы пользователя можно:

• Оставить в текущем блоке — показать второй шаг формы с подтверждением

• Отправить в профиль на Kwiga — автоматическая авторизация и переход в профиль

• Перенаправить на страницу — переадресация на указанный URL-адрес

Примечание: Для приема платежей не нужно вручную указывать ссылку на платежную систему — это настраивается автоматически через Доступ к продукту.

Настройка блоков и элементов формы

Помимо настройки логики, в правой панели доступны дополнительные блоки, которые помогут оформить форму в соответствии с потребностями.

Настройка полей

• Цвет текста названия, подсказки и внутреннего текста

• Цвет фона и обводки

• Цвет фокуса

Общие параметры

• Ширина и высота (в пикселях)

• Цвет загрузчика и фона

• Настройка рамки (border)

• Скругление углов

• Использование и настройка тени

Настройки для десктопа

Этот блок позволяет адаптировать вид формы под большие экраны, чтобы обеспечить удобное восприятие и органичную встраиваемость в страницу. Среди доступных опций:

• В строку — горизонтальное выравнивание для компактных форм

• Grid-сетка — использование grid-макета с гибкой настройкой колонок. Пример настройки grid: 2fr 1fr означает, что первая колонка будет в два раза шире второй. Размеры можно задавать в fr (долях), px или %.

Строки при этом переносятся автоматически, что позволяет сохранять аккуратный вид независимо от количества элементов.

Внутренние отступы: Можно настроить расстояния между элементами формы, чтобы обеспечить комфортное восприятие и избежать скопления контента.

Расположение: Дополнительные параметры позволяют выровнять форму на странице для мобильной версии — слева, по центру или справа — в зависимости от ваших дизайнерских решений.

Отступы блока: Этот параметр отвечает за внешние и внутренние отступы всего блока формы. Можно отдельно указать значения сверху, снизу, слева и справа — для лучшей интеграции формы в страницу или другие элементы.

Общие настройки виджета и публикация

После создания и настройки формы нужно подготовить ее к публикации. В правом верхнем углу нажмите на Настройки, где вы найдете важные опции для завершения работы с виджетом.

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

Опция Включить фон для теста помогает визуально оценить, как будет выглядеть ваш виджет на цветном фоне, отличном от белого. Это полезно для тестирования, но помните — этот фон используется только в конструкторе и не отображается на реальном сайте. 

Если вы планируете показывать виджет во всплывающем окне, например при клике на кнопку, включите опцию Использовать в модальном окне. 

На вкладке Публикация вы можете скопировать код виджета для вставки непосредственно на вашу страницу.

Просто поместите этот код в нужное место, где должна отображаться форма.

Отдельно описали, как добавить виджет в популярные конструкторы сайтов, такие как Weblium, SendPulse или Wix. 

Благодаря гибким настройкам платформы вы можете создать форму, которая идеально соответствует потребностям вашего бизнеса — от простого сбора email-адресов до сложных многошаговых сценариев с интеграцией в CRM и автоматическим созданием сделок.