Як створити багатоступеневу форму в WordPress [Плагін і код]

Багатокрокові форми допомагають користувачам легше виконувати тривалі завдання, такі як реєстрації, опитування чи детальні подання. Якщо ви готові впровадити одну з таких форм на вашому сайті WordPress, цей гайд покаже вам, як створити багатокрокову форму в WordPress, використовуючи плагін мультикрокової форми WordPress від Claspo або за допомогою кастомного коду. 

Що таке багатокрокова форма і коли вона працює найкраще?

Багатокрокова форма - це форма, яка розділяє питання або поля введення на кілька кроків або сторінок, а не представляє їх усі одразу. Такий підхід допомагає зробити довгі форми менш лякаючими і легшими для користувачів, розбиваючи форму на менші секції.

Багатокрокові форми ідеальні для завдань, таких як реєстрації, бронювання, опитування та інші детальні подання форм. Ви можете легко створити мультикрокові форми для різних цілей, будь то розмовна форма, проста контактна форма або більш складний процес генерації лідів. Ця гнучкість дозволяє розділяти форму на кілька кроків в залежності від ваших потреб. Ось чому вони заслуговують на використання:

• Покращена взаємодія з користувачами: розподіл форми на кілька, зручних частин робить їх менш обтяжливими і зберігає увагу користувачів.
• Покращена зручність використання: індикатори прогресу направляють користувачів і показують, скільки форми залишилося, роблячи процес здається коротшим і більш структурованим.
• Вищий рівень завершення: користувачі більш схильні завершувати форми, коли вони легші для навігації і не здаються надто довгими.
• Умовна логіка: багатокрокові форми можуть збирати лише ту інформацію, яка є актуальною, динамічно адаптуючись на основі введень користувача.
• Підвищені конверсії: зменшуючи втому від форми і створюючи безперебійний досвід, багатокрокові форми можуть значно підвищити рівень подань.

Як створити багатокрокову форму в WordPress за допомогою Claspo

Claspo - це простий і гнучкий конструктор багатокрокових форм WordPress для повсякденних завдань. Ви можете створити безкоштовну багатокрокову форму для WordPress, яка чудово виглядає на будь-якому пристрої, підтримує кілька мов і інтегрується з популярними маркетинговими інструментами. З Claspo ви не лише додаєте форму, а створюєте робочий процес, який привертає потенційних клієнтів і будує відносини з ними.

Крок 1: Встановлення плагіну Claspo

Спочатку вам потрібно інтегрувати плагін конструктора форм Claspo з вашою панеллю управління WordPress. Claspo працює як майстер форм WordPress, полегшуючи налаштування і персоналізацію ваших форм без кодування. Ось що потрібно зробити: 

1. Створіть обліковий запис, щоб використовувати наш конструктор віджетів для вашого сайту.
2. Перейдіть до магазину плагінів WordPress, знайдіть “Claspo” і натисніть Завантажити.
3. Увійдіть в адміністративну панель WordPress.
4. Перейдіть у Плагіни > Завантажити.
5. Виберіть і завантажте файл.
6. Після встановлення, перейдіть до Claspo і знайдіть ID Скрипту. У лівій боковій панелі перейдіть до <>Скрипт.
7. Перевірте інтеграцію і ви готові!

Крок 2: Перейдіть до Claspo і створіть нову форму

Увійдіть у свій обліковий запис Claspo, і почнімо. Натисніть кнопку Новий Віджет і виберіть Бібліотеку Шаблонів. Якщо ви відчуваєте себе творчо, ви можете почати з порожньої форми і побудувати свій власний макет.

Ви познайомитесь з нашим каталогом шаблонів. У фільтрі Особливості виберіть Багатокроковий, і ви побачите всі шаблони багатокрокових форм. Виберіть тему багатокрокової форми для вашого сайту на WordPress.

Крок 3: Дизайн багатокрокової форми

Для демонстрації ми будемо використовувати наступний шаблон:

Спробувати цей шаблон

Ця контактна форма WordPress вже містить три кроки: 

• Перший крок форми збирає особисту інформацію.
• Другий крок форми збирає електронну пошту та вік.
• Наступний крок форми фіксує контактні дані та бажану дату класу.

