Как встроить квиз на сайт за 15 минут (пошагово)

Введение

Зачем встраивать квиз на сайт

Квиз на сайте решает задачу, с которой обычная форма справляется плохо: он вовлекает посетителя в диалог и постепенно собирает информацию о потребностях, бюджете и сроках. Вместо одного поля "Оставьте телефон" человек отвечает на 5-8 простых вопросов, привыкает к интерактиву и оставляет контакт в конце, уже прогрессируя через экраны.

По данным Formo4ka, сайты с квизом получают в 2-5 раз больше заявок по сравнению со стандартными лид-формами. Это связано с тем, что квиз снижает порог входа: человеку проще нажать кнопку "Далее", чем заполнить форму с пятью полями. При этом квиз собирает больше данных для квалификации лида: тип услуги, бюджет, сроки, регион, опыт работы с конкурентами.

Способы

Три способа встроить квиз на сайт

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

Вариант 1

JavaScript: универсальный способ

JavaScript-вставка подходит для любого сайта: статического, на конструкторе, на CMS, на кастомном фреймворке. Скрипт загружается асинхронно и рендерит квиз внутри указанного контейнера. Вы получаете полный контроль над расположением, размерами и стилями квиза.

Этот способ рекомендуется, если вам важно встроить квиз как часть дизайна страницы, а не как отдельный блок. JavaScript-квиз наследует шрифты и размеры родительского контейнера, а вы можете переопределить любой стиль через CSS-переменные.

Готовый код для вставки

Скопируйте этот код и вставьте в нужное место HTML-страницы. Квиз загрузится в контейнере с id="formo4ka-quiz":

<!-- Контейнер для квиза -->
<div id="formo4ka-quiz" style="max-width: 640px; margin: 0 auto;"></div>

<!-- Скрипт Formo4ka -->
<script
  src="https://formo4ka.ru/embed/quiz.js"
  data-quiz-id="ВАШ_ID_КВИЗА"
  data-container="#formo4ka-quiz"
  data-theme="light"
  async
></script>

Замените ВАШ_ID_КВИЗА на идентификатор вашего квиза из панели управления Formo4ka. ID находится в настройках квиза на вкладке "Публикация".

Кастомизация через CSS

После вставки кода можно настроить внешний вид квиза через CSS-переменные. Это полезно, если нужно адаптировать квиз под дизайн вашего сайта:

<style>
  #formo4ka-quiz {
    --quiz-primary: #8843D2;
    --quiz-bg: #ffffff;
    --quiz-text: #180E14;
    --quiz-radius: 16px;
    --quiz-font: inherit;
  }
</style>

CSS-переменные применяются к контейнеру квиза и не затрагивают стили основного сайта. Переопределяйте только те переменные, которые хотите изменить.

Вариант 2

iframe: простой и безопасный

iframe-вставка — самый быстрый способ. Квиз работает в изолированном фрейме и не влияет на стили, скрипты или производительность основного сайта. Подходит для Tilda, WordPress, Bitrix, Wix и любых других платформ с поддержкой HTML-блоков.

Минус iframe: стили квиза ограничены настройками из панели управления Formo4ka. Вы не сможете переопределить шрифты или цвета через CSS родительской страницы. Для большинства случаев этого достаточно.

Готовый код для вставки

<iframe
  src="https://formo4ka.ru/embed/quiz/ВАШ_ID_КВИЗА"
  width="100%"
  height="700"
  frameborder="0"
  allowfullscreen
  style="border: none; border-radius: 16px;"
></iframe>

Атрибут height="700" задаёт начальную высоту. Для автоадаптации по высоте используйте JavaScript-модуль Formo4ka, который автоматически подстраивает iframe под содержимое.

<script src="https://formo4ka.ru/embed/autoheight.js" async></script>

Вариант 3

API: для интеграций и кастомных сценариев

REST API Formo4ka позволяет программно создавать квизы, получать ответы респондентов, управлять настройками и интегрироваться с внешними системами. Этот способ подходит, если вы строите кастомное приложение, хотите автоматически обрабатывать ответы или интегрировать квиз с CRM без ручных действий.

API доступен на всех тарифах Formo4ka. Базовый тариф даёт 1000 запросов в месяц, профессиональный — без ограничений. Авторизация происходит через API-ключ, который генерируется в настройках аккаунта.

Пример запроса на получение ответов

curl -X GET "https://api.formo4ka.ru/v1/quizzes/ID_КВИЗА/responses" \
  -H "Authorization: Bearer ВАШ_API_КЛЮЧ" \
  -H "Content-Type: application/json"

Пример webhook для передачи данных в CRM

{
  "quiz_id": "abc123",
  "respondent": {
    "name": "Алексей",
    "phone": "+79001234567",
    "email": "alexey@example.com"
  },
  "answers": [
    { "question": "Какой бюджет?", "answer": "от 100 000 руб." },
    { "question": "Сроки?", "answer": "до 2 недель" },
    { "question": "Регион?", "answer": "Москва" }
  ],
  "score": 85,
  "completed_at": "2026-06-11T09:00:00Z"
}

Webhook отправляется на указанный URL каждый раз, когда респондент завершает квиз. Формат — JSON. Вы можете обрабатывать данные в н8n, Make, Zapier или собственном бэкенде.

Сравнение

Какой способ выбрать

Tilda

Пошаговая инструкция для Tilda

Tilda поддерживает встраивание квиза через HTML-блок (T123) или через блок "Вставка кода". Оба способа работают стабильно и не требуют подключения сторонних плагинов. Ниже — пошаговая инструкция для каждого варианта.

Шаг 1. Создайте квиз в Formo4ka

