Google Form make POST request on submission

Question

Is there a way to call an external API Endpoint on Google Forms every time the form is filled out?

Answer 1

This is pretty straightforward with Google Apps Scripts.

Just create a new project bound to your spreadsheet and create 2 elements:

• A function that will contain all relevant data to make the call (see docs for making a HTTP request from Google Apps Script)
• A trigger linked to the spreadsheet. You can set it to run each time an edit occurs or form is submitted

Voilà, your sheet will call whatever endpoint you wish on submission. You can even parse the spreadsheet to return that data to your endpoint

Answer 2

First: you'll need to set up your App script project and you'll do that by:

Visit script.google.com to open the script editor. (You'll need to be signed in to your Google account.) If this is the first time you've been to script.google.com, you'll be redirected to a page that introduces Apps Script. Click Start Scripting to proceed to the script editor. A welcome screen will ask what kind of script you want to create. Click Blank Project or Close. Delete any code in the script editor and paste in the code below. This video and the doc will help

Second you'll need to create an installable trigger, you can add it to the form directly or to the spreadsheet that has the responses

function setUpTrigger(){
  ScriptApp.newTrigger('sendPostRequest') /* this has the name of the function that will have the post request */
  .forForm('formkey') // you'll find it in the url
  .onFormSubmit()
  .create();
}

Check the doc

Third create the sendPostRequest function and add the UrlFetchApp to it

function sendPostRequest(e){
 // Make a POST request with form data.
var resumeBlob = Utilities.newBlob('Hire me!', 'text/plain', 'resume.txt');
var formData = {
  'name': 'Bob Smith',
  'email': 'bob@example.com',
  'resume': resumeBlob
};
// Because payload is a JavaScript object, it is interpreted as
// as form data. (No need to specify contentType; it automatically
// defaults to either 'application/x-www-form-urlencoded'
// or 'multipart/form-data')
var options = {
  'method' : 'post',
  'payload' : formData
};
  
UrlFetchApp.fetch('https://httpbin.org/post', options);
}

Check the doc

Answer 3

Try something like this in your app script:

var POST_URL = "enter your webhook URL";
function onSubmit(e) {
    var form = FormApp.getActiveForm();
    var allResponses = form.getResponses();
    var latestResponse = allResponses[allResponses.length - 1];
    var response = latestResponse.getItemResponses();
    var payload = {};
    for (var i = 0; i < response.length; i++) {
        var question = response[i].getItem().getTitle();
        var answer = response[i].getResponse();
        payload[question] = answer;
    }
  
    var options = {
        "method": "post",
        "contentType": "application/json",
        "payload": JSON.stringify(payload)
    };
UrlFetchApp.fetch(POST_URL, options);
};

Be sure to replace the POST_URL variable with your webhook, you can use requestcatcher.com to test this out.

Add a trigger to the script by clicking "Triggers" in the side menu

1. Open the menu (top-right dots)
2. Click in Script Editor
3. Paste the above code (changing the POST_URL)
4. Click in the clock icon (left-side menu), which means Triggers.
5. On the right-bottom corner, click in the blue Add trigger button (a form will show as the image below).
6. It should show onSubmit under Choose which function to run.
7. Make sure Select event type is set as On form submit.
8. Click Save button.

After that, submit your form and watch for the request to come in.