Typeform

In the Bubble editor, click 'Backend Workflows' in the left navigation panel (this option only appears on paid Bubble plans). If you don't see it, upgrade your Bubble plan first. Click 'Add another workflow'. Name the workflow 'typeform-webhook'. By default, new Backend Workflows use 'API' as the trigger type — leave this as-is. You'll see a 'Expose as a public API endpoint' toggle; make sure this is enabled (it should be on by default for API workflows). Look below the workflow name to find the endpoint URL — it will look like: `https://yourapp.bubbleapps.io/api/1.1/wf/typeform-webhook` Copy this URL. If your app is on a custom domain, replace `yourapp.bubbleapps.io` with your custom domain. This is the URL you'll paste into Typeform's webhook settings in the next step. Note the `/initialize` URL variant: Bubble also provides `https://yourapp.bubbleapps.io/api/1.1/wf/typeform-webhook/initialize` — this initialize endpoint is used only during Typeform's test payload delivery for schema detection. Your production webhook URL does NOT include `/initialize`. Never paste the initialize URL into Typeform's webhook panel as the active endpoint.

1// Bubble Backend Workflow endpoint URLs
2
3// Production endpoint (paste into Typeform webhooks):
4https://yourapp.bubbleapps.io/api/1.1/wf/typeform-webhook
5
6// Schema detection endpoint (used once during setup only):
7https://yourapp.bubbleapps.io/api/1.1/wf/typeform-webhook/initialize
8
9// Note: Replace 'yourapp' with your actual Bubble app name
10// If using custom domain: https://yourdomain.com/api/1.1/wf/typeform-webhook

Log into your Typeform account and open the form you want to connect to Bubble. Click 'Connect' in the top navigation, then find 'Webhooks' in the integration list. Click 'Add a webhook'. In the 'Destination URL' field, paste your Bubble Backend Workflow URL: `https://yourapp.bubbleapps.io/api/1.1/wf/typeform-webhook`. Leave Secret Token blank for now (you can add one later for webhook signature verification if needed). Click 'Save webhook'. Now trigger the Detect Data step. In Bubble's Backend Workflow editor, with the 'typeform-webhook' workflow open, click the trigger settings area and look for 'Detect Data' or 'Click here to detect data from the request'. This enables Bubble to learn the payload structure from an incoming request. Back in Typeform, find your webhook in the list and click 'Deliver sample payload' (sometimes labeled 'Test webhook' or 'Send test'). This sends a sample Typeform payload to your Bubble workflow URL. Return to Bubble. After the sample payload is received, Bubble's Detect Data step should populate with typed fields from the Typeform payload structure. You'll see fields like `form_response`, `form_response.answers`, `form_response.submitted_at`, and others. This detected schema is what you'll reference when building the workflow actions. IMPORTANT: Without clicking 'Deliver sample payload', Bubble's Detect Data step has no schema, and your workflow actions have no typed fields to reference. This step is mandatory before building the parsing logic.

1// Sample Typeform webhook payload structure
2{
3  "event_id": "01ABCD",
4  "event_type": "form_response",
5  "form_response": {
6    "form_id": "FORM_ID",
7    "token": "RESPONSE_TOKEN",
8    "submitted_at": "2026-07-09T10:30:00Z",
9    "answers": [
10      {
11        "field": { "id": "abc123", "type": "short_text", "ref": "name_question" },
12        "type": "text",
13        "text": "Jane Smith"
14      },
15      {
16        "field": { "id": "def456", "type": "email", "ref": "email_question" },
17        "type": "email",
18        "email": "jane@example.com"
19      },
20      {
21        "field": { "id": "ghi789", "type": "multiple_choice", "ref": "interest_question" },
22        "type": "choice",
23        "choice": { "label": "Product Demo" }
24      }
25    ]
26  }
27}

Before adding workflow actions, create the Bubble data type to store parsed submissions. Go to Data tab → Data types → 'Create a new type' → name it 'TypeformResponse'. Add fields: respondent_email (text), respondent_name (text), form_id (text), response_token (text), submitted_at (date), raw_interest (text), notes (text). Add any additional fields that match the specific questions in your Typeform — one field per question you want to capture. Return to the Backend Workflow editor. In the 'typeform-webhook' workflow, add workflow actions: Action 1: 'Create a new TypeformResponse'. Set the field values by referencing the detected payload data: - submitted_at = trigger's form_response's submitted_at - form_id = trigger's form_response's form_id - response_token = trigger's form_response's token For the `answers` fields, you need to extract values from the answers array. Typeform's answers are heterogeneous — the value lives in different keys depending on question type. To extract a specific answer: - For text questions: trigger's form_response's answers filtered by field's ref = 'name_question': first item's text - For email questions: trigger's form_response's answers filtered by field's ref = 'email_question': first item's email - For choice questions: trigger's form_response's answers filtered by field's ref = 'interest_question': first item's choice's label The `field.ref` is the unique reference ID you set for each question in Typeform's question settings. In Typeform, open each question → Settings → Reference ID — use these refs to reliably identify answers regardless of question order. Set Privacy rules: go to Data tab → Privacy → TypeformResponse → restrict to logged-in users only. Typeform submission data including emails is personal data that should not be publicly readable.

