How to automate a webhook using Zapier in the studio

By connecting Tripetto to Zapier you can do all kinds of actions with your response data, like pushing it to a spreadsheet editor (Microsoft Excel/Google Sheets) or a database, or trigger other follow-up actions.

The goal

In this article, we will show an example covering how to create a new row in a Google Sheets document for each new response that's entered in your Tripetto form. We will set up the Zapier connection and link the available fields in the Tripetto form to the corresponding columns in the Google Sheets document. In the end, we will get a Google Sheets document that's filled automatically with all response data.

Sidenote

We admit the procedure we describe in this article is most probably not the most ideal setup yet. We are aware the connection with Zapier can be simplified, but for now this is the best method to get the job done. And we promise: it's still no rocket science.

If you have any troubles implementing the described solution, don't hesitate to contact us. Using the chat will be the fastest and easiest way to do so. We're happy to help you!

Webhooks by Zapier

The method we're going to use is the 'Webhook by Zapier'. You can find all details on that with the link below.

Create a new Zap

Zapier works with Zaps. Inside a Zap you can specify what data is coming in and how you want to process that data.

So the first step is to create a new Zap. In Zapier, click Make a Zap!.

Step 1 - Receive data in your Zap

After creating the Zap, you'll immediately see the first block called When this happens .... This is where we are going to collect the responses from Tripetto.

Choose App

In the search bar search for Webhooks by Zapier and click the corresponding app button in the search results. The webhook app will be added to your Zap.

Choose Trigger Event

Next step, select the trigger that receives new responses. From the dropdown, select Catch Raw Hook.

The settings of the Webhook block.

Click Continue.

Set Up Webhook

Zapier will now show the webhook URL, which you must use in the Tripetto Studio. So, copy the webhook URL and switch to the studio of Tripetto. At the top menu bar of the form builder click Automate. The Automate pane will show up on the right side of the form builder.

The third feature of this screen is Webhook. After enabling the feature Notify an external service when someone completes your form you can paste the webhook URL you got from your new Zapier Zap.

Copy-paste the webhook URL to the studio (of course including your Zap's id's).

After you pasted the webhook URL, switch back to Zapier and click Continue.

Test webhook

Next up, Zapier wants to test if the Zap is receiving data. To test this, we're going to submit a test response in our Tripetto form.

First let Zapier know you're going to submit some test data, by clicking Test & Review. Zapier now enables your Zap temporarily to receive data.

Now, switch back to the Tripetto Studio and submit an entry to your Tripetto form. The quickest way to do so, is by using the shareable link and just complete your form once.

It's recommended to enter some proper test data inside your test response, by which you can recognize each field in your form later on.

After you completed your form, return to Zapier and you will see Zapier has found some data. This means the connection between your Tripetto form and Zapier works! When you click on the response, you'll see the raw_body is filled with some codes, but more importantly you also will recognize your test data.

Zapier has received some test data with a filled raw_body.

Finally click Done Editing to proceed to the next step.

Step 2 - Make your data useable

Now comes the part the might be a bit complicated, because we have to manipulate the response data a bit before we can use it the way we want in Zapier. But no worries, we'll help you through.

Add a code block

Zapier already created a second block, called Do this .... Click Edit to fill in this block the way we want.

Choose App

In this step we want to add a code block, so search for the app Code by Zapier and click the corresponding app button in the search results.

Choose Action Event

Next step, select the action. From the dropdown, select Run Javascript.

The settings of the Code block.

Click Continue.

Insert code

We're now going to add a bit of code to make the response data readable for Zapier. Don't be scared, just follow these steps.

First we see the Input Data. This determines what data should be used inside the code we're going to add. This containes two fields:

  • In the first field enter: tripettoResult;
  • In the second field click the icon on the right and select Raw Body.

Now we're going to add the code that needs to be executed. Just copy-paste the below code into the Code field in Zapier:

output = {};

var input = inputData.tripettoResult;

if (input.indexOf("\"") === 0) {
  input = JSON.parse(`{"data":${input}}`).data;
}

var tripettoFields = JSON.parse(input).fields;

for (var nField = 0; nField < tripettoFields.length; nField ++) {
   output["tripettoField" + nField] = tripettoFields[nField].string;
}
The result of the script settings.

Click Continue.

Test code

Zapier will now show a summary of your code block and you can test it by clicking Test & Review. This will result in Zapier showing the test data you entered in your test response, with each question labeled with tripettoField{number}.

The result of the test of the script.

Step 3 - Create Spreadsheet Row in Google Sheets

The last step is to use the data from the Tripetto form, in this case use it to create a new row in a Google Sheet. To do so, click the icon beneath the Code block. This will create a third step in your Zap.

Choose App

In this step we want to add a Google Sheets block, so search for the app Google Sheets and click the corresponding app button in the search results.

Choose Action Event

Next step, select the action. As we want to create a new row for each response, select Create Spreadsheet Row from the dropdown.

The settings of the Google Sheets block.

Click Continue.

Choose Account

You now can link your Google Drive where your designated Google Sheet is/will be located. By connecting your Google account, you give Zapier the necessary access.

After selecting your Google account, click Continue.

Prepare a Google Sheet

To make the next step a bit easier, it is recommended you first create a Google Sheet that you want to write the data to. So go to your Google Drive, create a Google Sheet and ideally also prepare the column headers you want to use in your sheet.

After you've prepared your target file, return to Zapier.

Select target file

Now select the file you just created, so Zapier will know where to write to. It consists of three settings:

  • Drive - Select the right drive if your Google account has multiple drives in it;
  • Spreadsheet - Select the file you want to write to;
  • Worksheet - Select the worksheet inside the selected file where you want to write to (in most cases you only have one worksheet).

Link data to columns

Now the real magic comes in. Zapier will now show the column headers you previously added to your selected Google Sheets file. Now you can link those column headers to the data Zapier receives in the webhook from the Tripetto form.

For each column click the icon on the right. Over there you can select the desired data. We want to use data from step 2 of our Zap (Run Javascript), so we collapse that group and then select the desired tripettoField{number}. Zapier will also show the test data that's inside that field, so you can easily recognize each Tripetto field and link it to the corresponding column in your Google Sheet.

Repeat this for every column you want to fill with response data.

The settings of the Google Sheets file.

Click Continue.

Test sending data

Lastly Zapier will test if it's able to send the data correctly to the Google Sheet and the right columns. You'll see an overview of that test and you can click Test & Review.

The result of the test of the data.

Click Done Editing.

Enable your Zap

The setup of your Zap is now done, but your Zap is still in test mode. To really let the Zap receive response data, you'll need to enable it. Use the big switch at the right top corner to switch if from Off to On.

If this is your first Zap, you might need to confirm your Zapier account, by following the confirmation steps Zapier provides.

And that's it! Every response you get on your Tripetto form will now be converted into a new spreadsheet row automatically!

Discover the possibilities!

In this article, we showed an example of how to create a new spreadsheet row, but Zapier has lots of integrations you can use. Take a look at their apps overview what other integrations you can use. Just make sure you configure the first two steps as described in this article and then integrate it with the app you want.

Use these helplines if you have any questions, problems or requests