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

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

Добавьте в Custom HTML контакты, название услуги и описание задачи. Заявки поступают в Прилетела без PHP-обработчика.

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

Для каталога услуг на WordPress. Разместите HTML-блок под описанием услуги, чтобы собрать контакты и уточнения до первого разговора.

Дополнительное поле service доступно в карточке заявки и Excel. Форма не зависит от плагинов услуг или магазина и не создаёт заказ WooCommerce.

Понадобятся аккаунт Прилетела, адрес приёма заявок выбранной формы и возможность редактировать 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>
  <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>
</div>

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

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

Пример предназначен для блочного редактора Gutenberg и блока «Произвольный HTML» (Custom HTML). Это самостоятельная форма, не интеграция с Contact Form 7, WPForms или стандартным блоком формы. Отдельный PHP-обработчик и плагин форм не нужны.

Сначала проверьте возможности сайта

На самостоятельно размещённом WordPress сохранение скриптов и стилей зависит от прав вашей учётной записи и настроек безопасности. Если редактор удаляет часть кода, обратитесь к администратору. Не отключайте защиту сайта ради вставки формы.

На WordPress.com теги формы, скрипта и стилей ограничены тарифом и функциями хостинга. Бесплатный план для этого примера не подходит. Перед установкой проверьте поддержку пользовательского кода и активацию функций хостинга в справке WordPress.com. Наличие HTML-блока само по себе не гарантирует поддержку формы.

Получите адрес формы

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

Добавьте блок Custom HTML

  1. В панели WordPress откройте «Страницы» и выберите нужную страницу для редактирования.
  2. Нажмите «Добавить блок», найдите «Произвольный HTML» (Custom HTML) и добавьте его в нужное место. Не используйте блок «Код»: он предназначен для показа текста.
  3. Откройте редактирование HTML и вставьте весь фрагмент из примера. Сохраните стили и подключение скрипта в конце: без JavaScript кнопка отправки останется отключённой.
  4. Замените YOUR_FORM_ENDPOINT на адрес формы из Прилетела, а YOUR_POLICY_URL на ссылку на документы вашего сайта. Адаптируйте текст согласия.
  5. Сохраните блок, затем обновите или опубликуйте страницу. Снова откройте HTML-блок и убедитесь, что редактор не удалил форму, стили или строку со скриптом. В разных версиях редактора вид окна HTML может отличаться.
  6. Откройте публичную страницу как обычный посетитель. Предпросмотр в редакторе не заменяет проверку опубликованной формы.

Официальная инструкция по Custom HTML. Если ваша конфигурация не сохраняет нужные теги, этот способ подключения в ней пока не поддерживается.

Проверьте получение заявки

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

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

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

WordPress удаляет код или показывает старую форму

Проверьте, что выбран Custom HTML, а не блок «Код». Повторно откройте сохранённый блок: если script, style или form удалены, уточните права и ограничения хостинга у администратора. Если код сохранён, но страница старая, обновите её и очистите кэш этой страницы штатными средствами сайта. Не отключайте защиту и не добавляйте второй обработчик отправки.

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

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

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

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

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

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

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