В этой статье
«Сделай красивый сайт-опросник» оставляет слишком много решений на усмотрение модели. Применимый запрос должен назвать вопросы, варианты ответов, обязательность полей и то, что произойдёт после нажатия кнопки. Для первого прототипа достаточно локальной сводки: выбранные ответы показываются на странице и никуда не отправляются.
Если вы регулярно собираете такие прототипы и отдельно выбираете месячный ChatGPT Plus на своём аккаунте, карточка подписки ChatGPT через Amber Market помогает оформить план с менеджером. Amber Market — сервис оплаты зарубежных сервисов; условия и итоговую стоимость нужно сверить до оплаты, заказ можно оплатить через СБП. Это заказ подписки, а не хостинг формы, сервер для ответов или баланс API. Сам промпт и локальный HTML можно подготовить в бесплатном ChatGPT без покупки подписки или API-баланса (условия бесплатного доступа).
Готовый промпт
Создай один самодостаточный файл index.html — локальный демонстрационный шаблон сайта-опросника. Верни полный код и коротко объясни, как сохранить его и открыть в браузере.
Требования:
1. Сделай русский интерфейс с <html lang="ru">. Помести HTML, CSS и небольшой vanilla JavaScript в один файл. Не используй фреймворки, внешние CDN, API-ключи, fetch, localStorage, backend и сетевые запросы.
2. Сделай адаптивную форму для узкого экрана. У каждого поля должна быть видимая label. Для группы переключателей используй fieldset и legend, каждый radio свяжи с подписью.
3. Покажи пояснение: «Демонстрационный шаблон: ответы никуда не отправляются».
4. Кнопка «Показать мои ответы» должна сначала запускать нативную проверку формы. Если обязательное поле не заполнено, не показывай сообщение об успехе и не переходи на другой URL.
5. После успешной проверки покажи на этой же странице локальную сводку фактически выбранных значений. Не создавай впечатление, что ответы доставлены организатору.
6. Сохрани логичный порядок перехода клавишей Tab, видимый фокус и не используй placeholder вместо подписи.
Данные опроса:
- «Какую тему выбрать?» — обязательный select с пустым первым пунктом и вариантами «Современная проза», «Короткие рассказы», «Нон-фикшн».
- «Как вам удобнее участвовать?» — обязательная radio-группа «Очно» / «Онлайн».
- «Что хотите обсудить?» — необязательный textarea максимум на 300 символов; добавь ограничение или счётчик символов.
- Имена, телефоны и email не добавляй.
В конце проверь требования по коду: пустая форма не показывает успех; выбор «Короткие рассказы» и «Онлайн» при пустом комментарии допустим; сводка выводит именно выбранные значения; в коде нет fetch, localStorage и сетевой отправки. Это контроль требований к прототипу, а не отчёт о проведённом браузерном тесте.
Подставляйте свои вопросы и поля в блоке «Данные опроса», а требования к поведению оставляйте конкретными. Фраза «локальная сводка» задаёт ожидаемый результат: JavaScript читает текущие значения и добавляет их в тот же документ, не изображая доставку ответов.
Что именно проверяет промпт
required подходит для обязательного select и radio-группы. Браузер покажет подсказку, если пользователь не сделал обязательный выбор, но это проверка только на стороне клиента. При настоящем приёме данных те же ограничения и сами значения дополнительно проверяют на сервере — об этом подробно говорит материал MDN о проверке форм.
В прототипе кнопка не должна маскировать отправку под благодарность. Она проходит нативную валидацию, читает выбранную тему и способ участия, затем показывает сводку на этой же странице. HTML сам по себе не передаёт ответы организатору. Для настоящего опроса отдельно выбирают обработчик, серверную проверку, доставку и место хранения.
Как проверить прототип
Сохраните ответ ChatGPT как index.html и откройте файл в браузере. План проверки такой:
- Нажмите кнопку на пустой форме: обязательные поля должны получить подсказку, а сводка не появляется.
- Выберите «Короткие рассказы» и «Онлайн», оставьте комментарий пустым: форма должна пройти проверку.
- Сверьте сводку с выбранными значениями.
- Проверьте код на отсутствие
fetch,localStorageи сетевых запросов; страница не должна уходить на неизвестный URL. - Пройдите поля, radio-группу и кнопку клавишей Tab, проверяя видимый фокус.
Это план проверки, а не заявление о проведённом браузерном тесте. Появление блока благодарности также не доказывает доставку ответов.
Если на узком экране форма читается плохо, используйте уточняющий запрос:
Сделай форму удобнее на узком экране: улучши отступы, переносы и читаемость, но не меняй вопросы, варианты, обязательность и локальный характер демонстрации. Верни полный файл index.html.
После правки повторите проверки. Если форма получилась не такой, как требуется, сначала уточните исходные данные и критерии в материале как написать промпт для ChatGPT. О сохранении HTML рассказано в инструкции как сохранить HTML-код из ChatGPT.
Источники
- ChatGPT Free Tier FAQOpenAI
- Client-side form validation — MDNMDN Web Docs
- Подписки ChatGPT — Amber MarketAmber Market