HOW TO add values from submitted form to Google Sheets via IFTTT Maker Service

IFTTT or If This Then That is a free web based service that allows you to connect to cloud services and Internet-enabled devices to create useful automated actions without writing any code. When IFTTT launched in 2010, Applets were called Recipes. Following the popularity of IFTTT, there have been other Integration platforms as a Service (IPaaS) like Zapier and Azure Logic Apps.

IFTTT  Applets can help your apps and devices work together to do specific things they couldn't do otherwise. For example, an applet may send an e-mail message if a user tweets using a hashtag, or copy a photo on Facebook to a user's archive if someone tags a user in a photo.

IFTTT can let you integrate other services with your DIY projects. You can create Applets that work with any app that can make or receive a web request.

For a hobby project, I figured a way to submit values from a form on my static website to Google Sheets via IFTTT Maker Service. Rather than store the values in a database, it will add them as a row to the end of a Google Sheet.

To generalize the scenario, lets say we have a form that captures Movie ratings.

Here are the steps -

After you've logged into IFTTT, click Create to start building a new custom Applet or use the direct URL - https://ifttt.com/create to configure the workflow using its wizard style builder.

For the "If This" part, search for the service "Webhooks". The Webhooks service allows you to integrate other services on IFTTT with your DIY projects via simple web requests.

The form submit event from a custom web page will be the "trigger" to the Maker Service to execute the action to add a the form field values as a row to the end of a Google Sheet

A trigger field we choose is the glue that will connect the form & Google Sheets -

I've chosen the Event Name "add" and we will see in the forthcoming steps how this fits into the equation.

Next, we let IFTTT know that we want our Webhook to connect with Google Sheets

There are two actions possible with Google Sheets. We declare in the next step that we want to "Add 

row to spreadsheet"


We can provide a custom spreadsheet name & Google Drive folder path, but we can stick with the default values to keep things simple. Click on Create Action to move to the last step of setup - "Review and finish"

Click on the Finish button to start putting this Applet into action

Let's now look at how to link the Webhook with the form on our custom web page. Every IFTTT user gets their own WebHook key. You can find yours by going to this URL after you're signed in - https://ifttt.com/services/maker_webhooks/settings

This page shows an URL like https://maker.ifttt.com/use/xyz

The part of the URL shown as xyz will actually show the unique key for your IFTTT account

Copy that URL including the key. The page that opens will show your unique webhook address with a note like -

To trigger an Event

Make a POST or GET web request to:

https://maker.ifttt.com/trigger/{event}/with/key/xyz

Take note of the address, as this is what we will be targeting through the form on our custom web page. Note that webhook URL should be kept a secret otherwise anyone can use the URL to launch your IFTTT applet.

The HTML code for the form & the event trigger is shown below -

In line 18 of the embedded HTML code sample, replace the key in the Webhook URL with your own - https://maker.ifttt.com/trigger/add/with/key/xyz

Notice that I provided "add" as the event name, the same keyword that was used while creating the Applet.

Fill in some values in the form, within seconds of submitting the form, you'll see the message "Congratulations! You've fired the add event" emitted by IFTTT  if all goes well.

Open Google Drive and check for the new sheet under the new folders IFTTT & MakerWebhooks that have been created.

The first two columns are values added by IFTTT showing the date & time when the record was added and the name of the event that triggered the action as that is what we had declared in step 5 of the applet -

{{OccurredAt}} ||| {{EventName}} ||| {{Value1}} |||{{Value2}} ||| {{Value3}}