Tilda · Заказ обратного звонка

Заказ обратного звонка для Tilda

Добавьте в T123 короткую форму с именем и телефоном, чтобы получать запросы на звонок в Прилетела.

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

Для лендинга на Tilda, где посетителю проще оставить телефон. Поставьте блок T123 после описания предложения. Звонит ваша команда: Прилетела только принимает заявку.

Укажите рядом с блоком часы работы и ожидаемый срок звонка. Этот пример не проверяет владение номером по SMS и не заменяет стандартную форму Tilda.

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

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

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

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

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

HTML
<style>
.priletela-embedded{max-width:560px;width:100%;margin:0 auto;padding:16px;box-sizing:border-box;font:16px/1.5 Arial,sans-serif;color:#111412;letter-spacing:0}
.priletela-embedded form{display:grid;gap:16px;margin:0;padding:0}
.priletela-embedded label{display:block;margin:0;font:inherit}
.priletela-embedded input,.priletela-embedded textarea,.priletela-embedded button{box-sizing:border-box;max-width:100%;min-width:0;font:inherit;border-radius:6px}
.priletela-embedded input:not([type=checkbox]),.priletela-embedded textarea{display:block;width:100%;margin:6px 0 0;padding:12px;border:1px solid #99aaa1;background:#fff;color:#111412}
.priletela-embedded textarea{min-height:120px;resize:vertical}
.priletela-embedded input[type=checkbox]{width:18px;height:18px;margin:0 8px 0 0;vertical-align:middle;accent-color:#0b6b50}
.priletela-embedded input[hidden]{display:none}
.priletela-embedded button{justify-self:start;min-height:44px;padding:10px 20px;border:0;background:#0b6b50;color:#fff;cursor:pointer}
.priletela-embedded button:disabled{opacity:.6;cursor:wait}
.priletela-embedded a{color:#0b6b50;text-decoration:underline}
.priletela-embedded :focus-visible{outline:2px solid #0b6b50;outline-offset:3px}
.priletela-embedded [data-priletela-status]{margin:0;overflow-wrap:anywhere}
</style>
<div class="priletela-embedded">
<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>
</div>

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

Как установить форму на Tilda

Это собственная HTML-форма в блоке T123, не стандартная форма Tilda. Не нужны webhook, PHP или сторонние библиотеки. В вашем тарифе Tilda должна быть доступна вставка пользовательского кода.

Подготовьте адрес в Прилетела

Создайте аккаунт или откройте мастер подключения. Создайте проект и назовите форму. В настройках этой формы скопируйте адрес приёма заявок: он нужен вместо YOUR_FORM_ENDPOINT. Не используйте адрес страницы кабинета.

Вставьте код в T123

  1. Войдите в редактор Tilda и откройте нужную страницу.
  2. Нажмите добавление блока. В библиотеке выберите «Другое» → T123 «HTML-код» (Embed HTML Code). Можно найти блок по названию T123.
  3. Откройте содержимое блока и вставьте весь код из примера, включая стили и последнюю строку со скриптом.
  4. Замените YOUR_FORM_ENDPOINT на адрес выбранной формы из Прилетела. Вместо YOUR_POLICY_URL вставьте ссылку на собственные документы и адаптируйте текст согласия.
  5. Сохраните изменения и опубликуйте страницу. Откройте её публичный адрес в новой вкладке.

Пользовательский HTML-код может не выполняться непосредственно в редакторе Tilda. Проверяйте форму на опубликованной странице. Инструкция Tilda по блоку T123.

Проверьте подключение

  1. В мастере Прилетела начните проверку и возьмите выданный там пробный фрагмент формы. Временно разместите его в T123 и снова опубликуйте страницу. Он содержит код, который помечает заявку как пробную.
  2. Откройте опубликованный сайт, заполните форму вымышленными данными и отправьте. Дождитесь подтверждения приёма, затем вернитесь в мастер и откройте пробную заявку.
  3. После проверки верните в T123 код выбранного примера с вашим обычным адресом приёма и ссылкой на документы. Опубликуйте страницу ещё раз. Отправка без пробного кода считается рабочей заявкой, даже если вы ввели вымышленные данные.
  4. При необходимости подтвердите email-получателя и подключите Telegram в настройках проекта. Сохранение заявки не означает, что уведомление уже доставлено.

Форма остаётся на странице при отправке. Успех показывается только после подтверждения Прилетела. При ошибке поля сохраняются; повтор неизменённой попытки использует тот же ключ. После перезагрузки введённые данные и ключ сбрасываются.

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

В редакторе Tilda виден код или форма не работает

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

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

Проверьте адрес формы, выбранный проект, папки спама и пробных заявок. Форма должна быть включена. Не заполняйте скрытое поле 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Форма обратной связи для WordPressЗаказ обратного звонка для WordPressЗаявка на услугу для WordPressЗапрос стоимости для WordPressФорма обратной связи через FetchОбратный звонок через FetchЗаявка на услугу через FetchЗапрос стоимости через FetchФорма обратной связи на ReactОбратный звонок на ReactЗаявка на услугу на ReactЗапрос стоимости на ReactУчебный кейс: разбор ситуации и сбор работ

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

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

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

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

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