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

В статье вы узнаете:

  1. О типах формы подписки, которые можно настроить в SendPulse
  2. Как указать адресную книгу для формы подписки
  3. Элементы, которые можно добавить в форму
  4. Настройка общего вида подписки во вкладке «Дизайн»
  5. Разрабатываем уведомление, письмо-подтверждение и страницу подтверждения подписки
  6. Как вставить код формы на сайт?
  7. Валидация подписчиков через reCAPTCHA

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

Перейдите в меню «Формы подписки» → «Создать форму подписки».

В SendPulse есть возможность создать форму с нуля или выбрать готовую.

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

  • «Готовые формы» 

Это простой способ создать форму. Выберите готовую форму и отредактируйте названия полей.  

  • «Конструтор форм» 

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

 

Выберите тип формы подписки

В сервисе доступно 4 вида форм:

  • Встроенная форма

Используется для добавления формы подписки в самое удобное место вашего сайта. 

  • Попап-окно

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

  • Плавающая 

Будет отображаться в одном месте даже при прокрутке страницы пользователем.

  • Фиксированная

Закрепите местоположение в хедере, в левой (правой) колонке или в подвале сайта. 

Укажите адресную книгу 

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

Далее нажмите "В редактор".

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

 По клику на ней раскроется меню, в котором вы найдете следующие поля: «Имя», «Телефон», «Адрес», «Дата», «URL», «Уже подписан». Нажмите нужный элемент левой клавишей мыши и перетащите его в форму. 

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

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

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

Рассмотрим каждый из элементов.

  • Поле ввода

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

 

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

  • Чекбокс

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

  1. новости,
  2. скидки,
  3. конкурсы,
  4. приглашения на события.

Данные из чекбокса передаются в сервис в таком виде: если отмечено — «yes», если не отмечено — «no». Полученная информация попадает в сервис в переменную, которую вы привязали к данному чекбоксу. Не забудьте ее создать заранее в адресной книге.

  • Радиокнопки

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

  • Выпадающий список

В форму вы можете включить выпадающий список. Для этого задайте названия выпадающих пунктов в «Списке опций». Укажите значения к каждому из них, которое будет передаваться в переменную. На примере ниже создан выпадающий список городов, эта информация поможет таргетировать email кампании по городам.

  •  Текст

Пишите любые тексты в форме с помощью элемента «Текст». Во вкладке «Элемент» вы найдете: выделение жирным, вставку ссылки, расположение текста по ширине, цвет, размер и т.д.

  • Изображение

Вставляйте изображение с помощью элемента «Картинка», допустим размер до 1 Mb, и не более 600х600 пикселей.  Во вкладке «Элемент» задайте расположение по центру, справа или слева.

  • Разделитель

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

Настройте общий вид формы подписки во вкладке «Дизайн»

В конструкторе есть возможность задать форме фон, скруглить углы, выбрать ширину и многое другое. Перейдем во вкладку «Дизайн» и рассмотрим все возможности. 

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

  • Расположение полей

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

 «Вертикально»

 

 

«Горизонтально».

 

  • На всю ширину

Эта опция растянет фон вашей формы подписки на всю ширину сайта.

  •  Ширина формы

Регулируйте ширину формы от 200 до 960 пикселей. Приведем примеры, как форма отображается в различной ширине:

360 пикселей,

 960 пикселей.

 

  • Фон формы

Устанавливайте фон формы подходящий вашему сайту. Для этого кликните на иконку цвета «rgba», откроется цветовая палитра и вы сможете подобрать нужный цвет. 

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

  • Фоновая картинка

Для привлечения внимания пользователя используйте тематическое изображение. Рекомендуемый размер 496х600 пикселей, а объем 102117 байт. 

  • Контур 

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

 

  • Внутренний отступ

Настройка отвечает за отступы от внешней границы элемента до его содержания. Чаще эти отступы называют полями. В «Конструткоре форм» вы сможете задать отступы от 5 до 40 пикселей. Мы применили максимальный отступ, вот что получилось.

  • Скругление углов

