Створення та позиціонування висувних форм

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

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

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

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

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

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

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

Використовуйте такі назви, як «Blog Newsletter Slide-in», «New Product Reminder» або «Summer Coupon Slide-in». Внутрішня назва допомагає керувати формою й автоматично не відображається відвідувачам.

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

Висувні форми пропонують порожню форму, стандартну форму та чотири готові шаблони:

• Лаконічне нагадування
• Темна пропозиція
• Теплий купон
• Мінімалістична нотатка

Шаблони розроблені для компактних повідомлень, але кожен елемент можна редагувати. Після вибору початкового шаблону можна змінити вміст, поля, кольори, типографіку, рамку, відступи та кнопку надсилання.

Створення дизайну висувної форми

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

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

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

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

Вибір позиції на екрані

Виберіть блок форми підписки та відкрийте «Widget Settings». Селектор позиції пропонує сітку три на три:

• Зверху ліворуч, по центру або праворуч
• По центру ліворуч, по центру або праворуч
• Внизу ліворуч, по центру або праворуч

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

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

Налаштування затримки відображення

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

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

Коротка затримка може добре працювати для простого нагадування про розсилку. Для довшої статті пізніша поява може здаватися природнішою та робити пропозицію релевантнішою для зацікавлених читачів.

Налаштування частоти відображення

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

• Завжди
• Раз на годину
• Раз на день
• Раз на тиждень
• Раз на місяць

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

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

Підключення процесу підписки

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

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

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

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

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

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

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

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

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

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

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

Після додавання коду протестуйте реальну сторінку сайту:

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

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

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

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

Виберіть «Deactivate» в огляді Signup Forms, якщо висувну форму потрібно прибрати з сайту без видалення. Також видаліть її скрипт із сайту, якщо більше не плануєте використовувати її там.