HTML · Заказ обратного звонка
Заказ обратного звонка
Имя и телефон без лишних вопросов: для посетителей, которым удобнее поговорить.
Когда подходит
Для блока рядом с услугой или предложения связаться по телефону. Заявка сохраняется в кабинете; сам звонок выполняет ваша команда, не Прилетела.
Проверка формата телефона не подтверждает, что номер принадлежит посетителю. В этом примере нет SMS-проверки.
Понадобятся аккаунт Прилетела, адрес приёма заявок выбранной формы и возможность редактировать 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>
<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-ФЗ. Не собирайте через пример пароли, платёжные реквизиты или другую чувствительную информацию.
Другие примеры
Готовы получать заявки с сайта?
Подключите свою форму к Прилетела и получайте обращения в едином кабинете. Email и Telegram можно настроить отдельно.
Нужна помощь с подключением? Поддержка в Telegram: @Stop_routine