How to Integrate Typeform with V0

Start by generating your response analytics or form management dashboard UI in V0 using mock response data. Building the visual design first lets you decide on the information architecture before dealing with the specifics of the Typeform API response format. Typeform responses have a structured format: each response has a `submitted_at` timestamp, a `landed_at` timestamp, `response_id`, and an `answers` array. Each answer contains a `field` object (with the question ID and title), a `type` (one of `text`, `choice`, `choices`, `number`, `boolean`, `date`, `email`, `url`, `file_url`, `payment`, `ranking`), and the actual answer value in a type-specific field (`text`, `choice.label`, `choices.labels[]`, `number`, `boolean`, `date`). When asking V0 to generate your dashboard, describe the answer types you expect from your Typeform questions. For a customer satisfaction form, you might have: a star rating (type `number`), an NPS score (type `number`), a satisfaction choice (type `choice` with values 'Very satisfied', 'Satisfied', 'Neutral', 'Dissatisfied'), and an open text comment (type `text`). V0 should generate components that handle each answer type appropriately — numbers as bar charts or gauges, choices as pie/bar charts, text as a scrollable list. Also ask V0 to generate an empty state component for when no responses exist yet, and a loading state with skeleton placeholders for the response list. These states improve the user experience during the API call latency.

Create a Next.js API route that fetches responses from your Typeform form using the Typeform Retrieve API. The base URL is `https://api.typeform.com/forms/{formId}/responses`. Authentication uses a Bearer token in the Authorization header. The retrieve endpoint supports several useful query parameters: `page_size` (number of responses per page, max 1000), `since` and `until` (ISO 8601 date strings for filtering by submission date), `sort` (sort order — `submitted_at,desc` for newest first), `query` (full-text search across text answers), and `token` (pagination cursor for fetching the next page). The response object from the Typeform API contains a `total_items` count, `page_count`, and an `items` array of response objects. Each response has the `response_id`, `submitted_at`, `landed_at`, `metadata` (including browser, platform, and referrer), and the `answers` array. To parse answers into a useful format for your frontend, create a utility function that transforms the raw Typeform answer format into a flat key-value object keyed by question title. This makes it much easier to display specific answers in your dashboard without navigating the nested `answers` array for each response. For example, transform `{ field: { id: 'abc123', title: 'What is your satisfaction level?' }, type: 'choice', choice: { label: 'Very satisfied' } }` into `{ 'What is your satisfaction level?': 'Very satisfied' }`.

1// app/api/typeform/responses/route.ts
2import { NextRequest, NextResponse } from 'next/server'
3
4const TYPEFORM_BASE_URL = 'https://api.typeform.com'
5
6function parseAnswers(answers: any[]): Record<string, string | string[] | number | boolean> {
7  const parsed: Record<string, string | string[] | number | boolean> = {}
8  for (const answer of answers) {
9    const questionTitle = answer.field?.title || answer.field?.id
10    switch (answer.type) {
11      case 'text':
12        parsed[questionTitle] = answer.text
13        break
14      case 'choice':
15        parsed[questionTitle] = answer.choice?.label || answer.choice?.other || ''
16        break
17      case 'choices':
18        parsed[questionTitle] = answer.choices?.labels || []
19        break
20      case 'number':
21        parsed[questionTitle] = answer.number
22        break
23      case 'boolean':
24        parsed[questionTitle] = answer.boolean
25        break
26      case 'email':
27        parsed[questionTitle] = answer.email
28        break
29      case 'date':
30        parsed[questionTitle] = answer.date
31        break
32      default:
33        parsed[questionTitle] = JSON.stringify(answer[answer.type] || '')
34    }
35  }
36  return parsed
37}
38
39export async function GET(request: NextRequest) {
40  const { searchParams } = new URL(request.url)
41  const formId = process.env.TYPEFORM_FORM_ID
42  const since = searchParams.get('since') || ''
43  const until = searchParams.get('until') || ''
44  const pageSize = searchParams.get('page_size') || '50'
45
46  if (!formId) {
47    return NextResponse.json({ error: 'TYPEFORM_FORM_ID not configured' }, { status: 500 })
48  }
49
50  const params = new URLSearchParams({
51    page_size: pageSize,
52    sort: 'submitted_at,desc',
53    ...(since && { since }),
54    ...(until && { until }),
55  })
56
57  try {
58    const response = await fetch(
59      `${TYPEFORM_BASE_URL}/forms/${formId}/responses?${params}`,
60      {
61        headers: {
62          Authorization: `Bearer ${process.env.TYPEFORM_ACCESS_TOKEN}`,
63          'Content-Type': 'application/json',
64        },
65        next: { revalidate: 60 }, // Cache for 60 seconds
66      }
67    )
68
69    if (!response.ok) {
70      const error = await response.json()
71      return NextResponse.json({ error: error.description || 'Typeform API error' }, { status: response.status })
72    }
73
74    const data = await response.json()
75
76    const responses = data.items.map((item: any) => ({
77      response_id: item.response_id,
78      submitted_at: item.submitted_at,
79      landed_at: item.landed_at,
80      completion_time_seconds: item.metadata?.time_to_complete || 0,
81      answers: parseAnswers(item.answers || []),
82      raw_answers: item.answers || [],
83    }))
84
85    return NextResponse.json({
86      responses,
87      total_items: data.total_items,
88      page_count: data.page_count,
89    })
90  } catch (error) {
91    return NextResponse.json({ error: 'Failed to fetch Typeform responses' }, { status: 500 })
92  }
93}

