Mailchimp — создать регистрационную форму

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

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

Сначала посмотрим на панель основных настроек. Чтобы получить к нему доступ, нажмите Аудитория> Управление аудиторией> Настройки:

Затем щелкните ссылку в раскрывающемся меню «Настройки»> «Название аудитории и значения по умолчанию» или ссылку «Имя аудитории и значения по умолчанию», как показано на рисунке:

В разделе Название аудитории и настройки кампании по умолчанию содержатся следующие настройки:

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

Настройки формы — в этом разделе есть три важных настройки, которые мы рекомендуем вам проверить:

• Включить двойную подписку — система отправляет электронное письмо для подтверждения контактов, когда они подписываются на вашу рассылку.
• Включить reCAPTCHA — проверка ReCAPTCHA предотвращает автоматическое добавление спам-ботов в вашу аудиторию.
• Включите поля GDPR — настройте регистрационные формы в соответствии с требованиями GDPR. Когда GDPR активирован, в форме отображается юридический текст по умолчанию. Вы можете изменить юридический текст и доступные параметры через Конструктор форм.

В разделе Campaign defaults у вас есть доступ к следующим настройкам:

• Имя по умолчанию — имя, с которого отправляются ваши электронные письма. Используйте имя, которое ваши подписчики легко узнают.
• Адрес электронной почты по умолчанию От — содержит ваш адрес электронной почты, на который можно получать ответы на электронные письма. Регулярно проверяйте его, чтобы поддерживать связь со своей аудиторией.
• Тема электронного письма по умолчанию (необязательно) — вы создадите индивидуальную тему для каждой кампании, поэтому поле можно оставить пустым.
• Настройки URL кампании — эта опция доступна только для платных планов Mailchimp.
• Отправьте последнее приветственное письмо — отправьте автоматическое электронное письмо, чтобы приветствовать новых контактов, которые добавляются к вашей аудитории. Содержимое этого письма можно редактировать в дизайнере форм.
• Разрешить пользователям выбирать электронные письма в виде обычного текста или HTML — эта опция позволяет контактам указывать при регистрации, в каком формате (обычный текст или HTML) они хотят получать ваши электронные письма.
• Отправлять подписчикам подтверждения отказа от подписки — когда опция отмечена, система отправляет последнее электронное письмо, чтобы уведомить контакты о том, что они отписались от вашей рассылки. Сообщения полезны в случаях, когда подписчики случайно отказались от подписки, например, кем-то, кому они отправили кампанию.

Раздел уведомлений о новых подписчиках:

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

В поле Уведомления о подписке / отказе от подписки на: введите один или несколько адресов электронной почты для получения этих сообщений. Вы получите отдельное сообщение для каждого подписанного / отказавшегося от подписки подписчика.

Если вы хотите получать сводное сообщение об одних и тех же действиях один раз в день, введите свой адрес (а) электронной почты в поле «Сводка».

Нажмите кнопку «Сохранить аудиторию и настройки кампании по умолчанию», чтобы сохранить настройки.

Щелкните ссылку Формы регистрации, чтобы получить доступ к интерфейсу формы регистрации Mailchimp:

• Конструктор форм — создавайте, проектируйте и переводите регистрационные формы и отвечайте на электронные письма; управлять настройками GDPR.
• Встроенные формы — сгенерируйте HTML-код для встраивания регистрационной формы на свой сайт или в блог.
• Всплывающее окно для подписчика — создайте форму регистрации во всплывающем окне для своего сайта или блога.
• Интеграция форм — создавайте регистрационные формы с помощью инструментов интеграции.

Конструктор форм

Мы посмотрим, к каким инструментам у нас есть доступ в интерфейсе конструктора форм.

В меню «Формы и ответные электронные письма» вы должны выбрать тип создаваемой вами формы, в этом примере мы выбираем форму регистрации (Форма регистрации).

Если вы установите флажок Разрешить подписчикам выбирать формат электронной почты (обычный текст или HTML), подписчики смогут выбрать, в каком формате получать вашу рассылку — в виде обычного текста или HTML (могут отображаться заголовки, изображения, ссылки …).

