How to Integrate Typeform with Your Headless CMS

What is Typeform?

Typeform is a form and survey platform used to build conversational forms, quizzes, lead capture flows, event registrations, and customer feedback surveys. Teams use it when the form experience matters, especially when they need conditional logic, branded layouts, integrations, and response collection without building every input screen from scratch. Typeform provides REST APIs, webhooks, and an official JavaScript SDK for creating forms, reading responses, and automating form operations.

Why integrate Typeform with a headless CMS?

Form content changes more often than people expect. A product marketing team updates qualification questions before a launch. An events team changes registration options when a workshop sells out. A research team adds two screening questions after the first 50 responses. If those questions live only inside Typeform, your website, campaign pages, translations, and internal docs can drift out of sync within a week.

Architecture overview

A typical Sanity and Typeform integration starts with a form definition in Sanity Studio: title, slug, questions, field types, choices, required flags, consent text, and campaign metadata. When that document is published, a Sanity webhook fires with the document ID, or a Sanity Function runs on the content mutation. The handler uses @sanity/client and GROQ to fetch exactly the fields Typeform needs, including referenced options such as products, event sessions, or audience segments. The handler then calls Typeform's Create API through @typeform/api-client to create or update the Typeform form with fields such as short_text, email, multiple_choice, yes_no, opinion_scale, and statement. The frontend can render the Typeform embed URL on a landing page, send users to the hosted Typeform URL, or show the form inside a campaign page. Typeform collects responses, and if you need response data back in your content operations, Typeform webhooks can send submission events to a separate endpoint for analysis, routing, or enrichment.

Common use cases

Step-by-step integration

1. 1

   Create your Typeform workspace and token

   Create or open a Typeform account, choose the workspace that will own the forms, then create a personal access token from your Typeform account settings. Install the official SDK with npm install @typeform/api-client.

2. 2

   Model form definitions in Sanity Studio

   Create a schema with fields such as title, slug, typeformId, questions, question type, label, required, helper text, and choices. If choices come from other content, use references so GROQ can join them at sync time.

3. 3

   Add a webhook or Sanity Function

   Trigger the sync when documents of type typeformDefinition are created, updated, or published. Use a GROQ-powered webhook filter so edits to unrelated content don't call Typeform.

4. 4

   Fetch the exact content Typeform needs

   In the handler, use @sanity/client with a GROQ query that returns only the title, question labels, field types, validation flags, and choice labels. This keeps the Typeform payload small and predictable.

5. 5

   Create or update the Typeform form

   Call Typeform's Create API through @typeform/api-client. Map Sanity question types to Typeform field types such as short_text, email, multiple_choice, yes_no, and opinion_scale. Store the returned Typeform form ID or public URL back on the Sanity document if your frontend needs it.

6. 6

   Test the frontend and response flow

   Open the published page, confirm the embedded Typeform loads, submit a test response, and verify that the response appears in Typeform. If responses need to trigger follow-up work, add a Typeform webhook for submission events.

How Sanity + Typeform works

CMS approaches to Typeform

Keep building

Explore related integrations to complete your content stack.