Чем больше значение, тем сильнее скругление. Поставьте 30 и получите максимальный эффект.

  •  Шрифт

Откройте выпадающее меню шрифта и выберите подходящий. Доступны следующие шрифты: Arial, Segoe, Tahoma, Trebuchet MS, Verdana, Times New Roman, Georgia, Platino Linotype, Courier New, и даже Comic Sans MS. 

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

  • Фон подложки 

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

 

  •  Эффект показа (только для попап-окна)

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

  • Размер полей

Доступно три опции размера: S — малый, M — средний, L — большой. 

  • Фон полей

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

  •  Границы 

Можно придать им ширину от 1 до 4 пикселей и выбрать в палитре цвет и прозрачность. Мы выбрали 4 пикселя — результат ниже.

 

  • Скругление углов

Доступно скругление углов «поля ввода» от 0 до 25. Поставьте 25 и получите максимальный эффект. В примере мы применили значение 8. 

  • Положение названий полей

В выпадающем меню вы можете выбрать следующие расположения названий полей (наше поле называется «Email»): «Сверху поля», «Слева от поля», «Внутри поля». В примере ниже мы выбрали «Сверху поля».

Тут же можно указать размер шрифта к названию полей и его цвет, отформатировать его жирным и наклонным.

Разрабатываем уведомление о подписке, текст письма-подтверждения и страницу подтверждения подписки

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

Слева вы видите разделы:

  • Данные и тип формы,
  • Уведомление о подписке,
  • Текст письма подтверждения,
  • Страница подтверждения.

 

Данные и тип формы

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

«Попап» и «плавающая» имеют следующие дополнительные настройки:

  • Условие показа 

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

  • Скрыть на мобильном

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

  • Повторный показ

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

  • Показывать на страницах

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

Уведомление о подписке

Уведомление о подписке — это сообщение, которое отобразится после того, как пользователь заполнит форму подписки и нажмет кнопку «Подписаться».  В форме предлагается следующее уведомление: «На указанный вами электронный адрес %email% было выслано письмо со ссылкой для подтверждения подписки».

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

Текст письма подтверждения

После подписки на сайте, пользователю отправляется письмо с просьбой подтвердить подписку. В данной закладке вы можете изменить адрес отправителя, тему данного письма, а также текст. Помните, что вам обязательно в тексте письма необходимо указать тег {{LINK}}? куда будет подставлена ссылка для подтверждения подписки.

Важно отправить письмо-подтверждение с адреса c корпоративным доменом. Это улучшит прохождение письма спам-фильтров. 

Что такое корпоративный домен? В случае, если у вас уже есть свой сайт, и домен зарегистрирован, можно создать корпоративный адрес электронной почты, который будет содержать ваше уникальное доменное имя после символа @. Итак, если ваше доменное имя mycompany.ru, то корпоративный адрес может быть следующим: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра..

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

 

Страница подтверждения

Это страница, на которую перенаправляется новый подписчик после клика на ссылку подтверждения. Выберите из вариантов: «Страница на вашем сайте» или «Стандартная». Если вы перенаправляете подписчика на свой сайт, укажите ссылку.

Вы также можете настроить индивидуальную страницу об успешной подписке. Для этого перейдите в меню «Формы подписки» → «Страницы подтверждения подписки» → «Новая страница подтверждения».

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

Как вставить код формы на сайт?

Код необходимо вставить в исходный код вашего сайта между тегами <body>. Если у вас сайт на WordPress, вы можете добавить форму подписки с помощью этого плагина. Еще один способ вставить код формы на сайт — использовать Google Tag Manager. 

Валидация подписчиков через reCAPTCHA

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

Теперь вы знакомы со всеми возможностями конструктора форм подписки.

Приступить к созданию формы

Другие полезные страницы

Популярное с нашего блога

User Rating: 4 / 5 (9)

Оцените, насколько полезна статья "Конструктор форм"

Начните пользоваться сервисом SendPulse прямо сегодня