Typeform API troubles

TypeForm API Requirements

Our build uses TypeForm forms to collect information from respondents. That information needs to be collected (either from the Response API or through the webhooks) and saved within our build as outlined below.

For each individual respondent’s submission, the payload contains two lists, questions
and answers.

Both lists need to be saved to the database and tied to the form submission id, as the questions can change over time and the answers need to be able to be matched with the historical question they were paired with.

To summarize, each respondent’s form submission needs to be saved with one form submission id (and associated info like date/time) and two lists of arbitrary length, the first containing the list of questions and the second containing the list of answers. The data needs to be able to be compared based on all answers (across all respondents) per individual question id.

Where we’re running into trouble

What we’ve been able to do is get Bubble to save the data in the first part of the payload correctly using a Workload API endpoint that the TypeForm webhook is pointed to, but struggle to get Bubble to save the individual items in the two lists.

Any ideas on what we could be doing wrong?

Can you show the API’s answer (how you received endpoint data) and how both lists are processed?

1 Like

Hi @JohnMark

Both lists are not processed. We can get the Typeform webhook payload delivered to bubble but can’t get the bubble workflow api to properly save the data.

Here’s the test payload itself.

{
“event_id”: “01DECV8SDSHY3R0W9HPX5R3RX1”,
“event_type”: “form_response”,
“form_response”: {
“form_id”: “atZjaw”,
“token”: “01DECV8SDSHY3R0W9HPX5R3RX1”,
“landed_at”: “2019-06-27T16:11:05Z”,
“submitted_at”: “2019-06-27T16:11:05Z”,
“definition”: {
“id”: “atZjaw”,
“title”: “Bubble Test”,
“fields”: [
{
“id”: “JaM7Pyd4NaAM”,
“title”: “How old are you?”,
“type”: “number”,
“ref”: “589e79a4-5f93-4fcf-9f96-686a2e36d0e7”,
“properties”: {}
},
{
“id”: “VFkIonKmeCMs”,
“title”: “How many cars have you owned?”,
“type”: “number”,
“ref”: “7c850c0d-559d-465a-8702-0c6906795c17”,
“properties”: {}
},
{
“id”: “zXo5PXOuXyyl”,
“title”: “How much money do you have in the bank?”,
“type”: “number”,
“ref”: “9f0efa57-7154-4c2c-ab63-b958f7eb4280”,
“properties”: {}
},
{
“id”: “Famyl8ZTVTIl”,
“title”: “How much money do you have in pennies?”,
“type”: “number”,
“ref”: “91f7fd8e-51a1-4ebd-8569-1e19791e5598”,
“properties”: {}
},
{
“id”: “JGTUwtYneatG”,
“title”: “How much money do you have in nickels?”,
“type”: “number”,
“ref”: “5272deed-23e1-4b0a-90ff-386e4111599f”,
“properties”: {}
},
{
“id”: “OhDKTo7kM1PU”,
“title”: “How much money do you have in dimes?”,
“type”: “number”,
“ref”: “79622b01-5172-47a4-a6d8-421bb5e0c7d9”,
“properties”: {}
}
]
},
“answers”: [
{
“type”: “number”,
“number”: 42,
“field”: {
“id”: “JaM7Pyd4NaAM”,
“type”: “number”,
“ref”: “589e79a4-5f93-4fcf-9f96-686a2e36d0e7”
}
},
{
“type”: “number”,
“number”: 42,
“field”: {
“id”: “VFkIonKmeCMs”,
“type”: “number”,
“ref”: “7c850c0d-559d-465a-8702-0c6906795c17”
}
},
{
“type”: “number”,
“number”: 42,
“field”: {
“id”: “zXo5PXOuXyyl”,
“type”: “number”,
“ref”: “9f0efa57-7154-4c2c-ab63-b958f7eb4280”
}
},
{
“type”: “number”,
“number”: 42,
“field”: {
“id”: “Famyl8ZTVTIl”,
“type”: “number”,
“ref”: “91f7fd8e-51a1-4ebd-8569-1e19791e5598”
}
},
{
“type”: “number”,
“number”: 42,
“field”: {
“id”: “JGTUwtYneatG”,
“type”: “number”,
“ref”: “5272deed-23e1-4b0a-90ff-386e4111599f”
}
},
{
“type”: “number”,
“number”: 42,
“field”: {
“id”: “OhDKTo7kM1PU”,
“type”: “number”,
“ref”: “79622b01-5172-47a4-a6d8-421bb5e0c7d9”
}
}
]
}
}

Hi @anthony2

  • You probably found the answer here
  • and some plugins:

  • Have you tried the Detect Request Data? and then choose a list of things?

1 Like

Hi @johnMark

We did try detect request data and it did identify the data types correctly but that’s not the issue we’ve been running into. Still doesn’t save the data and we couldn’t get the system set up to save it.

We did however notice in your post there is a second Typeform API but the documentation in the plugin just points to developer.typeform.com and we have no idea how its supposed to be used.

Hi @anthony2

What you trying to accomplish is to use https://developer.typeform.com/webhooks/

Run from Bubble your endpoint with Detect Data. It open the Detecting Request Data window. You see INITIALIZE, you have to remove it later from Typeform webhook.


Create inside Typeform a webhook with your Bubble link. You have to setup INITIALIZE the first time, and remove it from here after.


Webhook from Typeform.


Then send request from Typeform (test one), and Bubble window will appeared. Choose the fields you need. Here I took only the essiential to see if it is working.



The test is working.

3 Likes

That got it @JohnMark – You’re a lifesaver. Thanks so much!

1 Like

@anthony2 You’re welcome.

can anyone think of a way to link typeform results back to a specific user in bubble (for a typeform embedded in a bubble page)? the goal would be to use typeform as an easy way for a user to input data to an app (as alternative to build my own forms…)

this is a very good question that I’ve battled with.
The optimal thing to do (imo) would be to connect a backend workflow as John has above, and have your typeform fire into your Bubble database as soon as the user submits. What I can’t currently do is have that backend workflow update an existing user/ update the current user (maybe someone can help with this).

The only workaround that I have right now is to:

  • Connect Airtable to your typeform (using Zapier)
    this gives you your typeform data clearly in a table.

  • Connect your Airtable to your Bubble using Bubble’s new API integration
    (make sure you select ‘Grid view’ in the API setup in Bubble)

  • Set up a standard workflow that pulls through the specific airtable data to the specific field for a ‘current user’ when the user presses a button.

Hopefully that helps for now!

Hey @JohnMark, thanks for your instructions on initialization. The test worked.

I removed the /initialize and the error is a 401 error asking me to authenticate

How do i go about doing that?

Thanks!

Please,
I want to know where can I find my API

Hey there @valentin2,

Welcome to the Bubble community!

Which API are you talking about? Finding your Bubble API for the Typeform API?