Note: Using third-party tools
This article includes features and steps that involve third-party tools. Based on our Studio.Design Support Policy, questions about specifications or behavior outside the steps described in this article may not be covered by our chat support.
Data sent through third-party integrations is managed according to the terms of those tools. Studio.Design is not responsible for the protection of data within third-party tools. Please review and agree to the terms of the connected tool before using external integrations.
If the spreadsheet's sharing permissions or Google account information changes, data submissions may stop. If this happens, disconnect the integration and reconnect it.
If you'd like to set this up through a GUI instead of using Google Apps Script, see How to integrate with Zapier.
Before you start
Create a form in Studio.Design
Follow this help article to create a form.
In this article, we'll set things up using a form that includes the fields shown below.
Create a Slack Incoming Webhook
Follow Slack's official documentation to get your Incoming Webhook URL.
Set up your Spreadsheet
Connect your Studio.Design form responses to a spreadsheet.
Follow the steps in this article and set up the integration from your form's settings menu.
Set up Google Apps Script
Create the script
Open the connected spreadsheet and go to Tools → Script Editor to open the script editor.
Once you're in the script editor, write your code in the editor area. You can call external APIs from Google Apps Script using the UrlFetchApp.fetch method. Below is sample code that sends JSON as a request payload to Slack's webhook API.
function sendToSlackSample(e) {
// Only respond to row insertion events
if (e.changeType != "INSERT_ROW") {
return;
}
// Open the active Google Spreadsheet
const sheet = SpreadsheetApp.getActiveSheet();
// Get the row number of the newly added row
const lastRow = sheet.getLastRow();
// Build the message content
const text = "Name:: " + sheet.getRange(lastRow,1).getValue() + "\n"
+ "Email:: " + sheet.getRange(lastRow,2).getValue() + "\n"
+ "Message:: " + sheet.getRange(lastRow,3).getValue();
// Set the parameters to send to the Slack API
const data = {
'channel': '<slack channel name>',
'icon_url': '<slack icon path>',
'text': text,
'link_names': 1,
'username': '<slack user name>'
};
const options = {
'method': 'post',
'contentType': 'application/json',
'payload': JSON.stringify(data)
};
// Call the Slack API
const response = UrlFetchApp.fetch('<slack webhook api endpoint>', options);
}
The following fields are set in the options argument passed as the second parameter to fetch:
method: HTTP method
contentType: Set to
application/jsonpayload: Send the request payload as JSON
For details on Slack's API parameters, see the official documentation.
Once you've entered the code, it should look like this:
Set up a trigger
To set up a trigger for the script you created, go to Edit → Current project's triggers.
You'll see a screen like the one below. Click + Add Trigger in the bottom right to create a new trigger.
In the trigger creation screen, select the following and click Save:
Function to run: sendToSlackSmaple
Deployment to run: Head
Event source: From spreadsheet
Event type: On change
After clicking Save, you'll be taken to a Google authentication screen. Sign in with the same account you used to connect the spreadsheet in Studio.Design. If you see a warning like the one shown below, click Advanced, then click Go to <your script project name>.
That's it for setting up the trigger.
When someone submits the form, you'll receive a notification in Slack like the one below.
Try submitting the form on your live site or in Live Preview to confirm everything works.
This article used Slack as an example, but you can call any API by changing the API URL and request parameters.
Try extending the sample code to connect with your favorite API!