Як створити віджет для збору контактів

Контактна форма — один із елементів побудови довготривалих відносин із клієнтами. За її допомогою ви можете зібрати 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 та автоматичним створенням угод.