HTML · 6 полей · без аккаунта

Форма заявки на услугу

Категория, срок и описание: HTML-шаблон обращения по услуге с условным уточнением для варианта «Другое».

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

Посмотрите поля и скопируйте 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="category">Категория услуги</label>
  <select id="category" name="category" required>
    <option value="">Выберите вариант</option>
    <option>Разработка</option>
    <option>Дизайн</option>
    <option>Другое</option>
  </select>

  <label for="other_service">Уточните услугу</label>
  <input type="text" id="other_service" name="other_service" required>

  <label for="deadline">Желаемый срок</label>
  <input type="text" id="deadline" name="deadline">

  <label for="message">Описание задачи</label>
  <textarea id="message" name="message" required maxlength="2000"></textarea>

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

Форма заявки на услугу помогает направить обращение нужному исполнителю. Категория задаёт маршрут, описание объясняет задачу, срок показывает ожидание клиента.

Условное поле

В preview уточнение появляется при выборе «Другое». Оно обязательно только в этом состоянии. При смене категории скрытое поле отключается и не блокирует проверку.

Скопированный HTML намеренно не содержит скрипта условий: видимое уточнение требуется адаптировать. Добавьте ту же логику в проект и серверную валидацию. Нельзя просто скрыть required поле стилем и оставить его блокировать отправку.

Приёмка

Выберите «Другое», оставьте уточнение пустым, затем смените категорию. Проверьте, что ошибка относится к актуальному варианту. Заявка не подтверждает доступность исполнителя или срок. Подключите обработчик и проверьте маршрут обращения.

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

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

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

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

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

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

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