formhunt.Подключить форму
HTML · 2 полей · без аккаунта

Форма подписки на новости

Email и объяснение цели подписки. Учебная разметка и локальный preview без подключения рассылки или сохранения адресов.

Обновлено
С чего начать

Посмотрите поля и скопируйте HTML. Замените YOUR_ACCESS_KEY ключом из кабинета и вставьте код на сайт: общий адрес отправки уже указан.

Открыть HTML код формы
Предпросмотр формыHTML
Форма подписки на новости
Пример адреса: reader@example.test.
Это учебный элемент интерфейса, не юридически проверенное согласие.

Поля со звёздочкой обязательны.

Копируйте и адаптируйте

Код формы

Разметка без зависимости от framework. Замените YOUR_ACCESS_KEY ключом из кабинета. Адрес отправки общий для всех форм.

form.html
<form action="https://api.formhunt.ru/v1/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <label for="email">Email для новостей</label>
  <input type="email" id="email" name="email" required>

  <label for="confirm">Хочу получать новости проекта</label>
  <input type="checkbox" id="confirm" name="confirm" required>

  <button type="submit">Отправить</button>
</form>

Короткой форме подписки достаточно адреса и понятного объяснения, что будет приходить. Не используйте её для скрытого согласия на другие действия.

Текст рядом с полем

На своём сайте назовите автора писем, тематику и ожидаемую частоту. Не обещайте частоту, которую не сможете соблюдать. Реальные основания обработки и документы определяются отдельно; checkbox сам по себе их не заменяет.

Подтверждение подписки

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

Проверка

Введите неверный email и оставьте checkbox пустым. Затем используйте синтетический адрес и отметьте желание подписаться. После проверки полей настройте подтверждение подписки и возможность прекратить рассылку.

Поля и ограничения

ПолеИмя в запросеПравило
Email для новостейemailОбязательное. Пример адреса: reader@example.test.
Хочу получать новости проектаconfirmОбязательное. Это учебный элемент интерфейса, не юридически проверенное согласие.
От разметки к результату

С чем разобраться дальше

Руководство

Доступная форма: подписи, фокус и ошибки

Собрать и проверить доступную разметку.

Руководство

Состояния формы: ожидание, успех и ошибка

Убрать ложный success и вернуть контроль после ошибки.

Ваш стек

Форма на Vue с access_key

Вставить Vue компонент с общим action и access_key.

Начните с формы

Ваш сайт уже есть.
Подключим форму.

Откройте личный кабинет, затем передайте агенту промпт подключения.

Подключить форму