Як створити просту форму підписки

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

У статті ми розглянемо як створити просту форму підписки у спрощеному редакторі.

Перейдіть до розділу Розсилки (Email) > Форми підписки (Subscription Forms) > Створити нову форму (Create a new form) та натисніть Отримати HTML-код без стилів (Get HTML code without styles).

Виберіть книгу

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

Після вибору книги натисніть Отримати код (Get code).

Виберіть відправника

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

Щоб налаштувати лист підтвердження, перейдіть до Параметри сервісу (Service Settings) > Інструменти підписки (Subscription tools) > Листи підтвердження (Confirmation letters). Виберіть стандартний лист для редагування або натисніть Новий лист підтвердження (New confirmation email).

Скопіюйте код

Щоб додати код до вашої сторінки, натисніть Копіювати код (Copy the code) і вставте код на ваш сайт.

Налаштуйте форму

За замовчуванням форма складається з двох полів — для введення імені та електронної адреси та кнопки Підписатися (Subscribe).

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

Налаштування полів

Щоб поля форми відповідали змінним в адресній книзі, призначайте назви полів (input name) іменами змінних з урахуванням регістру. Наприклад, якщо у вас в адресній книзі ім'я змінної місто City, input name="City".

Елементи форми

Розглянемо основні теги, що використовуються для створення форми.

Детальніше з HTML, CSS та JavaScript можете ознайомитись у довіднику.

Тег <form>

За допомогою тега <form> додається форма підписки на сторінку. З цим тегом можна використовувати наступні атрибути.

Тег <input>

За допомогою тега <input> можна створити різні елементи інтерфейсу, наприклад, кнопку або чекбокс, і таким чином забезпечити взаємодію форми з користувачем.

Щоб надіслати введені користувачем дані на сервер, тег <input> необхідно помістити всередину контейнера <form> .

Зауважте, що у формі можна розмістити до 10 полів введення, включаючи hidden input.

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

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

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

У чекбоксі можуть бути такі атрибути:

Якщо потрібно вибір лише одного варіанта, то можна використовувати перемикачі (radio):

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

Перемикач може мати наступні атрибути:

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

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

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

Тег <select>

За допомогою тега <select> ви можете створити елемент списку, що розкривається.

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

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

Найбільш поширені атрибути тегу <select> :

Тег <button>

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

Щоб надіслати введені користувачем дані на сервер, тег <button> необхідно помістити всередину контейнера <form> .

Найбільш поширені атрибути для цього тега.

Оновлено: 05.12.2023