Создание AMP-формы

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

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

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

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

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

• Через Zapier.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Поле ввода

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”.

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

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

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

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

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

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

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

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

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

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

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

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