Реализация формы запроса функции (Feature Request) на сайте
Feature Request форма — это не просто «поле для текста». Хорошо реализованная форма структурирует запросы пользователей: отделяет описание проблемы от предложенного решения, собирает контекст (кто просит, насколько часто сталкивается с проблемой), и позволяет команде приоритизировать беклог без телефонных звонков.
Структура формы
Минимальный набор полей, который даёт полезный сигнал:
- Заголовок запроса (коротко, суть)
- Описание проблемы (какую задачу пытаетесь решить — не «добавьте кнопку», а зачем)
- Предложенное решение (опционально)
- Категория / область продукта
- Оценка важности (насколько часто встречаете проблему)
// FeatureRequestForm.tsx (React + React Hook Form + Zod)
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
const schema = z.object({
title: z
.string()
.min(10, 'Минимум 10 символов')
.max(120, 'Максимум 120 символов'),
problem: z
.string()
.min(30, 'Опишите проблему подробнее')
.max(2000),
solution: z.string().max(2000).optional(),
category: z.enum(['ui-ux', 'performance', 'integrations', 'api', 'other']),
importance: z.enum(['critical', 'high', 'medium', 'low']),
email: z.string().email().optional().or(z.literal('')),
});
type FormData = z.infer<typeof schema>;
const CATEGORIES = [
{ value: 'ui-ux', label: 'Интерфейс / UX' },
{ value: 'performance', label: 'Производительность' },
{ value: 'integrations', label: 'Интеграции' },
{ value: 'api', label: 'API / разработчикам' },
{ value: 'other', label: 'Другое' },
] as const;
const IMPORTANCE = [
{ value: 'critical', label: 'Критично — не могу работать без этого' },
{ value: 'high', label: 'Высокая — сталкиваюсь каждый день' },
{ value: 'medium', label: 'Средняя — неудобно, но терпимо' },
{ value: 'low', label: 'Низкая — было бы приятно иметь' },
] as const;
export function FeatureRequestForm() {
const {
register,
control,
handleSubmit,
formState: { errors, isSubmitting, isSubmitSuccessful },
reset,
watch,
} = useForm<FormData>({
resolver: zodResolver(schema),
defaultValues: {
category: 'other',
importance: 'medium',
},
});
const titleValue = watch('title', '');
const onSubmit = async (data: FormData) => {
const res = await fetch('/api/feature-requests', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
...data,
submittedAt: new Date().toISOString(),
pageUrl: window.location.href,
}),
});
if (!res.ok) {
const err = await res.json();
throw new Error(err.message ?? 'Ошибка при отправке');
}
};
if (isSubmitSuccessful) {
return (
<div className="rounded-lg border border-green-200 bg-green-50 p-6 text-center">
<p className="text-lg font-semibold text-green-800">Запрос отправлен</p>
<p className="mt-2 text-sm text-green-700">
Мы рассмотрим его при планировании следующего релиза.
</p>
<button
onClick={() => reset()}
className="mt-4 text-sm text-green-700 underline"
>
Отправить ещё один
</button>
</div>
);
}
return (
<form onSubmit={handleSubmit(onSubmit)} className="space-y-5 max-w-xl">
{/* Заголовок */}
<div>
<label className="block text-sm font-medium mb-1">
Кратко опишите запрос
<span className="text-gray-400 ml-1 font-normal">
({titleValue.length}/120)
</span>
</label>
<input
{...register('title')}
type="text"
placeholder="Например: Экспорт данных в CSV"
className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
{errors.title && (
<p className="mt-1 text-xs text-red-600">{errors.title.message}</p>
)}
</div>
{/* Описание проблемы */}
<div>
<label className="block text-sm font-medium mb-1">
Какую проблему это решает?
</label>
<p className="text-xs text-gray-500 mb-1">
Опишите ситуацию, а не конкретное решение — это поможет нам найти лучший подход
</p>
<textarea
{...register('problem')}
rows={4}
placeholder="Когда я пытаюсь делать X, мне приходится Y, что неудобно потому что..."
className="w-full border rounded-md px-3 py-2 text-sm resize-y focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
{errors.problem && (
<p className="mt-1 text-xs text-red-600">{errors.problem.message}</p>
)}
</div>
{/* Предложенное решение */}
<div>
<label className="block text-sm font-medium mb-1">
Как бы вы это реализовали? <span className="text-gray-400">(опционально)</span>
</label>
<textarea
{...register('solution')}
rows={3}
placeholder="Добавьте кнопку «Экспорт» в меню таблицы, которая скачивает..."
className="w-full border rounded-md px-3 py-2 text-sm resize-y focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
{/* Категория */}
<div>
<label className="block text-sm font-medium mb-2">Область продукта</label>
<Controller
control={control}
name="category"
render={({ field }) => (
<div className="flex flex-wrap gap-2">
{CATEGORIES.map(cat => (
<button
key={cat.value}
type="button"
onClick={() => field.onChange(cat.value)}
className={`px-3 py-1.5 rounded-full text-xs border transition-colors ${
field.value === cat.value
? 'bg-blue-600 border-blue-600 text-white'
: 'border-gray-300 hover:border-blue-400'
}`}
>
{cat.label}
</button>
))}
</div>
)}
/>
</div>
{/* Важность */}
<div>
<label className="block text-sm font-medium mb-2">Насколько это важно для вас?</label>
<div className="space-y-2">
{IMPORTANCE.map(item => (
<label key={item.value} className="flex items-start gap-2 cursor-pointer">
<input
{...register('importance')}
type="radio"
value={item.value}
className="mt-0.5"
/>
<span className="text-sm">{item.label}</span>
</label>
))}
</div>
</div>
{/* Email */}
<div>
<label className="block text-sm font-medium mb-1">
Email <span className="text-gray-400">(чтобы уведомить вас о реализации)</span>
</label>
<input
{...register('email')}
type="email"
placeholder="[email protected]"
className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
{errors.email && (
<p className="mt-1 text-xs text-red-600">{errors.email.message}</p>
)}
</div>
<button
type="submit"
disabled={isSubmitting}
className="w-full bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-medium py-2.5 rounded-md text-sm transition-colors"
>
{isSubmitting ? 'Отправляю...' : 'Отправить запрос'}
</button>
</form>
);
}
API endpoint
// pages/api/feature-requests.ts (Next.js) или routes/feature-requests.ts (Express)
import type { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method !== 'POST') return res.status(405).end();
const { title, problem, solution, category, importance, email, pageUrl } = req.body;
// Базовая валидация
if (!title || !problem || !category || !importance) {
return res.status(400).json({ message: 'Обязательные поля не заполнены' });
}
const record = await db.featureRequest.create({
data: {
title,
problem,
solution: solution || null,
category,
importance,
email: email || null,
pageUrl,
status: 'new',
votes: 0,
},
});
// Уведомление в Linear/Jira/Notion через webhook
if (process.env.LINEAR_WEBHOOK_URL) {
await fetch(process.env.LINEAR_WEBHOOK_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title: `[Feature] ${title}`,
description: `**Проблема:**\n${problem}\n\n**Решение:**\n${solution ?? 'не указано'}`,
priority: importance === 'critical' ? 1 : importance === 'high' ? 2 : 3,
labelIds: [CATEGORY_LABEL_MAP[category]],
}),
});
}
return res.status(201).json({ id: record.id });
}
Интеграция с системой голосования
Если планируется добавить упдоуты к запросам — форму стоит сразу проектировать с уникальным ID записи и страницей /roadmap или /feature-requests, где пользователи видят и голосуют за уже существующие запросы. Это позволяет избежать дублей и собирать реальные сигналы приоритетности.
Сроки
Форма с валидацией, API и уведомлениями — два-три дня. Добавление дедупликации (поиск похожих запросов перед отправкой через простой text search), страница со списком запросов и публичное голосование — ещё три-пять дней.