Fillout: Form Builder Tốt Nhất Cho Next.js App Năm 2026
Tìm hiểu tại sao Fillout đang thay thế Google Forms và Typeform trong các Next.js app — từ tích hợp API đến conditional logic và webhooks.
Vấn đề với form builder hiện tại
Google Forms thì miễn phí nhưng xấu và không customizable. Typeform thì đẹp nhưng đắt và khó tích hợp vào app. Formik/React Hook Form tự code thì mất thời gian với mỗi project mới. Fillout đang lấp đúng khoảng trống này — form builder mạnh mẽ, developer-friendly, và có giá hợp lý.
Fillout là gì?
Fillout là form builder thế hệ mới với focus vào developer experience. Bạn build form bằng drag-and-drop UI, sau đó embed vào app hoặc gọi qua API — không cần tự code validation, storage, hay email notifications.
- 30+ field types: Text, number, file upload, signature, payment (Stripe), scheduling
- Conditional logic: Show/hide fields dựa trên answers trước đó
- Multi-page forms: Break long forms thành nhiều bước với progress bar
- Webhooks: Nhận submission data real-time về server của bạn
- Prefill via URL: Auto-fill fields từ URL params hoặc logged-in user data
Tích hợp vào Next.js với Webhook
Cách phổ biến nhất: Fillout collect responses, webhook gửi data về API route của bạn để xử lý:
// app/api/fillout-webhook/route.ts
import { NextRequest, NextResponse } from 'next/server';
interface FilloutSubmission {
submissionId: string;
submissionTime: string;
questions: Array<{
id: string;
name: string;
value: string | string[];
}>;
}
export async function POST(req: NextRequest) {
const body: FilloutSubmission = await req.json();
// Lấy giá trị field theo name
const getValue = (name: string) =>
body.questions.find(q => q.name === name)?.value ?? null;
const email = getValue('Email') as string;
const name = getValue('Full Name') as string;
const plan = getValue('Plan Interest') as string;
// Xử lý: lưu DB, gửi email, notify Slack...
await Promise.all([
saveLeadToDatabase({ email, name, plan }),
sendWelcomeEmail({ email, name }),
notifySlackChannel({ email, plan }),
]);
return NextResponse.json({ received: true });
}Prefill form cho user đã đăng nhập
Fillout hỗ trợ prefill qua URL parameters — rất hữu ích khi user đã login và bạn muốn điền sẵn thông tin:
// Tạo URL có prefill data
function getFilledFormUrl(user: { name: string; email: string }) {
const baseUrl = 'https://form.fillout.com/t/your-form-id';
const params = new URLSearchParams({
'Full Name': user.name,
'Email': user.email,
});
return `${baseUrl}?${params.toString()}`;
}
// Trong component
export function FeedbackButton({ user }: { user: User }) {
const formUrl = getFilledFormUrl(user);
return (
<a
href={formUrl}
target="_blank"
rel="noopener noreferrer"
className="btn-primary"
>
Gửi feedback
</a>
);
}Embed trực tiếp vào page
Ngoài popup/redirect, Fillout còn cho phép embed inline vào page — giống như form là một phần của layout:
<!-- Thêm vào <head> -->
<script src="https://server.fillout.com/embed/v1/"></script>
<!-- Trong JSX -->
<div
style={{ width: '100%', height: '500px' }}
data-fillout-id="your-form-id"
data-fillout-embed-type="standard"
data-fillout-inherit-parameters
data-fillout-dynamic-resize
/>So sánh nhanh với các alternatives
- vs Google Forms: Fillout đẹp hơn, có webhook, conditional logic
- vs Typeform: Fillout rẻ hơn đáng kể, API tốt hơn
- vs Tally: Fillout có nhiều field types hơn, payment integration tốt hơn
- vs tự code: Fillout tiết kiệm 2-3 ngày dev time mỗi form phức tạp
Pricing
Free plan: unlimited forms, 1,000 submissions/tháng — đủ cho most projects. Starter $15/tháng nếu cần nhiều hơn. So với Typeform bắt đầu từ $25/tháng với limit submissions, Fillout rõ ràng có lợi thế về giá.
Form là touchpoint quan trọng nhất trong user journey — onboarding, feedback, lead capture. Đừng để một Google Form xấu xí làm hỏng impression đầu tiên.
Thử Fillout miễn phí tại try.fillout.com/nguyen-dang-binh-owy2.
Admin
Fillout
Form builder mạnh cho dev — tích hợp Next.js, React, Notion, Airtable. Tiết kiệm hàng giờ code.
Bình luận (0)
Đăng nhập để bình luận
Chưa có bình luận nào. Hãy là người đầu tiên!