Полное руководство по интерактивным формам в email

«Формы в email не работают».

«Формы работают на JavaScript — а это не поддерживается в email».

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

Эксперт по разработке email Марк Роббинс глубоко изучил тему интерактивных форм в email на Litmus Live 2019 — и это вдохновило нашу команду в Litmus на эксперименты с интерактивными формами. В этой статье мы поделимся основными принципами из выступления Марка, а также дополнительными советами и рекомендациями из наших собственных тестов, чтобы вы тоже могли внедрить интерактивные формы в свои email-рассылки.

Готовы погрузиться? Тогда начнем!

## Сила интерактивных форм в email

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

Например, вы могли бы:

— Собирать отзывы о продукте или обратную связь по NPS прямо в email

— Проводить короткие опросы без необходимости перенаправлять подписчиков на целевую страницу

— Позволять подписчикам обновлять профили пользователей или настройки email без посещения личного кабинета

— Встраивать формы генерации лидов прямо в кампании

— И многое другое!

Предоставление формы *непосредственно в email* может устранить необходимость в целевой странице. Каждый дополнительный шаг, который должен сделать подписчик для достижения цели, создает трение. Встраивание формы в email может уменьшить это трение, сократить путь к конверсии и в конечном итоге увеличить количество конверсий.

## Поддержка форм в email-клиентах

Одна из главных причин, по которой дизайнеры и разработчики email избегают использования интерактивных форм, — это опасение, что они могут не поддерживаться во многих почтовых клиентах. Однако миф о недостаточной поддержке больше не соответствует действительности. На самом деле, 4 из 5 ведущих почтовых клиентов — Gmail, iOS Mail, Apple Mail и Yahoo! Mail — поддерживают интерактивные формы, и на их долю приходится более 80% всех открытий писем, согласно данным Litmus Email Client Market Share.

Вот что мы обнаружили при тестировании поддержки интерактивных форм в популярных почтовых клиентах:

## Как создать интерактивную форму в email

Но как именно реализовать форму в HTML-письмах? Давайте разберем метод Марка шаг за шагом:

### 1. Настройте основы

Начнем с простого фреймворка:

На базовом уровне есть два атрибута, которые заставляют форму работать:

«`

«`

**Action**

Определяет целевую страницу или место назначения, куда отправляются данные формы.

**Method**

Есть два способа отправить данные на эту страницу: через GET или POST запрос. GET имеет лучшую поддержку в email, но есть один нюанс: если вы отправляете данные через метод GET, вы фактически прикрепляете эти данные к URL, поэтому отправленные данные формы будут видны в адресной строке.

Например, отправка вашего имени через форму создаст URL, который выглядит так:

http://example.com?Fname=Mark

### 2. Настройте поля формы

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

Каждое поле формы требует метки — это информация, которая сообщает читателю email, для чего предназначено это поле. Для поля, запрашивающего имя, это выглядит так:

«`

Имя:

«`

Вы хотите собрать текстовый ввод для элемента с id=»fname», а метка for=»fname» связывает их. Однако некоторые веб-клиенты изменяют ваш код и не поддерживают подход с for и id. Они добавляют префиксы к именам классов и ID — ваш ID может измениться, а атрибут for — нет. Результат: метка больше не соответствует ID, и это ломает форму. Вот простое решение, чтобы этого избежать: оберните метку вокруг поля ввода:

«`

Имя:

«`

У вас есть несколько типов текстовых полей на выбор, включая:

«`

«`

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

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

**Имя:**

Это имя поля формы, заданное разработчиком, которое передается через строку URL.

**Значение:**

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

Вспомним наш пример с именем: http://example.com?Fname=Mark — это URL, который отправляет имя «Mark» (=значение) для поля формы «First Name» (=имя).

Добавим область для комментариев (name=»comment») в нашу форму:

«`

«`

Результирующий URL при отправке формы будет выглядеть так:

http://example.com?Fname=Mark&comment=hello

#### Флажки и переключатели

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

Для флажков значения необязательны. Если вы не зададите значение для флажка, оно будет отправлено как «on» или «off». Это работает, но вы можете изменить значение на другие формулировки в зависимости от того, как планируете обрабатывать данные на принимающей стороне.

Например, вот флажок, который отправляет значение «agree», если подписчик ставит галочку, соглашаясь с условиями:

«`

«`

http://example.com?t-c=agree

Для переключателей значения обязательны, а элемент name объединяет переключатели в группы. В этом примере у нас есть две группы переключателей — одна для радио, другая для телевидения — и вы можете выбрать одну станцию в каждой группе.

«`

«`

Заметили *checked* на первом переключателе? Так вы отмечаете переключатель, который хотите отобразить как предварительно выбранный.

#### Группировка опций

Когда вы хотите сгруппировать переключатели или флажки, на помощь приходят fieldset и legend.

— Fieldset группирует связанные элементы

— Legend — это, по сути, метки для этих элементов

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

«`

Любимый цвет

Красный

Синий

«`

Fieldset удобны, если нужно сгруппировать разные части информации, например адрес — улица, почтовый индекс, штат и страна.

Стандартное оформление переключателей и флажков не очень хорошее. Оба отображаются довольно маленькими, что делает их недоступными для многих читателей. Поэтому выше мы добавляем div-класс, который позволит заменить стандартное оформление переключателей на стили по вашему выбору.

