HTML · Заявка на услугу

Заявка на услугу

Контакты, название услуги и описание задачи для предметного первого разговора.

Когда подходит

Для ремонта, консультаций и профессиональных услуг. Поле «Услуга» помогает отличать направления, а описание задачи даёт контекст до первого контакта.

Названия полей service и message передаются вместе с заявкой. Дополнительное поле «Услуга» будет доступно в других полях карточки и в выгрузке.

Понадобятся аккаунт Прилетела, адрес приёма заявок выбранной формы и возможность редактировать HTML своего сайта.

Поля: ваше имя, телефон, услуга, описание задачи. Звёздочкой отмечены обязательные поля примера. Проверка обязательности в браузере не заменяет серверную валидацию.

Форма и готовый код

Демонстрация

Данные никуда не отправляются и не сохраняются. Используйте вымышленные контакты.

Результат демонстрации

HTML

<form action="YOUR_FORM_ENDPOINT" method="POST" data-priletela>
  <label>Ваше имя <input type="text" name="name" maxlength="20000"></label>
  <label>Телефон <input type="tel" name="phone" required maxlength="20000"></label>
  <label>Услуга <input type="text" name="service" required maxlength="20000"></label>
  <label>Описание задачи <textarea name="message" maxlength="20000"></textarea></label>
  <input type="text" name="website" hidden tabindex="-1" autocomplete="off" aria-hidden="true">
  <label><input type="checkbox" name="consent" value="yes" required> Согласен на обработку данных на условиях <a href="YOUR_POLICY_URL" target="_blank" rel="noopener noreferrer">политики владельца сайта</a></label>
  <button type="submit" disabled>Отправить</button>
  <p data-priletela-status role="status" aria-live="polite" aria-atomic="true">Отправка пока недоступна. Проверьте подключение скрипта.</p>
</form>
<script src="https://priletela.ru/embed/v1.js" defer></script>

Замените YOUR_FORM_ENDPOINT на адрес формы из кабинета, а YOUR_POLICY_URL — на адрес собственных юридических документов. Подключение скрипта в конце фрагмента обязательно.

Как подключить

Создайте аккаунт или откройте мастер подключения. Укажите проект и название формы: оно поможет распознать заявку в письме.
Скопируйте адрес приёма заявок из настроек выбранной формы. Не используйте адрес другой формы или чужого проекта.
Скопируйте весь HTML из примера. Замените адрес приёма и ссылку на свои документы. Не вставляйте серверные ключи в HTML.
Добавьте фрагмент на страницу сайта. Для существующей формы перенесите action, method="POST", data-priletela, скрытое поле website, кнопку, блок data-priletela-status и подключение скрипта. У полей должны оставаться атрибуты name. Не подключайте второй обработчик отправки к той же форме.
Опубликуйте страницу. В мастере включите проверку и используйте выданный там фрагмент с пробным кодом. Отправьте вымышленные данные именно со своего сайта. Само копирование кода подключение не подтверждает.
Дождитесь пробной заявки в мастере и откройте её. Пробная заявка не меняет рабочие показатели. Обычная отправка без пробного кода считается рабочей заявкой.
После проверки используйте обычный код формы. При необходимости подтвердите email-получателя и настройте Telegram; сохранение заявки не означает доставку уведомления.

Пример использует JavaScript: без него отправка отключена. Скрипт сохраняет поля при сбое и повторяет неизменённую попытку с тем же ключом. Перезагрузка страницы сбрасывает ключ и введённые данные.

Частые ошибки

Заявка не появилась в кабинете

Проверьте адрес формы, выбранный проект, папки спама и пробных заявок. Форма должна быть включена. Не заполняйте скрытое поле website: оно служит защитой от спама.

Кнопка отправки недоступна

Установите весь фрагмент, включая embed/v1.js, и проверьте его загрузку. Отключённый JavaScript или блокировщик может помешать подключению.

Ошибка соединения или блокировка браузером

Проверьте HTTPS и адрес приёма. При строгой CSP сайта разрешите https://priletela.ru в script-src и connect-src с учётом nonce/strict-dynamic. Не отключайте CSP целиком. Поля при ошибке остаются заполненными.

Поля заполнены, но форма не отправляется

Проверьте обязательные поля, формат email и чекбокс. Код 429 означает временное ограничение частоты: подождите и повторите. Не добавляйте файлы: этот пример принимает текстовые поля.

Заявка есть, а уведомления нет

Email и Telegram подключаются отдельно в настройках проекта. Проверьте подтверждение адреса, получателя и состояние канала. Принятая заявка не гарантирует доставку письма или сообщения.

Данные посетителей

Владелец сайта размещает собственные документы и определяет законные основания обработки данных. Чекбокс в коде — заготовка, которую нужно адаптировать к своему процессу. Подключение Прилетела само по себе не обеспечивает соответствие 152-ФЗ. Не собирайте через пример пароли, платёжные реквизиты или другую чувствительную информацию.

Другие примеры

Простая HTML-форма Заказ обратного звонка Запрос стоимости Форма обратной связи для Tilda Заказ обратного звонка для Tilda Заявка на услугу для Tilda Запрос стоимости для Tilda Форма обратной связи для WordPress Заказ обратного звонка для WordPress Заявка на услугу для WordPress Запрос стоимости для WordPress Форма обратной связи через Fetch Обратный звонок через Fetch Заявка на услугу через Fetch Запрос стоимости через Fetch Форма обратной связи на React Обратный звонок на React Заявка на услугу на React Запрос стоимости на React Учебный кейс: разбор ситуации и сбор работ

Вернуться в каталог

Готовы получать заявки с сайта?

Подключите свою форму к Прилетела и получайте обращения в едином кабинете. Email и Telegram можно настроить отдельно.

Начать бесплатно Уже есть аккаунт

Нужна помощь с подключением? Поддержка в Telegram: @Stop_routine