Typeform.com is a fantastic new survey service. We had previously been using some old style services. However they looked as though they were from the 00’s. Typeform is beautiful, and has a reasonably priced pro plan as well. An area where other online form tools have fallen short is always the mobile experience. Typeform has nailed this as well. One thing I love about Typeform surveys is on a desktop platform, you can fill our a survey in second if you use the keyboard shortcuts. (I admit, only power-users will get as much of a kick out of this as I did).
For this example, I’ve created the simplest of simple forms.
The form creation tool
Filling out the form (from the user perspective)
The one thing Typeform is missing, which I miss from services like Wufoo.com, are Webhooks. I’ve so far experimented with two methods to pull my data into Parse.com, one is via manual API queries, and the other is with using Zapier.
Manual Pull
We want to retrieve the results which are stored in Typeform. For my simple 2 question form, (one text field, one numerical field), the results viewed in the Typeform browser look like this:
From the Typeform.com docs, we see the way to pull from the WebAPI. We need our FormID, as well as our API Key. We make a post request with a handful of parameters to api.typeform. I won’t cover the details here since it is well documented in on their website.
“UID = Form UID
API_KEY = API for your Typeform.com account
https://api.typeform.com/v0/form/UID?key=API_KEY”
The result of our request is relatively easy to decipher. We are given an array of results. Each result has this format. Note that in the below, I removed the long metadata field object:
It is up to us how we use this data. For now I pull out some fields and populate my Parse table. The other fields I store in it’s text/JSON format inside the Parse table. Rather than explicitly converting the result to text (using JSON.stringify(), JSON.parse(), which is available to cloud code), we just store it as is, as the JSON will be saved in our tables.
Only query for new results
This all works, the problem is that each time we make a request to the API, it returns all the results to us. We can paginate through the results, however we are still pulling across more data than we need. And the pagination skip+limit values would only allow us to access the first 1050 results.
Instead we only query for the results which are newer than the newest result stored in our Parse table. Note that in this code snippet, we would only be retrieving at most 50 new objects at a time (with the default API parameters). This isn’t a problem though, as each time we call the job, it will retrieve the un-processed results, so we won’t lose any results, as long as we call this job frequently enough.
Right now in our Parse application, this job is scheduled to run once every 30 minutes. However during testing it runs once per minute, so we can see and process new survey results immediately.
Zapier
With Zapier we don’t need to worry about querying the Typeform.com API directly. We setup a Typeform -> Webhook Zap, and then implement a webhook listener in our Parse cloud instance.
Inside Parse.com, I’m assuming you are using express.js to manage your routes. Zapier.com integration write up soon.
Using The Results
There are plenty of ways you may use our results. In the system I’m currently building, we build some graphical tables which aggregate the survey results, and we also send a push notification to an iPhone app. We trigger some actions on the in the “afterSave” method of our “Survey” object.
I’m sure soon enough Typeform.com will come out with their own webhook, but right now it is really simple to get the data into Parse using either of the two methods. The Zapier method is nice as we don’t need to worry about checking for previous results etc. I use Zapier all the time for prototyping, the only downside is you will have to pay a subscription to use their service.
Next up I’ll write about how you might use the question fields and answer fields so that you can nicely display your data.