Webhooks allow your application to receive Typeform submissions in real time — the moment someone completes your form, Typeform sends the response data to your webhook URL. This is ideal for triggering automations: sending confirmation emails, creating CRM records, sending Slack notifications, or any other action that should happen immediately after form completion. Create a webhook handler at `app/api/typeform/webhook/route.ts`. This route accepts POST requests from Typeform. Typeform sends a JSON body containing the form response in the same format as the Retrieve API, plus a `form_id` and `form_response` object. For security, Typeform signs webhook payloads with an HMAC SHA256 signature using a webhook secret you configure. Verify this signature in your handler to ensure the request actually came from Typeform and not an attacker. The signature is sent in the `Typeform-Signature` header as `sha256=BASE64_ENCODED_SIGNATURE`. Compare it against a SHA256 HMAC of the raw request body using your webhook secret. The webhook handler should process the response quickly and return a 200 status. If your processing logic takes more than a few seconds (e.g., sending an email), use a fire-and-forget pattern: return 200 immediately and process asynchronously, or queue the work in a background job system. Typeform will retry webhook delivery if it receives a non-2xx response. After creating the webhook route, configure it in Typeform: go to your form in Typeform → Connect → Webhooks → Add Webhook. Enter your Vercel webhook URL (`https://your-app.vercel.app/api/typeform/webhook`), add your webhook secret, and click Save. Use the 'Test' button to send a sample payload and verify your handler processes it correctly.

1// app/api/typeform/webhook/route.ts
2import { NextRequest, NextResponse } from 'next/server'
3import crypto from 'crypto'
4
5function verifyTypeformSignature(
6  payload: string,
7  signature: string,
8  secret: string
9): boolean {
10  const expectedSignature = crypto
11    .createHmac('sha256', secret)
12    .update(payload)
13    .digest('base64')
14  const expected = `sha256=${expectedSignature}`
15  return crypto.timingSafeEqual(
16    Buffer.from(signature),
17    Buffer.from(expected)
18  )
19}
20
21export async function POST(request: NextRequest) {
22  const rawBody = await request.text()
23  const signature = request.headers.get('Typeform-Signature') || ''
24  const webhookSecret = process.env.TYPEFORM_WEBHOOK_SECRET
25
26  // Verify webhook signature if secret is configured
27  if (webhookSecret && signature) {
28    const isValid = verifyTypeformSignature(rawBody, signature, webhookSecret)
29    if (!isValid) {
30      return NextResponse.json({ error: 'Invalid signature' }, { status: 401 })
31    }
32  }
33
34  let body: any
35  try {
36    body = JSON.parse(rawBody)
37  } catch {
38    return NextResponse.json({ error: 'Invalid JSON payload' }, { status: 400 })
39  }
40
41  const formResponse = body.form_response
42  if (!formResponse) {
43    return NextResponse.json({ error: 'No form_response in payload' }, { status: 400 })
44  }
45
46  const responseId = formResponse.token
47  const submittedAt = formResponse.submitted_at
48  const answers = formResponse.answers || []
49
50  // Process the submission — examples:
51  // 1. Save to database
52  // 2. Send confirmation email
53  // 3. Create CRM lead
54  // 4. Send Slack notification
55
56  // Extract specific answers by field ref
57  const emailAnswer = answers.find((a: any) => a.field?.ref === 'email_field')
58  const respondentEmail = emailAnswer?.email || ''
59
60  console.log(`New Typeform submission: ${responseId} from ${respondentEmail} at ${submittedAt}`)
61
62  // Return 200 immediately to acknowledge receipt
63  return NextResponse.json({ received: true, response_id: responseId })
64}

Add your Typeform credentials to Vercel to connect the full integration. Go to Vercel Dashboard → your project → Settings → Environment Variables and add three variables. Add `TYPEFORM_ACCESS_TOKEN` with your Personal Access Token from Typeform → Account Settings → Developer apps → Personal access tokens. This token authenticates all Typeform Retrieve API calls. Keep this token server-side only — it has access to all your Typeform forms and responses. Add `TYPEFORM_FORM_ID` with the ID of the specific form you want to display responses for. Find this in your Typeform form URL (typeform.com/to/FORM_ID) or in your form's Settings page. If you want to support multiple forms, you can make this a runtime parameter in your API route instead of a fixed environment variable. Add `TYPEFORM_WEBHOOK_SECRET` with the random secret string you use to verify webhook signatures. You set this same string in Typeform's webhook configuration. This prevents unauthorized requests to your webhook endpoint. After saving all environment variables, trigger a new Vercel deployment. Test the full flow: load your dashboard and verify it shows real Typeform responses from your form. Then submit a test response through your Typeform form and verify the webhook handler receives it and logs correctly. For production use, consider adding response data caching to avoid hitting Typeform's API rate limits (1,000 requests/hour on Pro plans). Use Next.js's `{ next: { revalidate: 60 } }` option in your fetch calls to cache responses for 60 seconds — this reduces API calls significantly for dashboards that multiple users view simultaneously.

1// Vercel Dashboard → Settings → Environment Variables:
2// TYPEFORM_ACCESS_TOKEN = your_personal_access_token
3// TYPEFORM_FORM_ID = your_form_id_from_typeform_url
4// TYPEFORM_WEBHOOK_SECRET = random_secret_string_for_webhook_verification
5
6// To get your form ID from Typeform URL:
7// https://yourworkspace.typeform.com/to/FORM_ID  ← this is your form ID
8// Or from Typeform → Forms → click your form → Settings → Basic settings → Form ID
9
10// Typeform webhook configuration:
11// Typeform → your form → Connect → Webhooks → Add webhook
12// URL: https://your-app.vercel.app/api/typeform/webhook
13// Secret: same value as TYPEFORM_WEBHOOK_SECRET
14// Enable: turn on and click Save
15
16// Test the retrieve API route:
17// GET https://your-app.vercel.app/api/typeform/responses
18// Should return { responses: [...], total_items: N }