Настройка AMP-формы в редакторе сообщений

Чтобы проводить опросы, собирать данные о клиентах прямо в письме, в редакторе eSputnik добавлен предзаготовленный блок “Форма”. Добавить её в письмо достаточно просто с помощью встроенных блоков.

Важно!

Чтобы при отправке рассылки AMP-форма отображалась в письмах у подписчиков, подайте заявку на подтверждение отправителя.

Шаг 1. Создание нового сервиса данных

Сервис данных – это место, где будут храниться отзывы и ответы ваших пользователей.

Пока сервис можно создать двумя способами:

  • В аккаунте Stripo,

  • Через Zapier.

Подробные инструкции по настройке обоих способов вы найдете в нашей статье AMP-опросы в емейле: создание сервиса для сбора полученных данных.

Рассмотрим на примере первого.

  • Зайдите в аккаунт Stripo.

  • На левой панели выберите вкладку “Данные”.

  • Кликните по кнопке “Создайте свой сервис”.

Хранилище данных для форм

Перед вами откроется окно для заполнения:

  • Укажите нужное название сервиса. 

  • Дайте краткое описание.

  • В строках “Идентификатор” и “URL адрес” данные заполнятся автоматически.

  • По умолчанию ползунок “Хранилище данных” включен. Это значит, что собранные данные будут храниться на серверах Stripo. При активации опции вы сможете выгружать данные в формате CSV.

Хранилище данных для AMP

  • Если вы планируете использовать внешние ресурсы для хранения данных, активируйте ползунок и добавьте ссылку на него.

Внешнее Хранилище Данных

Это позволит сохранять заполненные данные в Zapier, Google Sheets или в любом другом хранилище данных, связанных с письмами через Zapier.

Шаг 2. Создание формы в письме

В редакторе сообщения кликните слева вкладку “Контент” → “Блоки”:

Добавление формы в письмо

Перетяните блок “Форма” в любое место письма и кликните по оранжевой плашке “ϟHTML”, чтобы открыть общие настройки.

Добавление AMP формы

В строке “Сервис для сбора данных” укажите необходимый:

Сервис сбора данных

Кликните на “Добавить элемент формы” и выберите вариант из выпадающего списка:

  • Поле ввода

text, textarea, number, email, tel, date, time, date-time, password, range

  • Скрытое поле

hidden – используется для передачи данных с формы без участия пользователя. Например, если нужно передать емейл или имя респондента, которые и так находятся в базе и нет необходимости запрашивать их ещё раз.

Вскоре также появятся: Переключатель, Множественный выбор, Выпадающий список.

Для выбранной строки выберем “Поле ввода”.

Настройка формы

Далее задайте общие настройки для структуры:

  • Скрыть форму после отправки

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

Скрытие формы после заполнения

  • Цвет фона

Выберите цвет из выпадающего списка или укажите в поле код.

Цвет фона формы

  • Обводка

По умолчанию можно задавать общую или переключить ползунок, чтобы работать с каждой стороной отдельно. Также можно выбрать тип линий.

Обводка в настройках

  • Отступы

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

Настройки оформления

  • Скрытие элемента

По умолчанию эта функция выключена, но можете скрыть структуру для отображения в письме на мобильных или для десктопа:  

Скрытие элементов в письме

Редактирование блоков формы

Строка заполнения

Кликните на Label name в форме, чтобы начать ее редактирование;

Заполнение полей формы

  • В строке “Отображать метку поля” введите основной текст формы. Количество символов не ограничено. Если нужна только строка для заполнения, отключите ползунок.

  • Переключатель “Обязательное поле” необходим, если вы используете несколько вопросов и среди них есть такие, что должны быть заполнены обязательно.

  • В строке “Подсказка поля” укажите пример заполнения.

Подсказка для полей

  • В следующее поле придумайте и введите имя переменной, которое поможет быстрее находить данные пользователей среди тех, что отправляет форма. Например, в CSV-файле. Переменная может быть прописана только латиницей. Имена переменных могут включать только прописные или строчные буквы латинского алфавита (A-Z и a-z), цифры (0-9), подчеркивание (_).

