Формы в письмах без кодинга? Представляем блок «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-форма» упрощает процесс и позволяет сделать письма интерактивными с помощью формы, которую получатели могут заполнить прямо в письме. 

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