1// Typeform answers parsing — extracting by field ref
2// In Bubble workflow action 'Create a new TypeformResponse':
3
4// respondent_name field:
5// Source: trigger's form_response's answers
6// Filter: field's ref = "name_question" (your question's ref ID)
7// Extract: :first item's text
8
9// respondent_email field:
10// Source: trigger's form_response's answers
11// Filter: field's ref = "email_question"
12// Extract: :first item's email
13
14// multiple choice field:
15// Source: trigger's form_response's answers
16// Filter: field's ref = "interest_question"
17// Extract: :first item's choice's label
18
19// number/rating field:
20// Source: trigger's form_response's answers
21// Filter: field's ref = "rating_question"
22// Extract: :first item's number
23
24// date field:
25// Source: trigger's form_response's answers
26// Filter: field's ref = "date_question"
27// Extract: :first item's date

For pulling existing Typeform responses (before the webhook was configured, or for bulk analytics), you need a separate API Connector call using your Typeform Personal Access Token. Click Plugins tab → API Connector → 'Add another API'. Name it 'Typeform API'. In the Shared headers section, click '+ Add a shared header'. Enter: name = `Authorization`, value = `Bearer YOUR_PERSONAL_ACCESS_TOKEN`. Enable the 'Private' checkbox on this header — the Personal Access Token grants read/write access to ALL forms in your Typeform account and must never reach the browser. Set the base URL to `https://api.typeform.com`. Click 'Add a call'. Name it 'Get Form Responses'. Set method to GET, path to `/forms/{{form_id}}/responses`. Add URL parameters: - `page_size` — value: `200` (maximum allowed by Typeform API) - `before` — leave empty (used for pagination; Typeform uses cursor-based pagination, not page numbers) The `before` parameter accepts the `token` value from the last response in a batch — to get the next page, pass that token as the `before` value. This is different from most APIs that use page numbers. Click 'Initialize call'. In the form_id test field, enter your actual Typeform form ID. Click 'Initialize'. Bubble detects the response structure from the Typeform API. Set 'Use as' to 'Data' to enable Repeating Group binding. IMPORTANT: The Personal Access Token grants full read/write access to all forms in your account. Use it only in API Connector shared headers with the Private checkbox enabled. Never reference it in client-side Bubble actions or expose it in workflows that non-admin users can trigger.

1// Typeform API Connector configuration
2{
3  "api_name": "Typeform API",
4  "base_url": "https://api.typeform.com",
5  "shared_headers": [
6    {
7      "name": "Authorization",
8      "value": "Bearer <private: YOUR_PERSONAL_ACCESS_TOKEN>",
9      "private": true
10    }
11  ],
12  "calls": [
13    {
14      "name": "Get Form Responses",
15      "method": "GET",
16      "path": "/forms/{{form_id}}/responses",
17      "params": [
18        { "name": "page_size", "value": "200" },
19        { "name": "before", "value": "" }
20      ]
21    }
22  ]
23}

Create a new Bubble page called 'typeform-responses'. This page will serve as the admin dashboard for managing Typeform submissions that have been received via webhook and stored in your TypeformResponse data type. Add a Repeating Group. Set its type to 'TypeformResponse'. Set the data source to 'Do a search for TypeformResponses' with Sort by = submitted_at descending. Set height to 60 pixels per row and add at least 3-4 columns showing: respondent_name, respondent_email, submitted_at (formatted as date), and the key question fields you captured (interest, notes, etc.). Add a search bar (Input element with a workflow that filters the Repeating Group) and a date range filter if needed. In each Repeating Group row, add a 'View Details' button that navigates to a single-response detail page or opens a popup showing all fields for the selected TypeformResponse. For bulk historical syncs, add a 'Sync from Typeform API' button on an admin page. Its workflow: call API Connector → Typeform API → Get Form Responses → for each response in the results, check if a TypeformResponse with that response_token already exists (search, count > 0), if not, create a new one. This prevents duplicate records when syncing. For WU efficiency: the webhook-driven workflow (step 3) processes one record at a time — very low WU cost. The bulk historical sync (this step) processes up to 200 records in a loop — higher WU consumption. Cache the last sync timestamp in an AppConfig field and only allow re-syncing after a defined interval (e.g., once per hour) to prevent accidental over-fetching. RapidDev's team frequently builds Typeform + Bubble intake systems and lead dashboards for clients — book a free scoping call at rapidevelopers.com/contact to discuss your specific form-to-app workflow.

1// Bubble data type: TypeformResponse
2// respondent_name    (text)
3// respondent_email   (text)
4// form_id            (text)
5// response_token     (text)
6// submitted_at       (date)
7// raw_interest       (text)  [or your specific question fields]
8// notes              (text)
9// synced_via         (text)  ["webhook" or "api"]
10
11// Repeating Group data source:
12// Search for TypeformResponses
13// Sort: submitted_at descending
14// Constraints: [add search/date filters here]
15
16// Deduplication check in bulk sync workflow:
17// Condition: Do a search for TypeformResponses
18//   constraint: response_token = current API result's token
19//   :count = 0
20// Then: Create a new TypeformResponse