Форми в листах без кодингу? Презентуємо блок «AMP-форма» в Stripo

Нещодавно ми анонсували, що в нашому редакторі незабаром з'явиться блок «Форма», який дозволить будь-якому маркетологу, незалежно від технічних навичок, створювати власні форми, які працюватимуть безпосередньо в листах. Цей день нарешті настав. Блок «AMP-форма» доступний для всіх, а в цьому спеціальному гайді ви дізнаєтеся, як він працює.

Що таке блок «AMP-форма»?

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

Як функціонує блок «AMP-форма»

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

Додавання блоку «AMP-форма»

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

Використання «Сервісу даних» в блоці

«Сервіс даних» є важливою частиною блоку «AMP-форма», оскільки без під'єднаного сервісу форма не буде працювати. «Сервіс даних» зберігає всі відповіді, листи та інші дані одержувачів після того, як вони заповнять форму і клікнуть на кнопку «Надіслати».

Під'єднати «Сервіс даних» до блоку дуже просто, оскільки ми зробили випадний список створених сервісів, з якого можна вибрати потрібний. Кожен сервіс, створений у Stripo, відображатиметься в цьому списку.

Ми створили повноцінний гайд про те, як працює «Сервіс даних» і як зробити власний «Сервіс даних» в Stripo, щоб ви могли без зусиль використовувати його для збирання даних.

Крім того, у вас завжди є можливість під'єднати сторонній «Сервіс даних», просто додавши посилання на нього у відповідне поле.

Налаштування елемента форми

У разі додавання блоку «AMP-форма» в ньому вже міститься один елемент форми. Кожен елемент форми — це частина майбутньої форми, яка визначає її зовнішній вигляд і функціонал.

Після кліку на кнопку «+ Додати елемент форми» з'являється список можливих варіантів. Зараз доступний лише один варіант, але в майбутніх оновленнях ми додамо інші.

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

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

Кнопка «Налаштування» — це місце, де можна налаштувати всі параметри інпуту. Давайте розглянемо кожен параметр і його призначення.

Тип

У цьому полі можна вибрати тип введення, наприклад:

• текст; 
• email; 
• число;
• телефон;
• багаторядковий текст;
• приховане поле.

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

Для нашої форми підійде поле «Текст».

Обов'язкове поле

Назва цієї опції говорить сама за себе: вона забороняє надсилання порожньої форми. 

Щойно одержувач клікне на кнопку «Надіслати» з порожньою формою, з'явиться відповідне повідомлення.

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

Відобразити мітку

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

Підказка поля

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

Змінна

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

Зовнішні відступи

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

Вкладка «Стилі»

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

1. Колір мітки поля — змінює колір шрифту мітки форми.
2. Шрифт мітки поля — змінює шрифт мітки форми.
3. Розмір шрифту мітки — змінює розмір шрифту мітки.
4. Висота поля — змінює висоту інпута.
5. Закруглення обведення поля — робить межі інпуту більш округлими або квадратними залежно від вибраного користувачем числа.
6. Колір тексту поля — змінює колір тексту інпута, який бачитимуть одержувачі під час написання відгуку.
7. Шрифт тексту поля — змінює стиль шрифту, що вводиться в поле тексту.
8. Розмір шрифту поля — змінює розмір шрифту тексту, що вводиться одержувачем.
9. Відображати вн. тінь — змінює відображення тіней меж інпута.
10. Обведення поля — налаштовує товщину меж інпуту.
11. Колір обведення поля — змінює колір межі інпуту.

Вкладка «Успіх»

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

Просто введіть тут потрібний текст, і одержувачі його побачать.

Також можна додати кнопку «Почати заново» за допомогою перемикача.

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

1. Колір фону — змінює колір фону всієї вкладки «Успіх».
2. Колір тексту — змінює колір повідомлення про успішне надсилання форми.
3. Фонове зображення — дозволяє додати фонове зображення на вкладку «Успіх».
4. Межа — змінює товщину меж вкладки «Успіх».
5. Колір межі — змінює колір рамки вкладки «Успіх».
6. Радіус — дозволяє налаштувати заокруглення для повідомлення про успішне надсилання форми.

Фолбек

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

Отримувати відгуки все одно необхідно, тому в таких випадках варто вбудувати в листи фолбек для форми. Його можна легко створити в нашому редакторі.

Спочатку перетягніть блок «Текст» у шаблон одразу над або під інтерактивною формою.

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

Після цього перетягніть блок «Кнопка» в шаблон і налаштуйте його дизайн відповідно до загальної концепції.

Вставте посилання на окрему сторінку з формою або на Google Form, наприклад.

Останнє, що необхідно зробити, — це показувати дану структуру лише в HTML-версії шаблону. 

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

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

Як переглянути та протестувати форму?

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

Щоб наша форма могла витягувати електронні адреси одержувачів після її заповнення, ми додали приховане поле з прикріпленим до нього merge-тегом. Це поле видно лише в редакторі, але воно є невидимим у папці вхідних листів.

Ми щойно додали ще один інпут за допомогою опції «+ Додати елемент форми» і присвоїли йому стан «Приховане поле».

Після цього ми просто вставили базовий merge-тег для отримання листа і присвоїли всьому інпуту відповідну змінну.

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

Просто додайте необхідні електронні адреси, на які хочете надіслати тестовий лист, у відповідне поле. Після кліка на кнопку «Надіслати тест» на всі ці адреси надійде ваш лист.

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

Кожен тестовий лист має назву Stripo TEST, і ось як він виглядає в пошті.

Простий тест показує, що наша форма працює чудово.

І дані надходять безпосередньо в наш «Сервіс даних».

Є ще один спосіб протестувати лист. Просто скористайтеся вбудованою функцією прев'ю, клікнувши на кнопку з такою ж назвою.

Ця функція дозволяє переглядати як десктопну, так і мобільну версії форми зворотного зв'язку та тестувати її функціональність.

Майбутні оновлення блоку

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

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

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

На завершення

Форма — чудовий спосіб збирання важливої для бізнесу інформації та відгуків. Однак раніше для цього необхідно було створювати окрему сторінку, на яку вело посилання в листі, щоб аудиторія могла заповнити форму. Блок «AMP-форма» спрощує процес і дозволяє зробити листи інтерактивними за допомогою форми, яку одержувачі можуть заповнити просто в листі. 

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