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

Контактная форма

HTML-шаблон общего обращения: имя, email и сообщение. Доступные подписи, обязательные поля и проверка обязательных полей и формата.

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

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

Открыть HTML код формы
Предпросмотр формыHTML
Контактная форма
Укажите, как к вам обращаться.
Адрес для ответа, например hello@example.com.
До 2000 символов. Не вводите личные данные и секреты.

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

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

Код формы

Разметка без зависимости от 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="name">Как к вам обращаться</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email для ответа</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Ваш вопрос</label>
  <textarea id="message" name="message" required maxlength="2000"></textarea>

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

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

Как адаптировать

Оставьте имя необязательным, если оно не нужно для обработки. Email нужен для ответа, сообщение — для самого вопроса. Не добавляйте телефон «на всякий случай»: каждое поле должно иметь понятную цель.

Что проверить

Пустое сообщение и неверный email должны давать ошибку. После исправления локальный preview сообщает только о проверке. В настоящем проекте очищайте поля после подтверждения endpoint, а не по нажатию кнопки.

Ограничения

Подставьте свой access_key в скрытое поле скопированного кода. Сервер должен повторно проверить поля и безопасно обработать содержимое; browser required недостаточно.

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

ПолеИмя в запросеПравило
Как к вам обращатьсяnameОбязательное. Укажите, как к вам обращаться.
Email для ответаemailОбязательное. Адрес для ответа, например hello@example.com.
Ваш вопросmessageОбязательное. До 2000 символов. Не вводите личные данные и секреты.
От разметки к результату

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

Руководство

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

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

Руководство

Почему HTML-форма не отправляет email сама

Отказаться от ложного ожидания, что action автоматически доставит письмо.

Ваш стек

HTML форма с access_key

Вставить HTML на страницу и подставить ключ формы.

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

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

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

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