Typeform

Log in to your Typeform account and navigate to your account avatar in the top-right corner, then click Account → Personal tokens. Click Generate a new token, give it a descriptive name like 'FlutterFlow App', and copy the token immediately — Typeform only shows it once. Store it somewhere safe such as a password manager or your Firebase project's Secret Manager; you will add it to an environment variable in the next step, not to FlutterFlow itself. While you are in Typeform, open the form you want to connect and look at the URL in your browser's address bar. The alphanumeric string after `/to/` or in the admin URL path is your Form ID — for example, `abc12345`. Copy this as well. You will also need the form's share link (Share → Get the link) for the WebView embed path. Keep both the token and the Form ID in your notes but remember: the token stays on the server, the Form ID can go into FlutterFlow's App Values as a constant since it is not a secret. At this point you have everything Typeform-side that you need. The Personal Access Token grants full read and write access to every form on your account, which is exactly why it cannot be placed anywhere inside the compiled Flutter app. Even if you only intend to use it for read operations, a leaked write-capable token is a serious security risk.

The quickest way to let users fill out a Typeform inside your FlutterFlow app is a WebView. In FlutterFlow's left navigation panel click Custom Code, then click the + Add button and select Widget. Name it TypeformEmbed. In the Dependencies field add the package `webview_flutter` (use the latest stable version listed on pub.dev — FlutterFlow resolves the version for you when you enter the package name). In the widget's Dart code area paste a simple WebView widget that loads your form's public share URL. After saving the custom widget, navigate to your page in the FlutterFlow canvas, click the + Add Widget button, search for TypeformEmbed under Custom Widgets, and drag it onto the page. Set its width to the full page width and its height to fill the remaining space. In the widget's properties panel you can expose the form URL as a parameter so you can change forms without editing code. Important platform notes: the WebView widget does not run in FlutterFlow's browser-based Test Mode (Run Mode in the top-right). You must test the embed on a real iOS or Android device, or by using FlutterFlow's Local Run feature. On the web build, the WebView renders inside an iframe, which Typeform generally supports, but you may need to ensure your Typeform plan allows iframe embedding. Once a user completes the form, Typeform's own confirmation screen appears inside the WebView — you cannot intercept the completion event directly in Flutter without additional JavaScript bridge code.

1import 'package:flutter/material.dart';
2import 'package:webview_flutter/webview_flutter.dart';
3
4class TypeformEmbed extends StatefulWidget {
5  const TypeformEmbed({
6    super.key,
7    this.width,
8    this.height,
9    required this.formUrl,
10  });
11
12  final double? width;
13  final double? height;
14  final String formUrl;
15
16  @override
17  State<TypeformEmbed> createState() => _TypeformEmbedState();
18}
19
20class _TypeformEmbedState extends State<TypeformEmbed> {
21  late final WebViewController _controller;
22
23  @override
24  void initState() {
25    super.initState();
26    _controller = WebViewController()
27      ..setJavaScriptMode(JavaScriptMode.unrestricted)
28      ..loadRequest(Uri.parse(widget.formUrl));
29  }
30
31  @override
32  Widget build(BuildContext context) {
33    return SizedBox(
34      width: widget.width,
35      height: widget.height,
36      child: WebViewWidget(controller: _controller),
37    );
38  }
39}

Because the Typeform Personal Access Token must not be placed in FlutterFlow, you need a thin server-side proxy. In the Firebase console, go to your project and open the Cloud Functions section. You'll write and deploy a simple Node.js function that receives a form ID from your FlutterFlow app and returns the responses from Typeform's API, injecting the secret Bearer token on the server side. In the Firebase Functions dashboard (or locally using the Firebase CLI if you prefer), create a new HTTP-triggered function. The function reads the `TYPEFORM_TOKEN` from Firebase's environment config or Secret Manager — never hardcode it in the source file. It then makes a GET request to `https://api.typeform.com/forms/{form_id}/responses` with the Authorization header set to `Bearer {token}`, and returns the JSON body to the caller. Your FlutterFlow API Call will call this function's HTTPS URL, not the Typeform API directly. Note that Typeform's Responses API returns a JSON object with an `items` array. Each item represents one submission and contains an `answers` array. Each answer has a `field` object (with a `ref` and `type`) and a value field that varies by question type — for example, `choice.label` for multiple-choice questions, `text` for short text, and `email` for email fields. This heterogeneous structure means you need to plan your JSON Path bindings carefully in the FlutterFlow response mapping step. Start by testing the Cloud Function with a direct browser or Postman call to see the actual JSON shape from your specific form before configuring paths in FlutterFlow.

1const functions = require('firebase-functions');
2const admin = require('firebase-admin');
3const https = require('https');
4
5admin.initializeApp();
6
7exports.typeformProxy = functions.https.onRequest(async (req, res) => {
8  // Allow CORS for web builds
9  res.set('Access-Control-Allow-Origin', '*');
10  if (req.method === 'OPTIONS') {
11    res.set('Access-Control-Allow-Methods', 'GET, POST');
12    res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
13    return res.status(204).send('');
14  }
15
16  const TYPEFORM_TOKEN = process.env.TYPEFORM_TOKEN
17    || functions.config().typeform?.token;
18
19  if (!TYPEFORM_TOKEN) {
20    return res.status(500).json({ error: 'Typeform token not configured' });
21  }
22
23  const formId = req.query.form_id || req.body.form_id;
24  if (!formId) {
25    return res.status(400).json({ error: 'form_id is required' });
26  }
27
28  const pageSize = req.query.page_size || '25';
29
30  try {
31    const response = await fetch(
32      `https://api.typeform.com/forms/${formId}/responses?page_size=${pageSize}`,
33      {
34        headers: {
35          Authorization: `Bearer ${TYPEFORM_TOKEN}`,
36          'Content-Type': 'application/json',
37        },
38      }
39    );
40    const data = await response.json();
41    return res.status(response.status).json(data);
42  } catch (err) {
43    console.error('Typeform proxy error:', err);
44    return res.status(500).json({ error: 'Failed to fetch from Typeform' });
45  }
46});

