Smart Forms With AI: Using Fillout and Next.js for Dynamic Data Collection

Beyond Static Forms

Traditional forms are static: every user sees the same questions in the same order. Smart forms adapt — showing or hiding questions based on previous answers, pre-filling fields from available context, and validating in ways that understand intent rather than just format.

Fillout is a form builder with a solid API and conditional logic. Combined with AI, you can build forms that genuinely feel intelligent.

Setting Up Fillout

// lib/fillout.ts
const FILLOUT_API_BASE = 'https://api.fillout.com/v1/api';
const FILLOUT_API_KEY = process.env.FILLOUT_API_KEY!;

export async function getFilloutResponses(formId: string) {
  const response = await fetch(
    `${FILLOUT_API_BASE}/forms/${formId}/submissions`,
    {
      headers: {
        'Authorization': `Bearer ${FILLOUT_API_KEY}`,
      },
    }
  );
  return response.json();
}

export async function getFilloutForm(formId: string) {
  const response = await fetch(
    `${FILLOUT_API_BASE}/forms/${formId}`,
    {
      headers: {
        'Authorization': `Bearer ${FILLOUT_API_KEY}`,
      },
    }
  );
  return response.json();
}

AI-Powered Field Validation

Standard validation checks formats. AI validation checks intent. Here's an API route that validates a business description field semantically:

// app/api/validate-field/route.ts
import { generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

export async function POST(request: Request) {
  const { field, value, context } = await request.json();

  const { object } = await generateObject({
    model: openai('gpt-4o-mini'),
    schema: z.object({
      valid: z.boolean(),
      score: z.number().min(0).max(100),
      feedback: z.string(),
      suggestion: z.string().optional(),
    }),
    prompt: `Validate this form field value.
Field: ${field}
Value: ${value}
Form context: ${JSON.stringify(context)}

Check if the value is appropriate, complete, and makes sense for the field.
Provide helpful feedback if it needs improvement.`,
  });

  return Response.json(object);
}

Dynamic Question Generation

// Generate follow-up questions based on previous answers
async function generateFollowUpQuestions(
  currentAnswers: Record<string, string>,
  formPurpose: string
): Promise<string[]> {
  const { object } = await generateObject({
    model: openai('gpt-4o-mini'),
    schema: z.object({
      questions: z.array(z.object({
        id: z.string(),
        question: z.string(),
        type: z.enum(['text', 'select', 'boolean']),
        options: z.array(z.string()).optional(),
      })).max(3),
    }),
    prompt: `Based on these form answers: ${JSON.stringify(currentAnswers)}

For a ${formPurpose} form, generate up to 3 relevant follow-up questions
that would help gather more useful information. Make them specific and actionable.`,
  });

  return object.questions;
}

Auto-Fill From User Context

// Pre-fill form fields using AI analysis of user profile
async function prefillFormFromProfile(profile: UserProfile, formFields: string[]) {
  const { object } = await generateObject({
    model: openai('gpt-4o-mini'),
    schema: z.record(z.string()),
    prompt: `Given this user profile: ${JSON.stringify(profile)}
    
Pre-fill these form fields with appropriate values where possible: ${formFields.join(', ')}
Only fill fields where you have reasonable confidence. Return field name to value mapping.`,
  });
  
  return object; // { companyName: 'Acme', industry: 'SaaS', ... }
}

When AI Forms Shine

The investment in AI forms pays off for:

• Onboarding flows where questions depend heavily on user type
• Support tickets that route intelligently based on description
• Applications or proposals that need quality assessment
• Research surveys that adapt based on expertise level

For simple contact forms and newsletter signups, stick to regular forms — AI adds complexity without meaningful value there.