Створення та відображення спливних форм

Published: 16 липня 2026 р. · Last updated: 21 липня 2026 р. · By Marcus Biel

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

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

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

Створення спливної форми

Відкрийте «Signup Forms», натисніть «Create Form» і виберіть «Popup». Введіть зрозумілу внутрішню назву та перейдіть до конструктора.

Ви також можете відредагувати наявну спливну форму, натиснувши її назву в огляді Signup Forms.

Використовуйте назву, яка пояснює пропозицію або розміщення, наприклад «Homepage Discount Popup», «Webinar Registration Popup» або «Guide Download Popup». Внутрішня назва не відображається відвідувачам автоматично.

Вибір шаблону спливної форми

Для спливних форм доступні порожня форма, стандартна форма та чотири готові шаблони:

• Clean discount
• Warm guide
• Dark webinar
• Soft community

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

Дизайн спливної форми

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

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

Виберіть блок форми підписки, щоб налаштувати поля, обов’язкову інформацію, приховані теги, індикатор прогресу, лічильник підписників, поля введення та кнопку надсилання. Відкрийте «Page settings», щоб змінити загальний фон спливної форми та стандартні параметри її вигляду.

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

Налаштування поведінки спливної форми

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

Display Delay

«Display Delay» визначає, скільки секунд Maildroppa очікує перед показом спливної форми на сторінці вебсайту, куди її вбудовано.

Введіть 0, щоб показати її без додаткової затримки. Використовуйте більше значення, якщо відвідувачам потрібно дати час прочитати сторінку до появи пропозиції. Конструктор приймає затримку до 86 400 секунд.

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

Display Frequency

«Display Frequency» визначає період, після якого спливну форму можна знову показати тому самому відвідувачу. Доступні такі варіанти:

• Always
• Once per hour
• Once per day
• Once per week
• Once per month

Використовуйте «Always» обережно. Спливна форма, яка постійно перериває взаємодію з тим самим відвідувачем, може його дратувати. Щоденна або щотижнева частота часто є кращою відправною точкою для загальної пропозиції на вебсайті.

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

Використання Exit Intent

Увімкніть «Exit Intent Popup», якщо спливна форма має відкриватися після того, як відвідувач перемістить вказівник за межі області сторінки, що може свідчити про його намір піти.

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

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

Відкриття спливної форми вручну з елемента сторінки

Спливна форма може відкриватися, коли відвідувач натискає певну кнопку, зображення або посилання на вашому вебсайті. Це тригер ручного натискання. Він відрізняється від «Exit Intent Popup», який реагує на переміщення вказівника за межі сторінки.

Налаштуйте та встановіть тригер ручного натискання так:

1. Відкрийте спливну форму в Signup Form Builder.
2. Натисніть блок форми підписки на полотні та відкрийте «Settings» праворуч.
3. Розгорніть «Widget Settings» і ввімкніть «Open popup when a customer clicks a page element».
4. Натисніть «Save changes».
5. Поверніться до огляду Signup Forms і активуйте спливну форму, якщо вона неактивна.
6. Натисніть «Show Code Snippet» у рядку цієї спливної форми.

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

1. Скопіюйте повний код із вкладки «JavaScript» і додайте його на сторінку вебсайту, де має бути доступна спливна форма.
2. Під кодом скопіюйте ID, указаний під написом «Add this ID to element from which you want to manually trigger Popup».
3. Додайте це точне значення до атрибута id кнопки, зображення або посилання, яке має відкривати спливну форму.

ID має такий формат:

maildroppa-popup-btn-[form-id]

Наприклад:

<button id="maildroppa-popup-btn-[form-id]">Get the guide</button>

JavaScript завантажує спливну форму. ID з’єднує спливну форму з вибраним елементом сторінки. Обидва мають бути присутні на одній опублікованій сторінці. Коли відвідувач натискає елемент із цим точним ID, скрипт Maildroppa відкриває спливну форму.

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

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

Під’єднання сценарію підписки

Перевірте призначений сценарій підписки у верхній частині конструктора. Він керує негайною відповіддю після надсилання, електронним листом Double Opt-in та результатом після підтвердження.

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

Попередній перегляд і збереження

Натисніть «Preview», щоб перевірити дизайн і поведінку спливної форми, не змінюючи версію, яка використовується на вашому вебсайті. Перевірте макет, елемент закриття, порядок полів, місце для валідації та відповідь після надсилання.

Натисніть «Save changes», коли спливна форма буде готова. Потім поверніться до огляду Signup Forms.

Активація та автоматичне вбудовування спливної форми

Якщо спливна форма ще неактивна, активуйте її через меню дій із трьома крапками. Потім натисніть «Show Code Snippet» і скопіюйте повний код із вкладки «JavaScript».

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

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

Цей розділ стосується випадків, коли спливна форма має відкриватися автоматично на основі затримки показу або поведінки exit intent. Щоб кнопка, зображення або посилання відкривали спливну форму після натискання, дотримуйтеся інструкцій у розділі

.

Загальні інструкції з вбудовування дивіться в розділі Створення та вбудовування вбудованої форми.

Тестування спливної форми на вашому вебсайті

Після додавання коду протестуйте спливну форму на реальній сторінці вебсайту:

1. Перевірте налаштовану затримку.
2. Перевірте кнопку закриття та натискання за межами форми.
3. Якщо функцію ввімкнено, перемістіть вказівник за межі сторінки, щоб перевірити exit intent.
4. Якщо функцію ввімкнено, натисніть налаштований елемент сторінки, щоб перевірити ручний тригер.
5. Перевірте макет на вузькому екрані.
6. Надішліть форму та завершіть процес Double Opt-in.
7. Перевірте підписника та приховані теги в Maildroppa.

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

Оновлення або деактивація спливної форми

Щоб оновити спливну форму, відкрийте її в Maildroppa, відредагуйте дизайн або поведінку, перегляньте результат і натисніть «Save changes». Фрагмент JavaScript і надалі використовуватиме той самий ID форми.

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