Настройка переменных

Важно:

Чтобы узнать, кто из подписчиков оставил отзыв, перейдите в настройки всей структуры по клику на “ϟHTML”:

  • В пункте “Добавить элемент формы” выберите “Скрытое поле”.

Скрытое поле

  • В настройках поля укажите “Значение по умолчанию”. В нашем случае – это %EMAIL% (подстановка email-адреса респондента). Подробнее о переменных.

Скрытое поле

Это поле будет скрыто в письмах пользователей.

Кнопка

Кликните на блок с кнопкой в шаблоне, чтобы перейти к её редактированию.

Настройки блока

Задайте такие параметры:

  • Текст кнопки.

  • Стиль текста – можно задать вид, размер, начертание.

  • Цвет кнопки.

  • Цвет кнопки по наведению (если в общем оформлении письма активирован переключатель “Подсвечивать по наведению”).

Настройки кнопки

  • Цвет текста.

  • Цвет текста по наведению.

  • Цвет фона (применяется для всего блока).

  • Закругление.

  • Выравнивание кнопки на мобильном устройстве.

  • Кнопка с иконкой.

Настройки кнопки

  • Растянуть по ширине.

  • Обводка.

  • Обводка по наведению.

  • Внешние отступы.

Отличие от обычной кнопки СТА в том, что здесь не требуется ссылка, так как по клику будет показываться ответное сообщение.

Область уведомлений

Доступны два вида уведомлений:

  • об успехе – зеленый по умолчанию.

  • об ошибке – красный.

Настройка ответов

Кликните по блоку, чтобы отредактировать внешний вид. Доступны такие параметры:

Ответы на заполненную форму

Чтобы отредактировать текст ответного сообщения, кликните именно по нему.
 

Настройки ответов формы

Шаг 2.2. Добавление альтернативной формы

Самый просто способ – создать Google форму или опрос в SurveyMonkey. Как это сделать, смотрите в инструкции.

Ссылку на созданную форму можно добавить к любому элементу в письме. Мы рассмотрим пример с кнопкой.

Из вкладки “Блоки” перетащите нужный в письмо.

Альтернативная кнопка

Задайте желаемое оформление: цвет, стиль, отступы и т. д.

Важно!

Чтобы эта кнопка была видна только в случае, если не отобразится AMP-контент (форма), включите для этого блока “HTML”.

HTML кнопка

Шаг 3. Как проверить что все работает

Чтобы проверить, как работает отображение формы, кликните на иконку предпросмотра на панели редактора.

Предпросмотр писем 

Перед вами откроются версии письма на десктопе и на мобильном.

Проверка разных версий письма

При наличии каких-либо ошибок, появится уведомление, по клику на которое можно будет прочесть их описание и исправить. Это необходимо, так как если в коде есть хоть одна ошибка, то АМП-контент не отобразится.

Ошибки в AMP-версии

Если в письме ошибки не найдены, запустите тестовое сообщение на ящик @mail.ru или @gmail. Если вы ещё не стали доверенным отправителем, для Джимейл необходимо разрешить отображение динамического контента. Как подать заявку и/или стать разрешенным отправителем, смотрите в инструкции.

Отправка тестового письма

Когда форма сделана правильно, в полученном письме будет видна молния и блок с формой.

AMP в отправленном письме

Шаг 4. Как проверить, что ответы записываются

После отправки теста зайдите в Stripo и перейдите к ранее созданному источнику данных.

Подчсет статистики

Здесь у вас отобразится количество запросов, время заполнения формы последним пользователем и кнопки для редактирования и скачивания данных.

Нажмите на соответствующую иконку, чтобы скачать файл в CSV-формате.

Выгрузка данных

Для оценки эффективности рассылки, зайдите в Рассылки - Отчеты и кликните на нужное письмо. На странице отчета отобразится количество подписчиков, которые получили письмо с разными версиями.

Статистика по разным версиям письма

Подробнее про AMP-отчеты.

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email