Створення та вбудовування форм підписки

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

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

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

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

Створення вбудованої форми

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

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

Внутрішня назва автоматично не відображається відвідувачам. Назвіть форму відповідно до її розташування або призначення, наприклад «Homepage Newsletter», «Blog Footer» чи «Product Updates».

Вибір початкового дизайну

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

• Calm note
• Coupon strip
• Dark editorial
• Minimal blue

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

Розроблення вбудованої форми

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

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

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

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

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

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

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

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

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

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

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

Активація форми

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

Якщо форма неактивна, відкрийте меню дій із трьома крапками в огляді Signup Forms і виберіть «Activate». Для активної форми відображається дія «Show Code Snippet».

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

Копіювання коду JavaScript

Натисніть «Show Code Snippet» і відкрийте вкладку «JavaScript». Maildroppa надає короткий скрипт, що містить унікальний ідентифікатор форми.

Код має таку структуру:

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

Скопіюйте код повністю, не змінюючи адресу скрипту або ідентифікатор форми.

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

Додавання форми на вебсайт

Вставте скрипт у те місце сторінки, де має відображатися вбудована форма.

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

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

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

Використання вкладки HTML

Вкладка «HTML» містить згенеровану розмітку форми. Цей варіант призначений для власних реалізацій, у яких ви хочете працювати безпосередньо з відтвореним HTML-кодом.

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

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

Тестування вбудованої форми

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

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

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

Оновлення вбудованої форми

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

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