Ми будемо разом налаштовувати кожен з розділів вашої форми. Почнемо з основної форми запиту.

Ми замінимо поле прізвища на поле для користувачів, щоб поділитися своїм віком. Це дасть нам уявлення про аудиторію, яка цікавиться нашими класами, і допоможе підготувати групи. Ми також замінимо текст під заголовком на більш захоплюючий текст, що додає дефіцитності.

Перейдемо до наступної сторінки. Ми будемо запитувати електронну пошту користувача і визначати його улюблений стиль танцю. Як і у першій формі, ми видалимо стандартне поле і замінимо його на текстовий ввід. Ми також додамо деякий текст під заголовком, щоб краще пояснити, чому нам потрібна ця інформація. Оскільки ми вже запитали ім'я особи, ми можемо додати тег злиття для персоналізації цього кроку.

І чому б не замінити зображення, щоб форма стала ще більш динамічною? Уявіть, наш бізнес навчає різним стилям — це чудова можливість підкреслити це.

І для кінцевої сторінки ми також замінимо стандартний текст і зображення та зробимо поле телефону необов'язковим.

Розумно додати кнопку «Назад» тут на випадок, якщо користувачі захочуть змінити те, що ввели раніше. Просто додайте другий кнопковий елемент на крок, натисніть на нього, відкрийте вкладку Загальні та оберіть «Попередня сторінка» у полі «Дія при натисканні». Таким чином, користувачі можуть повернутися назад і внести зміни у будь-який час.

Це все. Тепер нам просто потрібно налаштувати сторінки успіху та помилок. Додамо більше деталей про те, чого очікувати далі, і додамо тег злиття з ім'ям для персоналізації записів форми.

крок 4: налаштуйте правила відображення

Тепер, коли дизайн готовий, поговорімо про налаштування відображення. Ця конкретна форма на фронтенді призначена для запобігання виходу з вебсайту, тому ми увімкнемо перемикач Намір виходу.

Проте, ви можете використовувати цей віджет і будь-яку іншу форму як форму підписки. Правила Claspo дають вам багато гнучкості для суперточного націлювання. Наприклад, ви можете вибрати, на яких сторінках з'являється попап, або націлюватися на користувачів за країною чи містом. Чому б не створити унікальні попапи зі спеціальними винагородами для різних локацій? Ви навіть можете використовувати UTM параметри, щоб переконатися, що попап виглядає як природна частина більшої кампанії.

Ви могли помітити три додаткові тригери, які доступні:

• Тригер запуску: запуск — це невеликий значок, що залишається в нижньому куті сторінки. Користувачі можуть натиснути на нього, щоб відкрити попап, коли захочуть. Ви можете налаштувати його на першому етапі створення попапу або додати пізніше. Це ідеально для надання користувачам більшої автономії.
• Тригер кліка HTML: це дає можливість використовувати будь-який клікабельний елемент на сторінці для показу попапу. Наприклад, він може з'явитися, коли хтось натисне на зображення, кнопку або текстове посилання.
• Тригер API: цей варіант дозволяє програмно контролювати, коли і як показуються попапи. Це відмінно підходить для розширеної кастомізації, інтеграції з іншими сервісами або поліпшення користувацького досвіду, але вимагає певних технічних знань.

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

Крок 5: Інтеграція форм з ESP або CRM

Останній крок — це підключити Claspo до інших ваших інструментів, таких як CRM або постачальник послуг електронної пошти. Це дозволяє зібраній через форму інформації автоматично створювати ліди в вашій CRM або запускати email-кампанії. Коли користувачі подають форму, всі зібрані дані безпечно обробляються та передаються.

Claspo інтегрується з багатьма популярними програмними інструментами. Просто оберіть ті, що вам потрібні, та налаштуйте відповідність полів, щоб переконатися, що вся інформація зберігається коректно.

Якщо постачальника програмного забезпечення немає в списку, ви можете створити вебхук і передавати інформацію з форми фактично в будь-яку систему.

Крок 6: Тестуйте та оптимізуйте