#### Переопределение стандартного оформления переключателей

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

Сначала нужно скрыть стандартный переключатель с помощью этих стилей:

«`

.hidden-radio {

display: inline-block;

opacity: 0;

width: 0;

height: 0;

margin: 0 -9999px 0 0;

float: right;

position: absolute;

}

«`

Теперь, когда мы скрыли стандартные элементы ввода, нужно заменить состояние фокуса ввода нашими собственными стилями, добавив подсветку или обводку к элементу, на котором фокусируется читатель:

«`

input:focus + .button {

outline: Highlight auto 2px;

outline: -webkit-focus-ring-color auto 5px;

}

«`

И наконец, оформляем наши кнопки так, как вы обычно это делаете. Если вы используете эффекты наведения для оформления кнопок и стимулирования кликов, вы можете сделать это и здесь. Кроме того, нужно добавить стили для состояния «checked» ваших переключателей, чтобы было легко отличить выбранный переключатель от невыбранного.

«`

.button { /* стиль */ }

.button:hover, input:focus + .button { /* стиль */ }

input:checked + .button { /* стиль */ }

«`

### 3. Передача скрытой информации

Вероятно, есть информация, которую вы хотите передать через форму *без* необходимости вручную вводить ее пользователем. Это могут быть такие элементы, как имена, идентификаторы пользователей или адреса электронной почты. Вы можете передавать скрытую информацию за кулисами с помощью типа ввода «hidden» — это действие не видно и не может быть изменено пользователем:

Например, этот фрагмент кода передаст идентификатор пользователя следующим образом:

«`

«`

http://example.com?user-id=U12345

### 4. Отправка формы

Отлично — ваша форма готова. Теперь нужен способ для читателя *отправить* ее. Есть два способа сделать это: тип ввода «submit» и тип кнопки «submit»:

«`

Отправить форму

«`

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

## Стратегии отката для интерактивных форм в email

Для каждого интерактивного письма крайне важно предусмотреть резервные варианты. Они гарантируют, что в почтовых клиентах, где формы работают неидеально, мы скрываем их и показываем резервный вариант. Поскольку поддержка форм на мобильных устройствах все еще нестабильна, мы предпочитаем скрывать формы на мобильных устройствах для всех писем Litmus и нацеливаем полноценный интерактивный опыт на самые популярные почтовые клиенты, поддерживающие функциональность интерактивных форм. Другими словами, мы реализовали код, который…

— Показывает интерактивную форму в:

— Apple Mail

— Gmail (веб-версия для настольных ПК)

— Yahoo (веб-версия для настольных ПК)

— Показывает резервный вариант в:

— Всех версиях Outlook и Windows Mail

— Всех мобильных устройствах

Вот как это выглядит в коде:

**CSS**

«`

.interactive-form {

display: block !important;

max-height: inherit !important;

overflow: visible !important;

}

.fallback-form {

display: none;

}

body[data-outlook-cycle] .outlookshow {

display: block !important;

width: auto !important;

overflow: visible !important;

float: none !important;

max-height: inherit !important;

max-width: inherit !important;

line-height: auto !important;

margin-top: 0px !important;

visibility: inherit !important;

}

body[data-outlook-cycle] .outlookhide {

display: none !important;

display: none;

overflow: hidden;

float: left;

width: 0px;

max-height: 0px;

max-width: 0px;

line-height: 0px;

visibility: hidden;

}

[class~=»x_outlookshow»] {

display: block !important;

width: auto !important;

overflow: visible !important;

float: none !important;

max-height: inherit !important;

max-width: inherit !important;

line-height: auto !important;

margin-top: 0px !important;

visibility: inherit !important;

}

[class~=»x_outlookhide»] {

display: none !important;

display: none;

overflow: hidden;

float: left;

width: 0px;

max-height: 0px;

max-width: 0px;

line-height: 0px;

visibility: hidden;

}

@media only screen and (max-width: 640px) {

.fallback-form {

display: block !important;

width: auto !important;

overflow: visible !important;

float: none !important;

max-height: inherit !important;

max-width: inherit !important;

line-height: auto !important;

margin-top: 0px !important;

visibility: inherit !important;

}

.interactive-form, .interactive-form p, .interactive-form label, .interactive-form input {

display: none !important;

display: none !important;

overflow: hidden !important;

max-height: 0px !important;

max-width: 0px !important;

line-height: 0px !important;

visibility: hidden !important;

}

}

«`

**HTML**

«`

«`

Примеры: посмотрите интерактивные формы в email в действии

Хотите увидеть все это в действии?

В этом письме мы добавили форму (и использовали веб-безопасные шрифты), чтобы читателям было проще связаться с одним из наших экспертов Litmus:

Команда Indiana Pacers запрашивает обратную связь у своих болельщиков прямо в письме:

## А что, если я не умею программировать?

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

Однако для многих маркетологов и разработчиков email, находящихся на ранних этапах карьеры, внедрение интерактивных элементов, таких как формы, может казаться невыполнимой задачей. Но есть хорошие новости — по крайней мере, если вы создаете email в Salesforce Marketing Cloud. Марк и его команда в Salesforce недавно добавили блоки форм в Content Builder Salesforce, позволяя маркетологам добавлять формы в свои письма и настраивать их под свои нужды без необходимости программирования. Если вы клиент Salesforce, рекомендуем ознакомиться!

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