Как создать простую форму подписки

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

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

Перейдите в раздел Рассылки > Формы подписки > Создать новую форму и нажмите Получить HTML код без стилей.

Выберите книгу

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

После выбора книги нажмите Получить код.

Выберите отправителя

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

Подписка через простую форму происходит методом double opt-in. Это значит, что для того, чтобы пользователь попал в ваш список подписчиков после заполнения формы, он должен будет подтвердить подписку.

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

Читайте подробнее о том, как создать корпоративную почту со своим доменом.

Чтобы настроить письмо подтверждения перейдите в Настройки сервиса > Инструменты подписки > Письма подтверждения. Выберите для редактирования стандартное письмо или нажмите Новое письмо подтверждения.

Читайте больше: Как создать кастомное письмо подтверждения подписки.

Скопируйте код

Чтобы добавить код на вашу страницу, нажмите Копировать код и вставьте код на ваш сайт.

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

Настройте форму

По умолчанию форма состоит из двух полей — для ввода имени и электронного адреса и кнопки «Подписаться».

Вы можете кастомизировать форму подписки с помощью тегов — элементов языка разметки текста (HTML) и придать стиль элементам формы с помощью CSS. Также можно настроить условие показа, ограничения по количеству символов, обработку заполненных полей и другие настройки поведения формы с помощью JS скриптов.

При настройке формы обратите внимание на следующие моменты:

  • поле «email» является обязательным, на него приходят письма подтверждения подписки. Вы не можете создать форму подписки только для сбора телефонов. Для корректной отправки данных заполненной формы не удаляйте <input type="email" required> из формы.
  • в форме вы можете добавить до 10 полей;
  • в текстовом поле помещается до 64 символов;
  • в раскрывающемся списке (тег select) не поддерживается опция «множественный выбор» (multiple).

Настройка полей

Чтобы поля формы соответствовали переменным в адресной книге, назначайте названия полей (в input name) именами переменных с учетом регистра. К примеру, если у вас в адресной книге имя переменной город «City», input name=”City”.

Элементы формы

Рассмотрим основные теги, используемые для создания формы.

Подробнее про HTML, CSS и JavaScript можете ознакомиться в справочнике.

Тег <form>

С помощью тега <form> добавляется форма подписки на страницу. К этому тегу вы можете применить следующие атрибуты:

action Принимает полный или относительный путь к серверному файлу (в нашем случае URL выдается SendPulse и менять его не нужно).
method Сообщает серверу о методе запроса (формой принимаются только post).
name Определяет уникальное имя формы.
autocomplete Включает или отключает автозаполнение формы (может принимать значение on или off).
target Окно или фрейм, куда обработчик загружает результат (может принимать значения _blank_self_parent, _top).
novalidate Отменяет проверку данных, введенных пользователем, на корректность.
enctype Указывает кодировку данных формы перед отправкой на сервер. Может принимать значения multipart/form-data або text/plain.

Тег <input>

С помощью тега <input> вы можете создать различные элементы интерфейса, например, кнопку или чекбокс, и таким образом обеспечить взаимодействие формы с пользователем.

Чтобы отправить введенные пользователем данные на сервер, тег <input> необходимо поместить внутрь контейнера <form>.

В форме можно разместить до 10 полей ввода, включая hidden input.

Наиболее распространенный атрибут тега <input>type — сообщает браузеру, к какому типу относится элемент формы (например, checkbox, radio, text, email и так далее).

Вы можете использовать чекбоксы (checkbox), когда необходимо выбрать несколько вариантов из предложенного списка:

<input type="checkbox" атрибуты>

У чекбокса могут быть следующие атрибуты:

checked Предварительное выделение чекбокса.
name Имя чекбокса для его идентификации обработчиком формы.
value Значение, которое будет отправлено на сервер.

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

<input type="radio" name="имя" атрибуты>

У переключателя могут быть следующие атрибуты:

checked Предварительное выделение переключателя.
name

Имя группы переключателей для идентификации обработчиком формы.

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

value

Значение, которое будет отправлено на сервер.

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

<input type="text" атрибуты>

Наиболее распространенные атрибуты для поля ввода текста:

value Начальное значение.
size Размер (в символах) для поля ввода, можно добавить до 64 символов.

Тег <select>

С помощью тега <select> вы можете создать элемент раскрывающегося списка.

Каждый новый пункт списка создается с помощью тега <option> внутри контейнера <select>:

<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
</select>

Наиболее распространенные атрибуты тега <select>:

multiple Позволяет одновременно выбирать несколько элементов списка.
name Определяет имя элемента для отправки на сервер.
required Определяет, обязателен ли выбор перед отправкой формы.

Тег <button>

С помощью тега <button> вы можете создавать кликабельные кнопки, например, для подтверждения отправки данных на сервер.

Чтобы отправить введенные пользователем данные на сервер, тег <button> необходимо поместить внутрь контейнера <form>.

Наиболее распространенные атрибуты для этого тега:

name Имя кнопки.
value Начальное значение кнопки, которое будет отправлено на сервер вместе с именем кнопки.
disabled Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой.
type

Тип кнопки:

submitотправляет данные формы на сервер;
reset — кнопка сбрасывает все элементы управления в их исходные значения;
button — кнопка не имеет поведения по умолчанию.

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

    Оценка: 4 / 5 (8)

    Назад

    Как добавить отслеживание событий показа, сабмита и закрытия формы

    Далее

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

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

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