How To Send Typeform Responses to Xano

Hey there! In this step-by-step guide, we'll explore how to leverage Xano's no-code platform to build and deploy backend services for your web and mobile applications effortlessly. We'll be working with a handy Typeform integration snippet that streamlines the process of capturing and storing form responses in your Xano database.

Setting up the Typeform Integration Snippet

Let's kick things off by installing the Typeform integration snippet in your Xano instance:

1. Head to the snippet link provided (check the description) and click "Add to your Xano account."
2. Log in to your Xano account and choose the instance where you want to install the snippet.
3. Click "Add to instance" and then navigate to the "Marketplace" section in the left panel of your instance.
4. Locate the "Typeform" snippet and click "Install Snippet" followed by "Install" in the bottom corner.

Configuring Environment Variables

Before we can start using the snippet, we need to set up a couple of environment variables:

1. Go to the "Settings" section and click "Manage" under "Environment Variables."
2. Enter your Xano workspace ID (found in the URL of your current workspace) and save it.
3. Next, we need to generate an access token for the Xano Metadata API, which allows us to programmatically manage content within our instance.

• Click your name in the bottom left corner and select "Account."
• On the right-hand side, click "Manage Access Tokens" under the "Metadata API" section.
• Create a new access token (e.g., "demo-typeform") and copy the token value.

1. Return to the "Settings" section, click "Manage" under "Environment Variables" again, and paste the copied access token.
2. Click "Save" to store your environment variables.

Great! We've now installed the snippet and configured the necessary environment variables. Let's dive into the two API endpoints included in the snippet.

Creating a Table for Typeform Responses

The first endpoint, "Create Typeform Table," automatically generates a table in your Xano database with the appropriate schema to store responses from your Typeform.

1. Navigate to the "API" section and click on the "Typeform" group.
2. Copy the endpoint URL for the "Create Typeform Table" endpoint.
3. In Typeform, go to "Connect" > "Webhooks" and click "Add a Webhook."
4. Paste the copied endpoint URL and click "Save Webhook."
5. Turn on the webhook and fill out a sample submission in your Typeform.

After submitting the sample response, head back to the "Database" tab in Xano, and voilà! You'll find a new table created with the exact schema needed to hold your Typeform responses. The table name corresponds to your form's name, and the field names match the questions in your form.

Processing Typeform Responses

The second endpoint, "Process Answer," serves as a template for processing incoming requests from your Typeform.

1. In the "API" section, navigate to the "Typeform" group and locate the "Process Answer" endpoint.
2. Click the three dots in the top-right corner and choose "Clone."
3. Provide a new name for the cloned endpoint (e.g., the name of your Typeform).
4. Scroll down to the bottom, click the "+" icon, and add a new "Add Record" step under "Database Requests."
5. Select the table created by the previous endpoint and click the magic wand icon to choose the "Record Object" variable.
6. Click "Save" and then "Publish" to apply the changes.
7. Copy the new endpoint URL from the menu at the top.
8. Return to Typeform, go to "Connect" > "Webhooks," and add a new webhook with the copied URL.
9. Save the webhook, turn it on, and remember to turn off the previous webhook used for generating the table.

That's it! Now, whenever you fill out a new submission in your Typeform, the responses will be sent to Xano and stored in the corresponding table.

Understanding the Function Stacks

Let's take a moment to understand how the function stacks work behind the scenes:

Create Typeform Table Endpoint

1. The endpoint starts with the "Get All Input" function, which retrieves the entire input sent to the API.
2. The next step extracts the responses from the input.
3. A variable is created to store data about the different field types from Typeform, allowing dynamic schema generation.
4. Several steps are dedicated to gathering data needed to call the Metadata API (instance URL, Metadata API URL, workspace ID).
5. A starter variable is generated to contain the initial schema for the table.
6. A loop iterates through each field from Typeform, processing them one by one to build the schema.

• The appropriate schema is determined based on the question type.
• Question names are transformed to be valid field names in Xano.
• The final schema for the table is built and checked for empty names.

1. After the loop completes, the API request is sent to the Metadata API with the table name, description, and schema.

Process Answer Endpoint

1. The endpoint starts with the "Get All Input" function.
2. Variables needed for working with the Metadata API are established.
3. The Metadata API is called to retrieve a list of all available tables.
4. The "Array Find First Element" function locates the table corresponding to the form ID sent by Typeform.
5. The Metadata API is called again to get specific data related to the identified table.
6. An empty "Record Object" variable is created to store the answers from Typeform.
7. A loop iterates through the answers, using "Array Find First Element" to find the corresponding table field.
8. Conditional steps handle different answer types (e.g., text, email, phone numbers, dates, multiple-choice, file attachments).
9. For file attachments, the "Create File Resource" and "Create Attachment" steps generate the necessary metadata.
10. After the loop completes, you'll need to add the "Add Record" step to save the response to the table.

That's a wrap! With Xano's no-code platform and the Typeform integration snippet, you can seamlessly capture and store form responses in your database, streamlining the backend development process for your web and mobile applications.

If you have any questions or need further assistance, feel free to leave a comment below, visit the Xano community, or reach out to our support team within the Xano platform. Happy building!