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

Вы можете пополнить базу 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 — отменяет проверку данных, введенных пользователем, на корректность;
  • 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 (7)

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

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

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