Конструктор форм підписки: дизайн форм

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

Конструктор форм підписки — це візуальний редактор для всіх форм підписки та цільових сторінок Maildroppa.

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

Maildroppa використовує один і той самий конструктор для чотирьох типів форм:

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

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

Відкриття конструктора форм підписки

Відкрийте «Signup Forms» у Maildroppa. Потім натисніть «Create Form», щоб створити нову цільову сторінку, вбудовану форму, спливне вікно або висувну форму.

Щоб продовжити роботу з наявною формою, натисніть її назву або виберіть «Edit Form» у меню дій із трьома крапками в огляді форм підписки.

Дайте формі зрозумілу внутрішню назву. Назви на кшталт «Newsletter на головній сторінці», «Спливне вікно вебінару» або «Літній лід-магніт» легше розпізнати пізніше, ніж загальні назви на кшталт «Форма 1». Назва форми допомагає керувати формою в Maildroppa й автоматично не показується відвідувачам.

Розуміння конструктора

Конструктор поділено на чотири основні області.

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

Ліва бічна панель містить розділи «Layout», «Content» і «Layers». Використовуйте її для створення структури, додавання нових елементів і керування всім, що вже розміщено на полотні.

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

Права бічна панель містить розділи «Settings» і «Page settings». Розділ «Settings» змінює вибраний елемент. Розділ «Page settings» змінює загальний фон і стандартні параметри дизайну.

На менших екранах бічні панелі відкриваються як панелі за допомогою кнопок «Content» і «Settings». Доступні функції залишаються такими самими.

Початок роботи з шаблоном

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

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

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

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

Створення макета

Відкрийте «Layout» на лівій бічній панелі, щоб додати новий рядок комірок. Доступні такі макети:

• Одна комірка
• Дві, три або чотири однакові комірки
• Дві комірки у співвідношенні 2:1
• Дві комірки у співвідношенні 1:2

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

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

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

Додавання вмісту

Відкрийте «Content» на лівій бічній панелі, щоб додати окремі блоки вмісту. Натисніть блок, щоб вставити його, або перетягніть його в потрібне місце на полотні.

Конструктор містить такі блоки вмісту:

Signup form — містить поля підписника та кнопку надсилання. Щоб дизайн можна було зберегти як робочу форму, він має містити один блок форми підписки. Після додавання цього блоку він більше не пропонується як додатковий блок вмісту.

Text — додає заголовки, абзаци або інший форматований текст.

Image — додає зображення з URL-адреси, завантаження або медіатеки Maildroppa. Можна додати альтернативний текст і посилання, а також налаштувати розміри, співвідношення сторін, обрізання, фокусну точку, обертання та віддзеркалення.

Video — додає відео з YouTube або Vimeo, URL-адресу вбудовування чи прямий відеофайл. Також можна налаштувати зображення попереднього перегляду та вигляд кнопки відтворення.

List — додає маркований або нумерований список. Редагуйте елементи та налаштовуйте колір маркерів, відступи, типографіку й вирівнювання.

Button — додає кнопку-посилання з налаштовуваними текстом, URL-адресою, розміром, шириною, кольорами, рамкою, типографікою та вирівнюванням.

Social links — додає пов’язані піктограми таких сервісів, як Facebook, Instagram, LinkedIn, TikTok, YouTube або ваш вебсайт.

Subscriber counter — показує поточну кількість підтверджених підписників. Можна додати зміщення, змінити підпис і налаштувати вигляд числа та тексту.

Spacer — додає контрольований порожній простір. Відступи для комп’ютерів і мобільних пристроїв можна налаштовувати окремо.

Divider — додає горизонтальну лінію з налаштовуваними кольором, товщиною, шириною, стилем, вирівнюванням і відступами.

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

Вибір і впорядкування елементів

Натисніть елемент на полотні, щоб вибрати його. Його налаштування з’являться на правій бічній панелі.

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

Відкрийте «Layers», якщо сторінка містить багато вкладених блоків, колонок і блоків вмісту. Панель шарів показує повну структуру у вигляді списку. Звідти можна:

• Вибрати елемент
• Перейменувати його для зручнішої ідентифікації
• Перемістити його вгору або вниз
• Перетягнути його в іншу позицію
• Заблокувати або розблокувати його
• Дублювати його
• Видалити його

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

Використовуйте «Undo» і «Redo» на панелі інструментів конструктора, щоб переходити назад або вперед між нещодавніми змінами дизайну.

Редагування тексту

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

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

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

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

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

Поля підписника

Адреса електронної пошти — основне поле форми підписки. Також можна додати поля підписника, які існують у вашому обліковому записі Maildroppa.

Для кожного поля можна змінити мітку й заповнювач, визначити, чи є воно обов’язковим, а також вибрати, чи показувати мітку поля. Поля можна впорядковувати перетягуванням або за допомогою елементів керування переміщенням.

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

Приховані теги

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

Це корисно для визначення джерела або інтересу, пов’язаного з підпискою. Наприклад, форма для вебінару може застосовувати тег «Вебінар», а форма лід-магніту — тег, що відповідає завантаженій темі.

Індикатор виконання

Індикатор виконання можна вимкнути або відображати у вигляді відсотка чи двокрокового індикатора.

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

Індикатор виконання може допомогти пояснити, що надсилання форми є першим кроком, а підтвердження електронного листа Double Opt-in — другим.

Лічильник підписників у формі

Форма підписки може показувати поточну кількість підтверджених підписників до або після кнопки надсилання.

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

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

Дизайн форми, полів введення та кнопки

Налаштування «Signup Form Block» керують контейнером навколо полів, зокрема його фоном, рамкою, радіусом кутів і відступами.

Налаштування полів введення керують фонами полів, мітками, текстом, заповнювачами, рамками та відступами. Для кнопки надсилання є окремі налаштування тексту, типографіки, кольорів, рамки, розмірів і вирівнювання.

Можна натиснути індикатор виконання або кнопку надсилання безпосередньо на полотні, щоб одразу відкрити налаштування відповідної частини.

Зміна загального вигляду

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

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

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

Ці стандартні параметри допомагають зберігати узгодженість дизайну. За потреби окремі блоки все одно можуть їх перевизначати.

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

Кожна форма підключена до процесу підписки. Процес підписки керує шляхом підписника після надсилання форми:

• Що відвідувач бачить одразу після надсилання форми
• Який електронний лист Double Opt-in надсилається
• Що відбувається після підтвердження підписником адреси електронної пошти

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

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

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

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

Для вбудованих форм, спливних вікон і висувних форм натисніть «Save changes», коли будете готові зберегти поточну версію.

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

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

Продовжіть роботу з вашим типом форми

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

• Створення та публікація цільової сторінки
• Створення та вбудовування вбудованої форми
• Налаштування та відображення спливного вікна
• Налаштування та позиціонування висувної форми