Войдите в панель управления Formo4ka, создайте новый квиз или откройте существующий. На вкладке "Публикация" скопируйте ID квиза и ссылку на iframe.

Шаг 2. Добавьте HTML-блок на страницу Tilda

В редакторе Tilda добавьте блок "Вставка кода" (T123) в нужное место страницы. Вставьте код iframe:

<iframe
  src="https://formo4ka.ru/embed/quiz/ВАШ_ID_КВИЗА"
  width="100%"
  height="700"
  frameborder="0"
  style="border: none;"
></iframe>

Шаг 3. Настройте ширину и отступы

В настройках блока T123 укажите максимальную ширину 640px и центрирование. Это сделает квиз компактным и удобным для чтения. Добавьте отступы сверху и снизу через настройки блока.

Шаг 4. Опубликуйте страницу

Нажмите "Опубликовать" и проверьте квиз на опубликованной странице. Откройте страницу в режиме превью, пройдите квиз от начала до конца, убедитесь, что кнопки работают и данные отправляются.

WordPress

Пошаговая инструкция для WordPress

WordPress поддерживает встраивание квиза через блок редактора Gutenberg, через виджет или через PHP-шаблон. Выбор способа зависит от темы и уровня доступа к файлам сайта.

Шаг 1. Создайте квиз в Formo4ka

Скопируйте ID квиза и ссылку на iframe из панели управления Formo4ka.

Шаг 2. Добавьте блок "Custom HTML"

В редакторе Gutenberg добавьте блок "Custom HTML" в нужное место страницы. Вставьте код iframe:

<div style="max-width: 640px; margin: 2rem auto;">
  <iframe
    src="https://formo4ka.ru/embed/quiz/ВАШ_ID_КВИЗА"
    width="100%"
    height="700"
    frameborder="0"
    style="border: none; border-radius: 16px;"
  ></iframe>
</div>

Шаг 3. Альтернатива: PHP-шаблон

Если вы работаете с темой WordPress и хотите встроить квиз в шаблон, добавьте код в файл шаблона:

<?php
// Вставьте в файл шаблона (например, page.php или single.php)
?>
<div class="quiz-container" style="max-width: 640px; margin: 2rem auto;">
  <iframe
    src="https://formo4ka.ru/embed/quiz/<?php echo esc_attr( get_theme_mod( 'formo4ka_quiz_id' ) ); ?>"
    width="100%"
    height="700"
    frameborder="0"
    style="border: none; border-radius: 16px;"
  ></iframe>
</div>

Шаг 4. Проверьте отображение

Откройте страницу на сайте и убедитесь, что квиз загружается. Проверьте мобильную версию: высота iframe должна адаптироваться под экран телефона. При необходимости добавьте CSS для адаптации.

Самописные сайты

Пошаговая инструкция для самописного сайта

Если ваш сайт создан на кастомном фреймворке или статической разметке, встраивание квиза выполняется через JavaScript или iframe. Этот вариант даёт максимум контроля и подходит для сложных интеграций.

Шаг 1. Определите способ встраивания

Для большинства случаев оптимальна JavaScript-вставка. Она позволяет встроить квиз как часть дизайна страницы, переопределить стили и управлять поведением через события. Если важна изоляция — используйте iframe.

Шаг 2. Вставьте код в шаблон страницы

Откройте файл шаблона или компонента, где должен появиться квиз. Вставьте JavaScript-код перед закрывающим тегом body или в конец контейнера:

<!-- В шаблоне страницы -->
<section class="quiz-section">
  <div id="formo4ka-quiz" style="max-width: 640px; margin: 0 auto;"></div>
</section>

<script
  src="https://formo4ka.ru/embed/quiz.js"
  data-quiz-id="ВАШ_ID_КВИЗА"
  data-container="#formo4ka-quiz"
  data-theme="light"
  async
></script>

Шаг 3. Настройте CSS

Добавьте стили для контейнера квиза в ваш CSS-файл. Это позволит адаптировать квиз под дизайн сайта:

.quiz-section {
  padding: 3rem 1rem;
  background: #f7f2ff;
  border-radius: 24px;
}

#formo4ka-quiz {
  --quiz-primary: #8843D2;
  --quiz-radius: 16px;
}

Шаг 4. Проверьте работоспособность

Откройте страницу в браузере, пройдите квиз, проверьте отправку данных. Откройте консоль разработчика (F12) и убедитесь, что нет ошибок. Проверьте работу на мобильных устройствах и в разных браузерах.

Шаг 5. Настройте интеграцию (опционально)

Если нужно автоматически передавать данные из квиза в CRM, настройте webhook в панели управления Formo4ka. Укажите URL вашего сервера, и Formo4ka будет отправлять данные о каждом завершённом квизе.

Пример из практики

Как Алексей из Казани встроил квиз на сайт студии дизайна

Алексей — владелец студии дизайна интерьеров "ProStudio" в Казани. До встраивания квиза сайт получал 15-20 заявок в месяц через стандартную форму "Оставьте заявку на консультацию". Конверсия из посетителя в заявку составляла 1.2%.

Алексей создал квиз из 6 вопросов: тип помещения, площадь, стиль, бюджет, сроки, контакт. Встроил квиз через iframe на главную страницу вместо стандартной формы. Настройка заняла 12 минут.

Через месяц после запуска квиза заявок стало 47 в месяц. Конверсия выросла до 3.8%. Средний чек заявок из квиза оказался выше: клиенты, которые ответили на вопросы о бюджете, были более готовы к сотрудничеству. Менеджерам стало проще обрабатывать заявки, потому что квиз сразу давал информацию о потребностях клиента.

Ошибки

Частые ошибки при встраивании квиза

FAQ

Частые вопросы про встраивание квиза