Claspo спрощує тестування та оптимізацію ваших розширених форм WordPress. Ви можете налаштувати спліт-тести всього за кілька кліків, і Claspo збере статистику продуктивності вашого сайту через віджети. Це допомагає визначити слабкі місця, такі як покинуті форми або втому користувачів, дозволяючи налаштувати дизайн для кращих результатів.

Для отримання ще кращих уявлень використовуйте інструменти теплових карт або інше програмне забезпечення, щоб побачити, як користувачі заповнюють форму, а потім застосуйте ці дані для більш ефективних тестів у Claspo.

Кроки для створення покрокової форми WordPress з використанням кастомного коду

Створення багатоступеневої форми WP з нуля — це більше, ніж просто дизайнерське завдання; це колективна робота, що вимагає внеску від різних фахівців для забезпечення як функціональності, так і безперебійного користувацького досвіду. Залежно від складності форми з використанням кастомного коду, вам можуть знадобитися:

• UI/UX-дизайнер для розробки інтуїтивного дизайну.
• Фронтенд-розробник для реалізації інтерфейсу та логіки навігації, включаючи налаштування будь-яких необхідних блоків розриву сторінок форми.
• Бекенд-розробник для обробки зберігання та обробки даних.
• QA-спеціаліст для тестування форми в різних пристроях і сценаріях.

Для простої форми, яку ви хочете створити, цей процес може зайняти у невеликої команди близько 20-40 годин. Однак, складні форми з розширеними функціями, такими як перевірка в реальному часі чи інтеграції, можуть вимагати 60-100+ годин, залежно від обсягу.

Крок 1. Визначення мети та структури

Основою багатоступеневої форми є розуміння її мети. Це вимагає співпраці між зацікавленими сторонами та менеджерами продукту для визначення цілей форми та типу необхідної інформації. Інформація потім ділиться на логічні кроки, щоб забезпечити природній потік.

Крок 2. Дизайн користувацького інтерфейсу

Після того, як структура окреслена, фокус переміщається на розробку зовнішнього вигляду та функціональності форми. UI/UX-дизайнер створює візуальний план. Етап дизайну є вирішальним для забезпечення ясності та зручності використання, оскільки це безпосередньо впливає на залучення користувачів і рівень завершення заповнення.

Крок 3. Розробка фронтенду

На цьому етапі форма починає набирати форму через фронтенд-розробку. Використовуючи дизайн як орієнтир, фронтенд-розробник створює макет для кожного кроку та реалізує систему навігації. Це може включати налаштування опції контейнера для форми для чіткого організації елементів форми та кроків. 

Крок 4. Додавання валідації та зворотнього зв'язку

Валідація забезпечує точність та повноту зібраної інформації. Валідація введення може відбуватися в режимі реального часу на фронтенді або після відправки на бекенді. 

Наприклад, система може перевіряти правильність формату електронних адрес або щоб обов’язкові поля форми не залишалися порожніми. Надаючи миттєвий зворотний зв'язок, користувачів інформують про помилки або відсутні деталі, зменшуючи розчарування та забезпечуючи якість даних.

Крок 5. Реалізація обробки даних

З навігацією та валідацією, увага звертається на обробку даних. Бекенд-розробник забезпечує, що інформація, яку користувачі надсилають, безпечно захоплюється і зберігається. 

Це передбачає налаштування серверів або API для отримання даних та збереження їх у безпечній базі даних. У випадках, коли форма є складною або інтегрується з інструментами третіх сторін, може знадобитися додаткова робота з бекенду для безперебійного керування цими з'єднаннями.

Крок 6. Тестування та вдосконалення

Перш ніж багатокрокова форма буде готова для користувачів, її потрібно ретельно протестувати, щоб переконатися, що все працює згідно з намірами. Тестування також виявляє потенційні проблеми з досвідом користувача, які вирішуються на цьому етапі. Вдосконалення форми на основі цих висновків забезпечує якісний кінцевий продукт.

Типи форм, які краще конвертують у багатокроковому форматі

Так само як існують найкращі випадки використання простих, однокрокових форм, багатокрокові форми WordPress чудово підходять для:

1. Форм реєстрації

