Шаблон анкеты клиента, которую заполняют до звонка, а не после

Бриф собирается в переписке — и рассыпается там же

Три бытовые ситуации, в которых анкета экономит вечер и репутацию.

Анкета переворачивает порядок: сначала вопросы и ответы, потом разговор по делу. Это и есть главная мысль страницы: бриф клиента до звонка, а не после.

Три пути — и только один оставляет файл у вас

Сравните не прайсы, а результат: срок, правки и владельца файла.

Пять причин собрать анкету самому

Не потому, что «дёшево», а потому, что вы лучше всех знаете своих клиентов.

Шесть модулей, из которых складывается анкета

Каждый пункт — часть приложения, которое вы получите по инструкции.

Промпт целиком — скопируйте и отправьте

Текст адаптирован под анкету клиента: вопросы, ветки, результаты и заявки. Свою нишу можно дописать парой фраз после сборки.

После копирования вставьте текст в поле сообщения проекта через Ctrl + V и нажмите «Отправить» ↑.

Ты — senior product designer и frontend-разработчик. Собери одностраничное приложение «Квиз: анкета клиента»: один HTML-файл со встроенными CSS и JS, без внешних библиотек, иконок-шрифтов и картинок.

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

Экраны:
1. Старт: название анкеты, одно предложение о пользе, время «около 3 минут», кнопка «Начать».
2. Вопрос: полоса прогресса и номер шага, текст вопроса, 2–5 вариантов, кнопка «Дальше». Для вопросов с несколькими ответами — «Выбрать несколько». Без ответа дальше не пускать.
3. Результат: название типа запроса, короткое описание, что входит в работу, ориентир по бюджету и сроку, кнопка «Оставить контакт».
4. Заявка: имя, способ связи (Telegram или телефон), комментарий, кнопка «Отправить заявку»; после отправки — экран благодарности.
5. Список прохождений: имя, тип запроса, бюджет, дата, статус; поиск по имени и фильтр по статусу; карточка с ответами открывается по клику.

Сущности:
— Вопрос: текст, варианты, флаг «несколько ответов», вес, порядок.
— Вариант: текст, баллы, переход к следующему вопросу или сразу к результату.
— Ветка: правило «если выбран вариант X — перейти к вопросу Y».
— Результат: название, описание, диапазон бюджета и срока, что входит в работу.
— Лид: имя, контакт, комментарий, ответы, результат, дата, статус.

Статусы прохождения: «старт» → «вопросы» → «результат» → «заявка». В списке показывай статус цветной плашкой.

Ветвление: в вопросе «Что нужно сделать?» вариант «готовый сайт» уводит к вопросам про страницы и интеграции, вариант «ремонт» — к площади и материалам, вариант «упаковка» — к фирменному стилю и носителям. Правила веток храни в данных, а не в коде экрана.

Подсчёт: у вариантов есть баллы, сумма определяет результат. Если суммы равны — покажи два результата и предложи уточнить по одному вопросу.

Контент: 8–12 вопросов про задачу клиента — что нужно сделать, для кого, к какому сроку, какой бюджет, кто принимает решение, какие материалы уже есть, как удобнее связаться. Заполни их осмысленными вариантами именно для анкеты клиента, без заглушек.

Данные: localStorage, ключи quiz_questions, quiz_results, quiz_leads. В списке прохождений — кнопки «Экспорт JSON» и «Экспорт CSV». Никаких запросов на внешние серверы.

Дизайн: крупная типографика, много воздуха, скругления 14–24 px, светлый фон, тёмный текст, один акцентный цвет только на кнопках и выделенном блоке, понятная адаптация под телефон. Все элементы доступны с клавиатуры.

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

Что обычно спрашивают перед сборкой