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

Как создать интерактивную форму в электронной почте

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

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

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

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

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

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

 http://example.com?Fname=Mark

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

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

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

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

У вас будет на выбор несколько различных типов ввода текста, в том числе:

 <input type = "text">
<input type = "email">
<input type = "tel">
<input type = "number">
<input type = "url">
<textarea> </textarea>

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

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

• Имя:
  Это определенное разработчиком имя поля формы, оно передается через строку URL.
• Ценить:
  Разработчик или пользовательское значение, связанное с именем в поле формы.

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

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

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

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

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

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

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

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

 http://example.com?tc=agree

Однако для радиокнопок требуются значения, и ваш элемент имени - это то, что группирует радиокнопки вместе. В этом примере у вас есть две группы переключателей - одна для радио и одна для телевидения, и вы можете выбрать одну станцию ​​в каждой группе.

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

Группировка вариантов вместе

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

• Наборы полей сгруппируют связанные элементы вместе
• Легенды - это, по сути, ярлыки для этих самых предметов.

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

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

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

Замена стиля переключателя по умолчанию

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

Прежде всего, вы захотите скрыть радиокнопку по умолчанию, используя следующие стили:

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

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

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

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

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

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

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

Хорошо, ваша форма построена. Теперь нам нужен способ для читателя представить его. Это можно сделать двумя способами: с помощью типа ввода «отправить» и типа кнопки «отправить»:

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

Резервные стратегии для интерактивных форм в электронной почте

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

• Показывает интерактивную форму в
  • Apple Mail
  • Gmail (настольный Интернет)
  • Yahoo (настольный Интернет)
• Показывает запасной вариант в:
  • Все Outlook и Почта Windows
  • Все мобильные устройства

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

CSS

HTML

Примеры: просмотр интерактивных форм в электронном письме в действии

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

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

Индиана Пэйсерс просят своих поклонников высказать свое мнение прямо в электронном письме:

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

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

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

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