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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы поля формы соответствовали переменным в адресной книге, назначайте названия полей (в 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 — отменяет проверку данных, введенных пользователем, на корректность;
• 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 —кнопка не имеет поведения по умолчанию.

Обновлено: 12.05.2023