In FlutterFlow, click API Calls in the left navigation panel and then click the + Add button and select Create API Group. Name the group TypeformProxy. In the Base URL field paste the HTTPS URL of your Cloud Function (found in the Firebase console under Functions — it looks like `https://us-central1-your-project.cloudfunctions.net/typeformProxy`). You do not need to add an Authorization header here because the token is already inside the Cloud Function — this is the security win. With the group created, click + Add inside it to create an API Call. Name it GetResponses. Set the method to GET. In the Endpoint field add nothing extra (the base URL is the full function URL) or append a path if your function handles multiple routes. Navigate to the Variables tab and add a variable named `form_id` with a default value of the Form ID you copied in Step 1. In the URL Parameters section add `form_id` mapped to `{{form_id}}` so it becomes a query parameter. Now click Response & Test. In the Test Variables section set `form_id` to your actual form ID and click Test API Call. If the Cloud Function is deployed correctly you will see the Typeform response JSON appear in the response panel. Click Generate JSON Paths — FlutterFlow will parse the structure and offer you path variables. Look for `$.total_items` (total count), `$.items` (the array of submissions), `$.items[0].answers[0].text` (example text answer), and `$.items[0].submitted_at` (submission timestamp). Select the paths you need and save the API Call. These paths will be available as variables when you bind the API response to widgets on your page.

1{
2  "api_group": "TypeformProxy",
3  "method": "GET",
4  "base_url": "https://us-central1-YOUR_PROJECT.cloudfunctions.net/typeformProxy",
5  "variables": [
6    { "name": "form_id", "type": "String", "default": "YOUR_FORM_ID" },
7    { "name": "page_size", "type": "String", "default": "25" }
8  ],
9  "url_params": {
10    "form_id": "{{form_id}}",
11    "page_size": "{{page_size}}"
12  },
13  "json_paths": [
14    { "name": "totalItems", "path": "$.total_items" },
15    { "name": "items", "path": "$.items" },
16    { "name": "firstAnswer", "path": "$.items[0].answers[0].text" },
17    { "name": "submittedAt", "path": "$.items[0].submitted_at" }
18  ]
19}

Polling the Typeform Responses API on a timer will always feel slightly stale — a user submits the form and your app takes up to 30 seconds to show the result. The proper solution is Typeform's native webhook feature, which POSTs a JSON payload to a URL of your choice within seconds of a submission. Since FlutterFlow cannot receive incoming HTTP requests (it is a client app, not a server), you point the webhook at another Firebase Cloud Function endpoint that writes the submission into Firestore. Your FlutterFlow app then reads Firestore with a real-time listener and updates instantly. In the Firebase console, add a second HTTP-triggered function named `typeformWebhook`. This function receives Typeform's POST payload, extracts the relevant fields from the `form_response` object (the submission timestamp, the answers array, any hidden fields), and writes them to a Firestore collection such as `typeform_responses/{formId}/submissions`. Add a Firestore real-time query in FlutterFlow on the matching collection — set Listen for Changes to true so the ListView updates automatically without the user refreshing. To register the webhook, go back to your Typeform account, open the form, click Connect → Webhooks, and paste your Cloud Function's URL. Enable the webhook and click Deliver a sample payload to test it. Typeform will send a test POST to your function and you should see a new document appear in Firestore within a few seconds. From that point forward, every real submission will trigger the same flow. Note that webhook delivery to the webhook endpoint is a Typeform feature available on paid plans — check your plan's webhook allowance if you are on a free account.

1exports.typeformWebhook = functions.https.onRequest(async (req, res) => {
2  if (req.method !== 'POST') {
3    return res.status(405).send('Method Not Allowed');
4  }
5
6  try {
7    const payload = req.body;
8    const formId = payload.form_response?.form_id;
9    const answers = payload.form_response?.answers || [];
10    const submittedAt = payload.form_response?.submitted_at;
11    const responseId = payload.form_response?.token;
12
13    if (!formId || !responseId) {
14      return res.status(400).json({ error: 'Invalid Typeform payload' });
15    }
16
17    // Flatten answers into a simple key-value map for easy Firestore querying
18    const answerMap = {};
19    answers.forEach((a) => {
20      const key = a.field?.ref || a.field?.id || 'unknown';
21      const value = a.text || a.email || a.number ||
22        a.choice?.label || a.choices?.labels?.join(', ') || '';
23      answerMap[key] = value;
24    });
25
26    await admin.firestore()
27      .collection('typeform_responses')
28      .doc(formId)
29      .collection('submissions')
30      .doc(responseId)
31      .set({
32        submittedAt,
33        answers: answerMap,
34        rawAnswers: answers,
35        createdAt: admin.firestore.FieldValue.serverTimestamp(),
36      });
37
38    return res.status(200).json({ received: true });
39  } catch (err) {
40    console.error('Webhook error:', err);
41    return res.status(500).json({ error: 'Failed to process webhook' });
42  }
43});