URL-адрес формы регистрации. В этом поле Mailchimp сохраняет автоматически сгенерированный URL-адрес, по которому будет загружена текущая форма. Вы можете поделиться этой ссылкой в ​​своих социальных сетях и через мобильные устройства (QR).

Мы пришли сгенерировать саму регистрационную форму. Вверху у нас есть доступ к трем различным интерфейсам:

• Build it — создать структуру формы;
• Design it — создание индивидуального дизайна;
• Translate it — интерфейс автоматического перевода;

Построить это

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

• редактировать — редактировать заголовок;
• удалить — удалить заголовок; если вы нажмете ссылку по ошибке, заголовок будет немедленно удален, но вы можете восстановить его из следующего интерфейса, щелкнув текстовую ссылку использования;
• использовать изображение — интерфейс для вставки изображения; при нажатии открывается интерфейс для загрузки изображения. Вы должны выбрать изображение и вставить его в форму. Вы можете открыть выделенное изображение в редакторе и добавить текст, фон или изменить размер изображения. После добавления изображения в форму у вас будет доступ к тому же инструменту редактирования по ссылке для изменения:

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

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

Чтобы удалить поле, нажмите на ярлык или в поле — загрузятся два значка плюс (+) и минус (-):

Чтобы удалить поле из формы, щелкните поле и щелкните значок «минус» (-). В окне, которое загрузится, вы должны ввести термин УДАЛИТЬ заглавными буквами, чтобы подтвердить удаление.

При нажатии на значок плюса (+) поле дублируется.

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

При настройке полей GDPR необходимо создать хотя бы одно поле и установить флажок Требовать хотя бы один параметр.

Чтобы сохранить настройки нового поля, нажмите кнопку «Сохранить поле».

Разработай это

В следующем разделе у нас есть несколько инструментов дизайна, позволяющих изменить скучный дизайн по умолчанию в четырех основных областях — Page, Body, Forms и MonkeyRewards. При нажатии на одну из областей следующей строки загружается элемент дизайна, атрибуты CSS которого можно изменить.

В примере мы изменили размер и цвет описания, а также фон страницы формы:

Чтобы иметь возможность успешно использовать эти инструменты, вы должны обладать некоторыми знаниями CSS, которые совсем несложно изучить. По сути, вы должны быть осторожны, какой элемент выбран, чтобы внести правильные изменения.

Внизу страницы есть ссылка Сбросить настройки по умолчанию, с помощью которой вы можете восстановить дизайн и структуру по умолчанию. Рекомендуем создать фиктивную аудиторию и протестировать в ней все инструменты.

Перевести его

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

Чтобы изменить почти весь текст в форме, мы рекомендуем делать это в полях на панели настроек поля в интерфейсе Build it:

Форма регистрации выглядит так же при загрузке через браузер с URL-адресом, указанным в разделе формы регистрации:

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

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

Встроенные формы

Mailchimp предлагает четыре встроенных варианта разработки регистрационных форм:

• Классическая форма — в классической форме отображаются все видимые поля;
• Сжатая форма — сжатая форма показывает только поле адреса электронной почты и подходит для ограниченного пространства;
• Горизонтальная форма — горизонтальная форма размещает поле адреса электронной почты и кнопку «Подписаться» в горизонтальный ряд;
• Нестилизованная форма — нестилизованная форма показывает только необработанный HTML-код без CSS или JavaScript. Чтобы визуальные элементы формы точно соответствовали дизайну вашего веб-сайта, вам необходимо изменить код формы после ее добавления на сайт.

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

• Включить заголовок формы — введите название информационного бюллетеня.
• Показывать только обязательные поля — показывать только обязательные поля. Вы можете редактировать настройки поля в интерфейсе конструктора форм.
• Показать все поля — показать все поля.
• Показывать поля группы интересов — показывает доступные группы в аудитории для выбора подписчика, к какой группе присоединиться (рекомендуем отключить эту опцию).
• Показывать индикаторы обязательных полей — показывать звездочку рядом с обязательными полями.
• Показать параметры формата — позволяет пользователям выбирать формат электронных писем.
• Поля GDPR включены — показывает состояние настроек GDPR.
• Ширина формы — установка ширины формы, рекомендуется оставить поле пустым.
• Отключить весь JavaScript — удаляет проверку полей (не проверять).
• Включить ссылку на архив — отображает архивные страницы ваших кампаний (не отмечать).
• Включите ссылку MonkeyRewards — MonkeyRewards — это кредиты, которые вы зарабатываете, когда направляете новых клиентов в Mailchimp. Mailchimp требует, чтобы все бесплатные учетные записи включали MonkeyRewards в почтовые кампании и регистрационные формы (установите этот флажок).

