За допомогою вайб-кодингу ви можете створювати форми повністю через текстовий запит. При цьому ви можете точно описати ШІ, як саме має виглядати та працювати ваша форма.
Можливі сценарії використання:
Прості контактні форми
Багатоетапні воронки
Запити на запис
Запити на комерційну пропозицію
Форми для подання заявок
Квіз- та кваліфікаційні воронки
Форми з умовами та логіками
Форми зі сторінкою подяки або сторінкою завершення
Усі запити можуть автоматично передаватися до Onepage CRM. Важливо лише згадати про це у промпті.
Рекомендовано для кожного промпту форми
Опишіть якомога точніше:
Які поля мають бути включені
Які поля є обов'язковими
Чи потрібно підключати форму до Onepage CRM
Чи має після надсилання відкриватися сторінка подяки, чи натомість має відображатися звичайний завершальний крок (Finish-Step)
Які кольори, ефекти чи анімації слід використати
Після успішного надсилання ліди автоматично зберігаються в CRM.
Порада: не все потрібно вмістити в один промпт
Вам не обов'язково вміщувати всі вимоги одразу в перший промпт. У багатьох випадках доцільніше діяти поетапно. Наприклад, спочатку ви можете описати лише загальну ідею. Приклад:
«Створи багатоетапну воронку продажу сонячних панелей для генерації лідів.»
Потім ви можете додати подальші побажання:
«Підключи форму до Onepage CRM.»
«Додай завершальний крок з повідомленням подяки.»
«Використовуй кольори вебсайту та застосовуй сучасні анімації.»
«Зроби ім'я, прізвище та e-mail обов'язковими полями.»
Завдяки такому ітеративному підходу ви часто отримуєте кращі результати й можете крок за кроком налаштувати форму під свої уявлення.
Створення форми
Крок 1: Відкрийте сторінку
Відкрийте потрібну сторінку в конструкторі.
Крок 2: Додайте Vibe-секцію
Натисніть на значок плюса, наприклад, між двома секціями, а потім виберіть «Vibe-секція — Створити за допомогою ШІ»:
Крок 3: Введіть промпт
Опишіть ШІ якомога точніше, яку форму ви хочете створити.
Приклад: одноетапна контактна форма
«Створи сучасну контактну форму.
Поля:
Ім'я (обов'язкове поле)
Прізвище (обов'язкове поле)
E-mail (обов'язкове поле)
Телефон
Повідомлення (обов'язкове поле)
Підключи форму до Onepage CRM. Після успішного надсилання покажи завершальний екран із повідомленням: „Дякуємо за ваш запит. Ми незабаром з вами зв'яжемося". Використай кольори, шрифти та стиль дизайну наявної сторінки, щоб форма відмінно вписалася в наявний макет.»
Обов'язкові поля були враховані автоматично. Якщо відвідувач спробує надіслати форму, не заповнивши ці поля, автоматично з'явиться відповідне повідомлення про помилку.
Окрім того, після успішного надсилання форми було створено бажаний завершальний крок. Результат виглядає так:
Приклад: багатоетапна воронка
«Створи сучасну багатоетапну форму для безкоштовної консультації з фотовольтаїки.
Крок 1: Дані про будівлю
Заголовок: „Розкажіть нам трохи про вашу будівлю"
Тип будівлі:
Одноквартирний будинок
Багатоквартирний будинок
Комерційний об'єкт
Власник чи орендар?
Поштовий індекс
Крок 2: Споживання енергії
Середнє річне споживання:
До 3 000 кВт·год
3 000 – 5 000 кВт·год
5 000 – 10 000 кВт·год
Понад 10 000 кВт·год
Чи є вже сонячна електростанція?
Так
Ні
Крок 3: Побажання та цілі
Що для вас важливо?
Зниження витрат на електроенергію
Незалежність від постачальника електроенергії
Екологічність
Рішення для зберігання енергії
Цікавить акумуляторний накопичувач?
Так
Ні
Не впевнений(-а)
Крок 4: Контактні дані
Ім'я (обов'язкове поле)
Прізвище (обов'язкове поле)
Адреса e-mail (обов'язкове поле)
Номер телефону (обов'язкове поле)
Крок 5: Підсумок
Покажи всі введені дані у наочному вигляді
Кнопка: „Замовити безкоштовну консультацію"
Додаткові вимоги:
Індикатор прогресу зверху (наприклад, крок 1 з 5)
Кнопки „Назад" і „Далі" між кроками
Валідація всіх обов'язкових полів
Сучасний вигляд карток із плавними анімаціями під час зміни кроків
Повністю адаптивна для комп'ютерів і мобільних пристроїв
Після успішного надсилання — перенаправлення на зовнішню сторінку подяки (URL я введу вручну).
Прив'яжи форму до Onepage CRM»
Усі вимоги були успішно реалізовані. Утім, у цьому прикладі вам ще потрібно вказати URL сторінки подяки. Це робиться так:
Натисніть на Vibe-елемент і перейдіть, як описано в чаті, до розділу «Надсилання та перенаправлення». Там ви зможете вказати потрібний URL.
Тоді в реальному режимі форма виглядала б і працювала так:
Крок 4: Перевірка
Опублікуйте свою сторінку, а потім самостійно протестуйте форму.
Заповніть її один раз повністю та перевірте, чи все працює, як очікувалося. Зверніть особливу увагу на те, чи коректно валідуються обов'язкові поля та чи успішно спрацьовує надсилання.
Потім відкрийте свою CRM — там ви маєте побачити свій тестовий запис разом з усіма даними форми.
Внесення змін після генерації
Тепер ви можете вносити зміни безпосередньо в редакторі за допомогою елементів керування. Для цього просто натисніть на форму. Після цього ви зможете редагувати багато налаштувань безпосередньо:
Кольори
Тексти кнопок
Тексти в окремих кроках
Варіанти у відповідних кроках (видалити, додати або змінити)
Окремі поля форми також можна редагувати згодом
Внесення подальших змін за допомогою ШІ
Крім того, ви можете будь-коли вносити подальші зміни за допомогою промпту.
Приклад: зміна дизайну
«Зміни фон на сучасний сонячний пейзаж з анімованими променями світла, плавними градієнтами в жовтих та помаранчевих тонах, а також делікатним ефектом енергетичних частинок на задньому плані.»
Приклад: додавання елементів керування
«Додай додаткові елементи керування: я хочу мати змогу самостійно налаштовувати відступи.»
Або:
«Додай додаткові елементи керування (Controls): я хотів(-ла) би мати можливість для кожного поля окремо визначати, чи є воно обов'язковим, чи ні.»
Ви можете будь-коли попросити ШІ додати нові поля, логіку, анімації, елементи керування чи змінити дизайн.
Додавання логіки та умов
Ви також можете доручити ШІ вбудувати у вашу форму певні умови чи логіку. Завдяки цьому можна створювати дуже індивідуальні та інтелектуальні воронки.
Приклад: обмеження за регіоном
«Допускай лише зацікавлених осіб зі Львова. Дозволяй такі діапазони поштових індексів:
від 79000 до 79501
При цьому перевіряй введений поштовий індекс. Якщо поштовий індекс не відповідає дозволеним діапазонам, перенаправ користувача на окремий завершальний крок із таким повідомленням: „На жаль, наразі ми надаємо свої послуги лише в межах Львова.»
Ось як це виглядатиме, якщо ввести поштовий індекс, що лежить поза дозволеними діапазонами:
Тобто система розпізнає, що індекс за межами дозволеного діапазону, і перенаправляє користувача на окремий крок. Якщо ж поштовий індекс перебуває в межах дозволених діапазонів, форму можна заповнювати далі у звичайному режимі.
Для логік ви також можете додати елементи керування, щоб гнучко визначати їх самостійно. Так, наприклад, перевірку на кшталт перевірки поштових індексів можна реалізувати через елементи керування, не закріплюючи логіку в коді.
Завдяки цьому ви можете самостійно керувати тим, які умови мають діяти та як форма має реагувати в кожному конкретному випадку.
Приклад: додатковий промпт
«Винеси логіку форми в елемент керування, щоб я міг(-ла) самостійно визначати умови, наприклад, як у перевірці поштових індексів.»
Це можна налаштувати для будь-яких полів.
Так можна створювати дуже індивідуальні воронки з інтелектуальними сценаріями.
📌 Примітка: Іноді ШІ потребує кількох спроб, щоб досягти бажаного результату. Це цілком нормально. Тому намагайтеся описувати свої вимоги якомога чіткіше, точніше та детальніше.
Поширені питання та їх вирішення (FAQ)
Як я можу перейменувати форму?
Як я можу перейменувати форму?
Ви можете просто сказати ШІ, що форму потрібно зберегти в CRM під бажаною назвою. Тоді ШІ виконає зміну. Наприклад:
«Форму потрібно зберегти в CRM під назвою XY.»
Чи можу я й надалі створювати та сортувати списки?
Чи можу я й надалі створювати та сортувати списки?
Так, це й надалі можливо. Як саме це працює, ви можете прочитати в наступній статті: Onepage CRM: керування лідами, створення списків, використання інтеграцій
💡Бажаєте залишити відгук до цієї статті? Будь ласка, напишіть у наш чат або за адресою support@onepage.io, і ми зможемо її покращити. Дякуємо! 🙂