Візьмемо, наприклад, форму підписки на розсилку. За допомогою безкоштовної багатокрокової форми реєстрації на WordPress ви можете "вбити двох зайців одним пострілом": створити зручний для користувача процес реєстрації та зібрати цінні дані для надсилання інформаційних бюлетенів, які ваші читачі хочуть читати.

Використати цей шаблон

2. Форм генерації лідів

Багатокрокові форми підвищують ефективність генерації лідів, дозволяючи збирати детальну інформацію про потенційних клієнтів, не перевантажуючи їх. Це, у свою чергу, полегшує оцінювання та категоризацію потенційних клієнтів, щоб визначити їх ймовірність стати платоспроможними клієнтами.

Використати цей шаблон

3. Опитувань та зворотного зв'язку 

Оптимальна кількість запитань для багатосторінкової форми зворотного зв'язку варіюється залежно від мети опитування, аудиторії та бажаного часу на заповнення. Однак, дослідження вказують, що 5–15 запитань зазвичай достатньо для досягнення змістовних висновків. Якщо ви розумно групуєте питання та розподіляєте форму на кроки, ви полегшите користувачам домовитися про участь.

Використати цей шаблон

4. Форм попереднього замовлення 

Використання багатокрокових форм у WordPress для збору попередніх замовлень дозволяє користувачам легко перевіряти інформацію на кожному етапі, що може допомогти зменшити кількість помилок. Оскільки кожен крок логічно слідує з попереднього, набагато менше шансів пропустити важливі поля або ввести неправильні дані.

Використати цей шаблон

5. Багатокрокова форма реєстрації WordPress

Для реєстрацій краще створити багатокрокову форму, ніж перевантажувати користувачів довгими формами. Розбивка форми на секції, такі як особиста інформація, налаштування облікового запису і вподобання, допомагає людям залишатися зосередженими і завершувати процес.

З Claspo створення таких форм є простим. Ви контролюєте всі налаштування форми: обов'язкові поля, кроки і їх послідовність. І якщо ви потребуєте змін, оновлення є простими. В результаті ця форма працює краще як для користувачів, так і для вашого бізнесу.

Використати цей шаблон

Рекомендації по UX, як зробити форму WP з багатокроковим макетом кращою для конверсії

Навіть якщо ви використовуєте безкоштовний плагін або конструктор, хороший дизайн все ще має найбільше значення. Нижче наведені прості поради з UX, які допоможуть вам створити багатокрокову форму WordPress, яка не лише виглядає чудово, але й перетворює відвідувачів на потенційних клієнтів або покупців.

Індикатори прогресу форми

Одним з важливих елементів успішної багатокрокової форми WP є чітка індикація прогресу. Користувачі люблять знати, на якій вони стадії і скільки зусиль ще потрібно докласти для завершення. Панель прогресу або індикатори кроків у верхній частині багатосторінкової форми є чудовими інструментами для візуалізації прогресу сторінок форми.

Якщо ви використовуєте шаблони багатокрокових форм від Claspo, ця рекомендація вже включена. Всі форми мають індикатори прогресу, але ви можете налаштовувати їх на свій розсуд. Наприклад, замість панелі прогресу ви можете додати контрольні сторінки, які показуватимуть користувачам, наскільки далеко вони у своєму просуванні. 

Один крок = одне завдання

Не менше важливо вдумливо групувати пов’язану інформацію. Наприклад, один крок може зосереджуватися виключно на особистих деталях, інший – на контактній інформації тощо. 

Ви знайдете багато прикладів багатокрокових форм, що дотримуються такого підходу — кожна секція має чітке призначення, яке дозволяє користувачам зосередитися на виконанні одного завдання за раз. Щоб підтримати це, зберігайте кожний крок лаконічним, бажано не більше п'яти-семи полів, і використовуйте заголовки для чіткого вказування призначення кожної секції.

Підказки та інструкції

Коли ви створюєте свою багатокрокову форму у WordPress, надавайте контекст і чіткі інструкції. Користувачі частіше заповнюють форми, коли вони чітко розуміють, навіщо запитується певна інформація і як заповнювати конкретні поля.

