Tự động hóa form trong Next.js với Fillout: Hết thời copy-paste dữ liệu

Nếu bạn đã từng build một contact form "đơn giản" rồi nhận ra mình phải tự tay copy dữ liệu từ email sang CRM, tạo task trong Notion, rồi reply lại khách hàng — bạn biết cái cảm giác đó kinh khủng như thế nào. Vấn đề không phải là form, mà là mọi thứ xảy ra sau khi user submit.

Cái gap mà ít developer để ý

Thường thì khi nói đến form, chúng ta tập trung vào validation, accessibility, UX — những thứ đúng đắn. Nhưng rồi data "rơi" vào một cái inbox hoặc một bảng database, và business logic bắt đầu từ đây... mà không ai handle.

Đây là nơi mà các công cụ như Fillout tỏa sáng. Thay vì build form từ đầu và tự viết integration với từng dịch vụ, bạn có thể embed một Fillout form vào Next.js app và có ngay:

• Webhook tự động khi có submission
• Tích hợp sẵn với Notion, Airtable, HubSpot, Slack...
• Logic phân nhánh, scheduling, payment collection
• Analytics về completion rate và drop-off points

Embed Fillout vào Next.js app trong 5 phút

Cách đơn giản nhất là dùng script embed chính thức. Nhưng nếu bạn muốn cách "React-native" hơn, đây là một wrapper component gọn nhẹ:

// components/FilloutEmbed.tsx
"use client";

import { useEffect } from "react";

interface FilloutEmbedProps {
  formId: string;
  height?: number;
}

export function FilloutEmbed({ formId, height = 500 }: FilloutEmbedProps) {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://server.fillout.com/embed/v1/";
    script.async = true;
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return (
    <div
      data-fillout-id={formId}
      data-fillout-embed-type="standard"
      data-fillout-inherit-parameters
      style={{ width: "100%", height: `${height}px` }}
    />
  );
}

Dùng component này trong page của bạn:

// app/contact/page.tsx
import { FilloutEmbed } from "@/components/FilloutEmbed";

export default function ContactPage() {
  return (
    <main className="max-w-2xl mx-auto py-12 px-4">
      <h1 className="text-3xl font-bold mb-8">Liên hệ với chúng tôi</h1>
      <FilloutEmbed formId="your-form-id" height={600} />
    </main>
  );
}

Automation thực tế: Lead → Notion → Slack

Đây là workflow mà tôi đang dùng cho side project: Khi có lead mới điền form tư vấn:

• Fillout nhận submission và validate data
• Webhook trigger tự động tạo record trong Notion database
• Slack notification tới channel #new-leads
• Email tự động reply đến khách với thông tin onboarding

Toàn bộ pipeline này setup mất khoảng 20 phút trong Fillout dashboard, zero code. Nếu bạn cần custom logic phức tạp hơn, Fillout hỗ trợ webhook với payload đầy đủ để xử lý ở backend Next.js:

// app/api/fillout-webhook/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  const payload = await request.json();
  const { submission_id, questions } = payload;

  // Extract form fields
  const name = questions.find((q: { name: string }) => q.name === "name")?.value;
  const email = questions.find((q: { name: string }) => q.name === "email")?.value;
  const budget = questions.find((q: { name: string }) => q.name === "budget")?.value;

  // Business logic của bạn ở đây
  await createCRMContact({ name, email, budget });
  await sendWelcomeEmail(email, name);

  return NextResponse.json({ received: true });
}

Khi nào nên dùng Fillout vs build custom?

Đây là câu hỏi thực tế. Tôi thường chọn Fillout khi:

• Form cần deploy nhanh — MVPs, landing pages, campaigns
• Non-technical stakeholders cần tự edit form content
• Cần nhiều integrations phức tạp (payment, scheduling, conditional logic)
• Muốn analytics out-of-the-box mà không setup thêm gì

Ngược lại, build custom khi form là core product feature, cần UX hoàn toàn custom, hoặc có yêu cầu compliance đặc biệt về data storage.

Fillout có free tier khá generous — phù hợp để bắt đầu. Bạn có thể thử ngay tại try.fillout.com và cảm nhận sự khác biệt giữa "form works" và "business works".

Bottom line: Một senior dev giỏi không phải là người build mọi thứ từ đầu, mà là người biết khi nào nên "use the platform" và khi nào cần custom. Với forms và automation workflow, Fillout là lựa chọn tôi recommend cho hầu hết dự án không cần hyper-custom UI.