Как создать простую форму подписки
Вы можете пополнить базу 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 |
Тип кнопки:
|
Обновлено: 05.12.2023
или