Чтобы добавить код формы на наш сайт, нам нужно нажать на поле «Копировать / вставить на свой сайт» и скопировать код в буфер обмена. Затем мы должны вставить этот же код на страницу сайта.

В этом примере мы используем статический HTML-сайт Bootstrap 4, а в файл contacts.html помещаем код из Mailchimp. Поскольку у нас есть доступ ко всему коду, мы можем перевести весь текст в форме.

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

Mailchimp отправил письмо на контактную почту подписчика, и он должен подтвердить подписку, щелкнув ссылку в письме:

Подписчик должен нажать кнопку Да, включить меня в этот список:

Следующее — проверка reCaptcha для предотвращения автоматической регистрации ботов:

Подтверждение успешно завершенной подписки:

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

Мы создаем новый пост и вставляем тот же код Mailchimp прямо в редактор Gutenberg. Если вы используете классический редактор, перед вставкой кода необходимо переключиться в текстовый режим.

Публикуем и загружаем страницу в браузере, код отображается корректно:

Выполняем новую регистрацию через WordPress, которая также успешно завершается:

Всплывающее окно подписчика

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

Чтобы получить доступ к всплывающему окну подписчика, войдите в свою учетную запись Mailchimp, нажмите Аудитория> Управление аудиторией> Формы регистрации> Всплывающее окно подписчика.

Интерфейс программы разделен на две панели. На левой панели вы можете переключать режимы просмотра между настольным и мобильным устройством:

В правой панели мы выделяем три основных раздела:

• Дизайн — здесь вы настраиваете внешний вид всплывающей формы;
• Поля — здесь вы управляете настройками поля;
• Контент — добавить контент в форму;

Вкладка «Дизайн» содержит следующие настройки.

В разделе Формат вы можете выбрать один из трех типов всплывающей формы:

• Модальный — затемняет остальную часть экрана;
• Слайд — окно скользит по экрану;
• Исправлено — положение формы на экране фиксировано;

В разделе «Отображение» выпадающего меню необходимо выбрать момент появления всплывающей формы (для примера мы выбрали задержку в 5 секунд).

В разделе «Выравнивание изображения» необходимо выбрать структуру всплывающей формы, щелкнув один из четырех значков. Поля GDPR совместимы только с видами "Нет" и "Сверху".

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

В разделе Fields вам нужно отметить поля, которые вы хотите загрузить, а также поля GDPR:

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

Два редактора в разделах Body и Footer позволяют добавлять текст в соответствующие разделы всплывающей формы.

После выбора дизайна, настройки полей и ввода желаемого текста нажмите кнопку «Создать код». Загружается окно, из которого мы копируем код для добавления:

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

Закладываем код в HTML сайт, загружаем страницу и через 5 секунд (указанный нами интервал) форма загружается правильно:

Давайте теперь отредактируем тип всплывающей формы и загрузим Slide вместо Modal. Вносим изменения в настройки, нажимаем кнопку Publish и в следующем окне Publish Form нажимаем кнопку Publish:

Обновляем страницу, но форма не загружается. Когда вы впервые загружаете всплывающее окно (модальное), Mailchimp создает файл cookie MCPopupClosed в браузере (Firefox), который вы можете увидеть, щелкнув правой кнопкой мыши на сайте и выбрав в меню Проверить элемент> Хранилище> Файлы cookie. Выделите строку с файлом cookie, щелкните правой кнопкой мыши и выберите один из вариантов Удалить:

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

Когда вы закрываете форму, она возвращается за пределы экрана.

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

Интеграция форм

Другие инструменты на панели интеграции форм специфичны для поставщиков Wufoo, Squarespace и Facebook.