Send Typeform - form submission contact info to Google Sheets via Webhook
In this example, we will create a workflow that stores the contact information to Google Sheets when a new contact submission is filled in Typeform, this will be done via Webhook.
When the contacts start filling their information in the submission form, you usually download the responses from your Typeform in the form of a .SCV or a .XLSV file and upload them to a spreadsheet, in most cases, Google Sheets.
Going through all that effort of manually downloading the responses every time you get them and exporting them to Google Sheets, It can take seemingly forever.
You have Easyflow to help you win back that time and those opportunities.
Using the Webhook connector will allows to receive the contact information of anyone who filled the form submission in real time. Having information in real time is important to any business.
At the end of this scenario, every submission in your Typeform account should be added into Google Sheets, as shown in the following screenshots:
The scenario workflow consists of the following steps:
Create a workflow
Add Webhook connector
Add Webhook URL into Typeform - form submission
Prepare data in a Mapper connector
Insert rows into Google Sheets
Run the workflow by using Typeform - form submission
Login to Easyflow portal,
Navigate to plus button from the top menu, choose the Start New Flow
Give it a title then save
To receive the Typeform - form submission data, will use the Webhook built-in connector.
In the left menu, search for Webhook connector, drag it into designer
Click on the Webhook connector,
From the right menu, click on Webhook URL operation under CONFIGURE EVENT section to copy the Webhook URL
Rename the connector if needed, by clicking on pencil icon on top right menu
Click Apply#
Since this Connector is the first one in the workflow, It should be the Starting point of the process, this will be done by right click on the connector then choose Set as starting point, It will be highlighted with green color.
Go to your Typeform, click on the form you already prepared
In top menu, Navigate to connect --> WEBHOOKS
Click on Add a webhook, paste the copied Webhook URL from Easyflow workflow - Webhook URL
Click on Save webhook
Switch the Webhook toggle to Webhook ON
Now, we will send test data from this webhook to Easyflow, click on View deliveries then click on Send test request.
Go to Easyflow workflow, click on Real Time from the bottom menu, the data displays under the bottom menu.
In the left menu, search for Mapper connector, drag it into designer
Click on the Mapper connector, click on pencil icon in the top right panel, rename it to suitable name like Map data
Click on the 4 dots icon next to Mapping items
Determine the JSON fields you want to send to Google Sheets from Webhook result, For example I will choose: date, firstname, lastname & email
Type the JSON schema in the Mapper connector --> Mapping item field, Example:
Map the keys value from Webhook schema
For date: simply select <MAP_DATE> then pick submitted_at from the webhook schema.
For firstname, lastname & date:
These values iterates inside an array of objects which answers [ ], and each object has a specific position in this array.
To read each value, we should use the get function.
To know more about get function please visit, this link
Select <MAP_FIRSTNAME>
Pick the get function from Dynamic Content & Expressions right panel --> General Functions tab .
Pick answers[ ] from the webhook schema (Schema & Fields tab).
Specify the object position in an array which is 0, then specify the field name which is text.
Do the same steps for <MAP_LASTNAME> & <MAP_EMAIL>
Click Apply#
Now, we will send test data from this webhook to Easyflow, Go to Typeform webhook page, click on View deliveries then click on Send test request.
Go to Easyflow workflow, click on Real Time from the bottom menu, the data displays under the bottom menu.
As you can see below, the data mapped into the Mapper connector.
Search for Google sheets connector, drag it into designer, and select Add a Row function
Add a connection for your Google Sheets Account
Rename the connector if needed, by clicking on pencil icon on top right menu
Pick the Spreadsheet, by clicking on folder icon next to Spreadsheet ID, choose from right menu
Pick the Sheet, by clicking on folder icon next to Range, choose from right menu
In the Data field, is the place to add the payload data for Google Sheets, here we use toDic text function, then click Apply
The text function name toDic converts string to to a list or Dictionary. To know more about Function expressions, please click here. Also you can watch the video here
Go to your Typeform - form
Copy the link and paste it in new browser tab
Fill the contact info then submit
As you can see below, The data added into Google Sheets successfully.
Background
When the contacts start filling their information in the submission form, you usually download the responses from your Typeform in the form of a .SCV or a .XLSV file and upload them to a spreadsheet, in most cases, Google Sheets.
Going through all that effort of manually downloading the responses every time you get them and exporting them to Google Sheets, It can take seemingly forever.
You have Easyflow to help you win back that time and those opportunities.
Using the Webhook connector will allows to receive the contact information of anyone who filled the form submission in real time. Having information in real time is important to any business.
At the end of this scenario, every submission in your Typeform account should be added into Google Sheets, as shown in the following screenshots:
Overview
The scenario workflow consists of the following steps:
Create a workflow
Add Webhook connector
Add Webhook URL into Typeform - form submission
Prepare data in a Mapper connector
Insert rows into Google Sheets
Run the workflow by using Typeform - form submission
Create a workflow
Login to Easyflow portal,
Navigate to plus button from the top menu, choose the Start New Flow
Give it a title then save
Add Webhook connector
To receive the Typeform - form submission data, will use the Webhook built-in connector.
In the left menu, search for Webhook connector, drag it into designer
Click on the Webhook connector,
From the right menu, click on Webhook URL operation under CONFIGURE EVENT section to copy the Webhook URL
Rename the connector if needed, by clicking on pencil icon on top right menu
Click Apply#
Since this Connector is the first one in the workflow, It should be the Starting point of the process, this will be done by right click on the connector then choose Set as starting point, It will be highlighted with green color.
Add Webhook URL into Typeform - form submission
Go to your Typeform, click on the form you already prepared
In top menu, Navigate to connect --> WEBHOOKS
Click on Add a webhook, paste the copied Webhook URL from Easyflow workflow - Webhook URL
Click on Save webhook
Switch the Webhook toggle to Webhook ON
Now, we will send test data from this webhook to Easyflow, click on View deliveries then click on Send test request.
Go to Easyflow workflow, click on Real Time from the bottom menu, the data displays under the bottom menu.
Prepare data in a Mapper connector
In the left menu, search for Mapper connector, drag it into designer
Click on the Mapper connector, click on pencil icon in the top right panel, rename it to suitable name like Map data
Click on the 4 dots icon next to Mapping items
Determine the JSON fields you want to send to Google Sheets from Webhook result, For example I will choose: date, firstname, lastname & email
Type the JSON schema in the Mapper connector --> Mapping item field, Example:
['<MAP_DATE>', '<MAP_FIRSTNAME>', '<MAP_LASTNAME>', '<MAP_EMAIL>']Map the keys value from Webhook schema
For date: simply select <MAP_DATE> then pick submitted_at from the webhook schema.
For firstname, lastname & date:
These values iterates inside an array of objects which answers [ ], and each object has a specific position in this array.
To read each value, we should use the get function.
To know more about get function please visit, this link
Select <MAP_FIRSTNAME>
Pick the get function from Dynamic Content & Expressions right panel --> General Functions tab .
Pick answers[ ] from the webhook schema (Schema & Fields tab).
Specify the object position in an array which is 0, then specify the field name which is text.
Do the same steps for <MAP_LASTNAME> & <MAP_EMAIL>
Click Apply#
Now, we will send test data from this webhook to Easyflow, Go to Typeform webhook page, click on View deliveries then click on Send test request.
Go to Easyflow workflow, click on Real Time from the bottom menu, the data displays under the bottom menu.
As you can see below, the data mapped into the Mapper connector.
Insert rows into Google Sheets
Search for Google sheets connector, drag it into designer, and select Add a Row function
Add a connection for your Google Sheets Account
Rename the connector if needed, by clicking on pencil icon on top right menu
Pick the Spreadsheet, by clicking on folder icon next to Spreadsheet ID, choose from right menu
Pick the Sheet, by clicking on folder icon next to Range, choose from right menu
In the Data field, is the place to add the payload data for Google Sheets, here we use toDic text function, then click Apply
The text function name toDic converts string to to a list or Dictionary. To know more about Function expressions, please click here. Also you can watch the video here
Run the workflow by using Typeform - form submission
Go to your Typeform - form
Copy the link and paste it in new browser tab
Fill the contact info then submit
As you can see below, The data added into Google Sheets successfully.
Updated on: 06/10/2022
Thank you!