У цій статті ми розповімо про свіжу функцію нового редактора Stripo — блок «AMP-форма». Ми покажемо, що це таке, як він працює, а також розповімо про майбутні оновлення, про які вам варто знати.
Нещодавно ми анонсували, що в нашому редакторі незабаром з'явиться блок «Форма», який дозволить будь-якому маркетологу, незалежно від технічних навичок, створювати власні форми, які працюватимуть безпосередньо в листах. Цей день нарешті настав. Блок «AMP-форма» доступний для всіх, а в цьому спеціальному гайді ви дізнаєтеся, як він працює.
Що таке блок «AMP-форма»?
Передусім, давайте швидко розберемося, що це таке. Це інтерактивний блок, його можна додати в шаблон листа, і він надасть повноцінну форму, яку одержувачі зможуть заповнити, щоб залишити відгук про ваш продукт або послугу. Одержувачу не потрібно переходити на зовнішній сайт, щоб заповнити форму. Все відбувається безпосередньо в листі, в його пошті.
Як функціонує блок «AMP-форма»
Тепер давайте розглянемо, як працює цей блок і що можна налаштувати в нашому редакторі, щоб побачити весь його потенціал.
Додавання блоку «AMP-форма»
Перш за все, давайте додамо наш блок у шаблон. Це працює так само, як і з іншими блоками, оскільки все, що потрібно зробити, — це перетягнути блок у потрібний контейнер. Цей блок має одну мітку, одне поле введення та кнопку, яка надсилає дані з поля введення вам.
Використання «Сервісу даних» в блоці
«Сервіс даних» є важливою частиною блоку «AMP-форма», оскільки без під'єднаного сервісу форма не буде працювати. «Сервіс даних» зберігає всі відповіді, листи та інші дані одержувачів після того, як вони заповнять форму і клікнуть на кнопку «Надіслати».
Під'єднати «Сервіс даних» до блоку дуже просто, оскільки ми зробили випадний список створених сервісів, з якого можна вибрати потрібний. Кожен сервіс, створений у Stripo, відображатиметься в цьому списку.
Ми створили повноцінний гайд про те, як працює «Сервіс даних» і як зробити власний «Сервіс даних» в Stripo, щоб ви могли без зусиль використовувати його для збирання даних.
Крім того, у вас завжди є можливість під'єднати сторонній «Сервіс даних», просто додавши посилання на нього у відповідне поле.
Налаштування елемента форми
У разі додавання блоку «AMP-форма» в ньому вже міститься один елемент форми. Кожен елемент форми — це частина майбутньої форми, яка визначає її зовнішній вигляд і функціонал.
Після кліку на кнопку «+ Додати елемент форми» з'являється список можливих варіантів. Зараз доступний лише один варіант, але в майбутніх оновленнях ми додамо інші.
Зараз можна додавати лише поле, і після вибору його в списку поле з'явиться одразу під вже наявним першим.
У цьому прикладі нам не потрібно два інпути, тому один з них необхідно видалити. Просто клікніть на кнопку з трьома крапками і виберіть потрібний пункт. Відкриється меню, в якому буде доступна опція «Видалити». Також є опція «Дублювати», яка створює копію поточного інпута прямо під ним.
Кнопка «Налаштування» — це місце, де можна налаштувати всі параметри інпуту. Давайте розглянемо кожен параметр і його призначення.
Тип
У цьому полі можна вибрати тип введення, наприклад:
- текст;
- email;
- число;
- телефон;
- багаторядковий текст;
- приховане поле.
Кожен параметр визначає, як буде працювати інпут і яку інформацію одержувач зможе в нього ввести. Наприклад, поле «Телефон» дозволяє вводити лише цифри, а введення тексту буде заборонено. Такий підхід дає можливість налаштувати поля під свої потреби.
Для нашої форми підійде поле «Текст».
Обов'язкове поле
Назва цієї опції говорить сама за себе: вона забороняє надсилання порожньої форми.
Щойно одержувач клікне на кнопку «Надіслати» з порожньою формою, з'явиться відповідне повідомлення.
Важлива примітка: це повідомлення не можна редагувати, воно генерується браузером.
Відобразити мітку
Мітка — це заздалегідь підготовлений текст, в якому можна поставити запитання або додати повідомлення з проханням залишити відгук. Її також можна вимкнути.
Підказка поля
Підказка поля дозволяє додати повідомлення-плейсхолдер, яке допоможе одержувачу зрозуміти, що саме від нього потрібно. При додаванні блоку «AMP-форма» в шаблон в нього автоматично вставляється повідомлення-плейсхолдер, але його можна видалити.
Змінна
Це поле необхідне для роботи форми і містить змінну для передавання даних в бекенд. Пам'ятайте, що ця змінна повинна бути унікальною і валідною.
Зовнішні відступи
Ці елементи керування дозволяють налаштувати відступи для форми як на десктопах, так і на мобільних пристроях (відступи на десктопі відображаються за замовчуванням, тому для зміни відступів на мобільних пристроях необхідно перейти в режим для мобільних пристроїв у редакторі).
Вкладка «Стилі»
Ця вкладка дозволяє змінити зовнішній вигляд блоку «AMP-форма». Тут є багато елементів керування для детальної кастомізації, і ось що вони означають:
- Колір мітки поля — змінює колір шрифту мітки форми.
- Шрифт мітки поля — змінює шрифт мітки форми.
- Розмір шрифту мітки — змінює розмір шрифту мітки.
- Висота поля — змінює висоту інпута.
- Закруглення обведення поля — робить межі інпуту більш округлими або квадратними залежно від вибраного користувачем числа.
- Колір тексту поля — змінює колір тексту інпута, який бачитимуть одержувачі під час написання відгуку.
- Шрифт тексту поля — змінює стиль шрифту, що вводиться в поле тексту.
- Розмір шрифту поля — змінює розмір шрифту тексту, що вводиться одержувачем.
- Відображати вн. тінь — змінює відображення тіней меж інпута.
- Обведення поля — налаштовує товщину меж інпуту.
- Колір обведення поля — змінює колір межі інпуту.
Вкладка «Успіх»
На цій вкладці знаходиться повідомлення, яке побачить одержувач після надсилання вам форми. Тут не так багато опцій, оскільки ви налаштовуєте це повідомлення в шаблоні, а не в спеціальному полі.
Просто введіть тут потрібний текст, і одержувачі його побачать.
Також можна додати кнопку «Почати заново» за допомогою перемикача.
Налаштування відступів працюють так само, як і для попередніх інпутів, тому ми пропустимо цю частину. Однак на цій вкладці є спеціальні параметри стилю, які допоможуть додатково налаштувати зовнішній вигляд. Після кліка на вкладку «Стилі» під час редагування вкладки «Успіх» відкриється меню з декількома параметрами для зміни зовнішнього вигляду цієї вкладки.
- Колір фону — змінює колір фону всієї вкладки «Успіх».
- Колір тексту — змінює колір повідомлення про успішне надсилання форми.
- Фонове зображення — дозволяє додати фонове зображення на вкладку «Успіх».
- Межа — змінює товщину меж вкладки «Успіх».
- Колір межі — змінює колір рамки вкладки «Успіх».
- Радіус — дозволяє налаштувати заокруглення для повідомлення про успішне надсилання форми.
Фолбек
Фолбек є важливим аспектом при створенні інтерактивних елементів листа. На даний момент інтерактивні елементи працюють і відображаються коректно лише в Gmail, Yahoo і FairEmail. Інші поштові клієнти не покажуть одержувачам нічого, крім гарних форм, оскільки такий контент буде просто вирізаний з листа.
Отримувати відгуки все одно необхідно, тому в таких випадках варто вбудувати в листи фолбек для форми. Його можна легко створити в нашому редакторі.
Спочатку перетягніть блок «Текст» у шаблон одразу над або під інтерактивною формою.
Створіть заохочувальний текст CTA, щоб одержувачі перейшли на зовнішню форму та залишили відгук про ваші послуги.
Після цього перетягніть блок «Кнопка» в шаблон і налаштуйте його дизайн відповідно до загальної концепції.
Вставте посилання на окрему сторінку з формою або на Google Form, наприклад.
Останнє, що необхідно зробити, — це показувати дану структуру лише в HTML-версії шаблону.
Вуаля, ваш фолбек готовий і буде відображатися в поштових клієнтах, які поки не підтримують інтерактивний контент. Кожен одержувач, який використовує поштовий клієнт, відмінний від Gmail, Yahoo і Fairmail, побачить цей текст з кнопкою, що веде на окрему сторінку. Якщо ж вони відкриють лист в Gmail, то побачать повноцінну інтерактивну форму, яку ми показали вам вище. Ось як це працює і чому так важливо створювати як інтерактивну, так і фолбек-версії.
Ви можете створити будь-який тип дизайну фолбека, який необхідний для розсилки. Основна мета фолбека — дати одержувачам можливість поділитися своєю думкою, навіть якщо вони використовують поштові клієнти без підтримки інтерактивності. В результаті завжди має бути посилання на зовнішню сторінку або форму, але як її оформити — повністю залежить від вас.
Як переглянути та протестувати форму?
Тестування інтерактивних елементів листів — це не просто бажаний крок, а обов'язковий процес, який гарантує, що AMP-форма працює належним чином і відображається правильно. Щоб показати, як можна протестувати AMP-форму, ми створили цю просту форму, використовуючи описані вище параметри.
Щоб наша форма могла витягувати електронні адреси одержувачів після її заповнення, ми додали приховане поле з прикріпленим до нього merge-тегом. Це поле видно лише в редакторі, але воно є невидимим у папці вхідних листів.
Ми щойно додали ще один інпут за допомогою опції «+ Додати елемент форми» і присвоїли йому стан «Приховане поле».
Після цього ми просто вставили базовий merge-тег для отримання листа і присвоїли всьому інпуту відповідну змінну.
Найбільш надійний спосіб переконатися, що інтерактивна форма працює без помилок, — це протестувати її в реальних умовах, тобто надіслати на пошту. Для цього клікніть на кнопку «Тестувати».
Просто додайте необхідні електронні адреси, на які хочете надіслати тестовий лист, у відповідне поле. Після кліка на кнопку «Надіслати тест» на всі ці адреси надійде ваш лист.
Важлива примітка: кількість тестів обмежується тарифним планом. Кількість тестів, що залишилися, можна перевірити на головній сторінці.
Кожен тестовий лист має назву Stripo TEST, і ось як він виглядає в пошті.
Простий тест показує, що наша форма працює чудово.
І дані надходять безпосередньо в наш «Сервіс даних».
Є ще один спосіб протестувати лист. Просто скористайтеся вбудованою функцією прев'ю, клікнувши на кнопку з такою ж назвою.
Ця функція дозволяє переглядати як десктопну, так і мобільну версії форми зворотного зв'язку та тестувати її функціональність.
Майбутні оновлення блоку
Додавання блоку «AMP-форма» до вашого арсеналу — це лише початок, оскільки ми постійно вдосконалюємо функціональність редактора, і цей блок не залишиться без уваги. Найголовнішими та найважливішими нововведеннями стане додавання нових опцій форми. Наприклад, незабаром з'явиться нова форма, в якій одержувач повинен буде вибрати один з декількох варіантів відповіді.
Крім того, з'явиться можливість вибрати форму з випадним списком, щоб зробити листи з формами ще більш компактними, стильними та зручними для одержувача.
У наших довгострокових планах є додавання автоматичного генерування фолбека для форм, що дозволить зекономити час на їх створенні. Підписуйтесь на наші оновлення та новини, щоб першими випробувати всі нові функції.
На завершення
Форма — чудовий спосіб збирання важливої для бізнесу інформації та відгуків. Однак раніше для цього необхідно було створювати окрему сторінку, на яку вело посилання в листі, щоб аудиторія могла заповнити форму. Блок «AMP-форма» спрощує процес і дозволяє зробити листи інтерактивними за допомогою форми, яку одержувачі можуть заповнити просто в листі.
Наш редактор надає простий спосіб створення власної інтерактивної форми, для чого не потрібні навички кодування. Ми сподіваємося, що цей посібник допоможе вам використовувати інтерактивні форми в листах, роблячи комунікацію з аудиторією ще більш ефективною.
6 коментарів