Перейти до основного контенту

Як додати модальне поле та інтегрувати в нього форму?

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

Dmytro avatar
Автор: Dmytro
Оновлено протягом останнього тижня

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

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

📌 Примітка: Onepage не має функції автоматичного відображення модального вікна безпосередньо на сторінці. Модальне вікно з'являється лише після натискання попередньо налаштованої кнопки.


Як створити модальну форму


Крок 1: Додайте модальне вікно

Додайте новий розділ з категорії "Поп-ап" і налаштуйте один з доступних шаблонів відповідно до ваших уподобань.


Крок 2: Персоналізуйте дизайн

Ви можете налаштувати модальне вікно так, як вам подобається. Основні налаштування такі:

  • Центрування: Визначте, як модальне поле буде розташоване на сторінці.

  • Відступ: Налаштуйте внутрішній інтервал модального вікна для оптимального відображення контенту.

  • Ширина спливаючого вікна: встановіть ширину модального вікна відповідно до ваших уподобань.

  • Радіус: Заокруглюйте кути модального вікна для більш м'якого дизайну.

  • Кнопка "Закрити": Налаштуйте кнопку (наприклад визначте розмір, іконку чи колір)

  • Оверлей: Налаштуйте фон за модальним елементом, наприклад, колір або прозорість, щоб сфокусувати увагу на ньому.

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

Налаштуйте дизайн фону: Виберіть колір, додайте зображення або навіть відео, щоб зробити модальне вікно візуально привабливим.

Далі ви можете налаштувати колір тексту, щоб контент залишався легко читабельним.

І багато іншого, налаштовуйте ваше модальне вікно саме так, як вам потрібно.

Крок 3: Відредагуйте форму/додайте елементи

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

Крок 4: Прив'яжіть модальне поле до CTA-кнопки

  1. Натисніть на будь-яку кнопку заклику до дії.

  2. Видаліть URL-адресу "onepage.io", якщо вона встановлена.

  3. Виберіть опцію "Поп-ап".

  4. Прив'яжіть потрібне модальне вікно до кнопки.​


Крок 5: Опублікуйте або оновіть сторінку

Не забудьте опублікувати або оновити свою сторінку.


🎉 Готово! Модальне вікно тепер працює і доступне для відвідувачів! 🎉



Поширені питання та їх вирішення

Де можна знайти створене модальне вікно?


Створене модальне поле можна знайти в структурі сторінки.

Чи можна також перейменувати модальне вікно?

Так, подвійне натискання на назву модального поля дозволяє його редагувати.

Як можна перенести модальне вікно на іншу підсторінку?

Копіювання модального вікна - трохи складніший процес. Перейдіть до структури сторінки, наведіть курсор на три крапки поруч з вашим модальним вікном і скопіюйте його.

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

Чи можна налаштувати модальне вікно як глобальну секцію?

На жаль, це неможливо. Модальне поле створюється лише на одній підсторінці і не може автоматично використовуватися на інших сторінках.

Чи можна зробити посилання на модальне вікно з глобальної секції?

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

Як налаштувати автоматичне відображення модального вікна, коли відвідувач заходить на ваш сайт?

За замовчуванням Onepage не надає можливості автоматично відображати модальне вікно при завантаженні сторінки. Модальне вікно з'являється лише тоді, коли натискається попередньо налаштована кнопка.


💡Бажаєте залишити відгук до цієї статті? Будь ласка, напишіть у наш чат або за адресою support@onepage.io, і ми зможемо її покращити. Дякуємо! 🙂

Ви отримали відповідь на своє запитання?