Tilda · Запрос стоимости
Запрос стоимости для Tilda
Разместите в T123 форму запроса расчёта: контактное лицо, компания, email и требования поступят в Прилетела.
Когда подходит
Для B2B-лендинга или индивидуальных работ на Tilda. Добавьте T123 рядом с описанием условий расчёта, чтобы собрать исходные данные для предложения.
Форма не рассчитывает цену, не принимает оплату и не загружает файлы. Попросите описать объём и сроки текстом; ответ отправляет ваша команда.
Понадобятся аккаунт Прилетела, адрес приёма заявок выбранной формы и возможность редактировать HTML своего сайта.
Поля: контактное лицо, компания, email, что нужно рассчитать. Звёздочкой отмечены обязательные поля примера. Проверка обязательности в браузере не заменяет серверную валидацию.
Форма и готовый код
Демонстрация
Данные никуда не отправляются и не сохраняются. Используйте вымышленные контакты.
<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" required maxlength="20000"></label>
<label>Компания <input type="text" name="company" maxlength="20000"></label>
<label>Email <input type="email" name="email" required maxlength="20000"></label>
<label>Что нужно рассчитать <textarea name="message" required 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>
</div>Замените YOUR_FORM_ENDPOINT на адрес формы из кабинета, а YOUR_POLICY_URL — на адрес собственных юридических документов. Подключение скрипта в конце фрагмента обязательно.
Как установить форму на Tilda
Это собственная HTML-форма в блоке T123, не стандартная форма Tilda. Не нужны webhook, PHP или сторонние библиотеки. В вашем тарифе Tilda должна быть доступна вставка пользовательского кода.
Подготовьте адрес в Прилетела
Создайте аккаунт или откройте мастер подключения. Создайте проект и назовите форму. В настройках этой формы скопируйте адрес приёма заявок: он нужен вместо YOUR_FORM_ENDPOINT. Не используйте адрес страницы кабинета.
Вставьте код в T123
- Войдите в редактор Tilda и откройте нужную страницу.
- Нажмите добавление блока. В библиотеке выберите «Другое» → T123 «HTML-код» (Embed HTML Code). Можно найти блок по названию T123.
- Откройте содержимое блока и вставьте весь код из примера, включая стили и последнюю строку со скриптом.
- Замените
YOUR_FORM_ENDPOINTна адрес выбранной формы из Прилетела. ВместоYOUR_POLICY_URLвставьте ссылку на собственные документы и адаптируйте текст согласия. - Сохраните изменения и опубликуйте страницу. Откройте её публичный адрес в новой вкладке.
Пользовательский HTML-код может не выполняться непосредственно в редакторе Tilda. Проверяйте форму на опубликованной странице. Инструкция Tilda по блоку T123.
Проверьте подключение
- В мастере Прилетела начните проверку и возьмите выданный там пробный фрагмент формы. Временно разместите его в T123 и снова опубликуйте страницу. Он содержит код, который помечает заявку как пробную.
- Откройте опубликованный сайт, заполните форму вымышленными данными и отправьте. Дождитесь подтверждения приёма, затем вернитесь в мастер и откройте пробную заявку.
- После проверки верните в T123 код выбранного примера с вашим обычным адресом приёма и ссылкой на документы. Опубликуйте страницу ещё раз. Отправка без пробного кода считается рабочей заявкой, даже если вы ввели вымышленные данные.
- При необходимости подтвердите 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-ФЗ. Не собирайте через пример пароли, платёжные реквизиты или другую чувствительную информацию.
Другие примеры
Готовы получать заявки с сайта?
Подключите свою форму к Прилетела и получайте обращения в едином кабинете. Email и Telegram можно настроить отдельно.
Нужна помощь с подключением? Поддержка в Telegram: @Stop_routine