Додайте короткі, корисні описи на початку кожного кроку. Наприклад, у кроці, де запитуються деталі адреси, може бути примітка, як-от: "Будь ласка, вкажіть адресу, на яку ви хочете, щоб ваші товари були доставлені." 

Екрани підтвердження та помилок

Останні моменти взаємодії користувача з вашою багатокроковою формою можуть залишити тривалий враження про ваш бізнес. Добре спроектований екран підтвердження надає впевненості та ясності, допомагаючи користувачам зрозуміти, що їхні дії були успішні. Якщо ви створюєте багатокрокові форми з плагіном багатокрокової форми для WordPress на зразок Claspo, ви можете легко налаштувати ці екрани у відповідності до вашого бренду. 

Використовуйте дружній тон, що відображає ваш бренд, та візуальні підказки, такі як зелена галочка або святковий значок, щоб підкреслити успіх. Включення чіткого заклику до дії (CTA), наприклад, дослідження їх облікового запису або повернення на домашню сторінку, може плавно вести користувачів до їх наступного кроку.

З іншого боку, екрани з помилками повинні чітко пояснювати, що пішло не так, і надавати дієві кроки для виправлення проблеми. Конкретність має ключове значення — користувачі потребують чіткого шляху вперед. Використовуйте підтримуючий тон і пропонуйте рішення, такі як кнопка «Спробуйте ще раз» або поради щодо усунення несправностей, щоб зменшити роздратування і зберегти довіру.

Як і індикатори прогресу, ці екрани є стандартними в Claspo. Ми просто додали їх для кожної сторінки вашої форми з кількома кроками.

Зручність користування на мобільних пристроях

Забезпечення зручності користування вашими формами з кількома кроками на мобільних пристроях є обов'язковим. Хоча середній розмір екрану сьогодні варіюється від 6.1 до 6.7 дюймів по діагоналі — що може здатися достатнім простором — ви повинні впевнитися, що ваша форма легко взаємодіє з користувачами.

Поля і кнопки повинні бути достатньо великими для легкого натискання, і всі елементи повинні розташовуватися вертикально, щоб запобігти горизонтальному прокручуванню. Ви можете також вимкнути великі зображення або відео, щоб заощадити місце.

Плагін WordPress для форми з кількома кроками vs. дилема кастомного коду

Отже, ви стоїте перед вибором: створити кастомний код або використовувати плагін WordPress для форми з кількома кроками, такий як Claspo. Розглянемо це з точки зору легкості використання, часу виходу на ринок і вартості — трьох ключових факторів для щоденних маркетологів, які потребують швидких результатів.

Легкість використання

Кастомний код вимагає навичок програмування, що може бути трудомістким і важким для управління, особливо для маркетологів, які хочуть зосередитися на своїх кампаніях. На відміну від цього, Claspo пропонує простий, безкодовий конструктор форм для WordPress, яким може скористатися будь-хто. Вам не потрібна технічна експертиза — просто перетягуйте, встановлюйте та налаштовуйте. Навіть більш складні налаштування, такі як форма з кількома кроками з умовною логікою, можуть бути виконані легко за допомогою інтерфейсу Claspo.

Час виходу на ринок

Створення кастомних форм може займати дні (або навіть тижні) розробки та тестування. З Claspo ви можете створити та запустити форму з кількома кроками безкоштовно і менш ніж за 15 хвилин. Ця швидкість дозволяє швидко тестувати нові ідеї, вносити зміни на ходу і підтримувати гнучкість ваших маркетингових зусиль.

Вартість

Кастомне кодування вимагає значних інвестицій, враховуючи гонорари розробників та можливі витрати на обслуговування. З іншого боку, плагін для створення форм Claspo для WordPress має план назавжди безкоштовний, тобто ви можете створювати форми безкоштовно. Це бюджетний варіант для маркетологів, які хочуть експериментувати без фінансового ризику.

Кінцевий результат

Для щоденних маркетологів плагін візард-форми WordPress від Claspo є очевидним вибором. Він безкоштовний, простий у використанні та швидкий, що дозволяє втілювати ваші ідеї в життя без зайвих проблем. Навіщо витрачати час та гроші на кастомну розробку, якщо ви можете досягти тих самих (або кращих) результатів за лічені хвилини з Claspo?