Русская версия

Как создать форму заявки с помощью Codex

Чтобы создать форму заявки с помощью Codex, сначала опишите поля, результат отправки и поведение при ошибке. Начните с учебной формы. Локальный ответ сервера позволяет проверить интерфейс, но не означает доставку настоящей заявки в CRM.

В нашем учебном примере три поля: имя, email и сообщение. До реализации определите, какие поля обязательны и что человек должен увидеть после отправки.

Подготовьте задание и отдельную папку

Используйте Промпт: Подготовить бриф сайта, затем прочитайте полученный бриф. В нём должны быть условия успеха, ошибки и граница учебного примера.

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

При наличии Python 3 сервер запускается в macOS командой python3 server.py. В Windows с Python launcher используется py -3 server.py. Откройте адрес из README. Команда для Windows приведена как способ запуска в таком окружении; сам опыт на Windows не выполнен.

Что проверить в форме

Используйте вымышленные данные: имя «Учебный читатель», email reader@example.test, сообщение «Проверка учебного сценария». Не вводите данные настоящих клиентов.

Пройдите проверки в этом порядке:

Действие Что должно произойти
Отправить пустую форму Появится «Введите имя», фокус перейдёт в поле имени
Указать имя и email wrong Появится «Введите корректный email»
Исправить email, оставить сообщение пустым Появится «Добавьте сообщение»
Заполнить сообщение, включить «Смоделировать ошибку сервера» и отправить Появится ошибка, имя, email и сообщение останутся в полях
Выключить учебную ошибку и повторить отправку Появится сообщение о принятой учебной заявке, поля очистятся, кнопка снова станет доступной
Переходить между полями клавишей Tab После имени откроется email, затем сообщение

Очистка полей здесь является поведением учебного примера, а не обязательным правилом для любого сайта. Главное: ошибка не должна уничтожать введённый текст, а успешный ответ должен ясно отличаться от ошибки.

Учебная форма после ошибки сервера: данные остались в полях, сообщение об ошибке находится под кнопкой

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

Проверьте узкий экран и управление клавиатурой. Снимок экрана показывает размещение элементов, но не подтверждает их поведение.

Если форма показывает успех, а заявки нет

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

Если адрес не открывается, убедитесь, что сервер запущен и порт совпадает с README. Не останавливайте неизвестную программу ради освобождения порта. Для остановки своего учебного сервера нажмите Ctrl+C в его терминале.

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

Дальше можно проверить дизайн экрана и права пользователей.

Промпт для первого шага

Сайт: [тип проекта и аудитория].
Главное действие посетителя: [одно конкретное действие].
Контент и материалы: [что уже есть].
Ограничения: [срок, стиль, доступные инструменты, расходы].

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

Все условия этого промпта.

В этой статье