Hacking Test Data Into Your Typeform Programmatically

If you use a Typeform in combination with some automation tools like Zapier, you may find yourself in the situation where you’d like to programmatically INSERT data into your typeform and have something like a Zap script find and use that data. Sometimes it’s data that the user may have entered a day or more ago, and you’re goal is to test the script, not to manually test that Typeform is working and fat-finger or jolly-mouse the data in. With a few hacks, I’ve discovered a simple way to do this.

Use Fallback Mode
So, probably one of the first things you’ve noticed if you’ve tried to do any hacking around in the Typeform world is that the form is loaded dynamically with script and a variety of Typeform mechanisms. You’d like to post data to your form, but what “form” means in the Typeform world, is nothing close to a standard HTML form that you might be able to programmatically “submit”. There’s a trick though, or better put, a switch. FALLBACK. If you add the extension /fallback as the last part of your form URL (before any parameters like with hidden fields) you’ll notice a rather odd version of your form display. And lo and behold, it’s a real <form>.

Once you’ve taken this first step, some doors open. First, you’ll be able to submit this form the more natural HTML way. That provides you with a simple way to view (in browser developer tools and with tools like postman) the raw network traffic and the POST that would naturally occur with said form. Submit your form and watch the network POST that occurs. There you will find the form data you need to submit with your POST request. But one item will stand out as curiously evasive: the parameter called “form-token” which is the token that Typeform uses to uniquely identify your form “flow” from start to finish and record your responses as a unique response.

Get Your Token TOO
So, after digging around a bit, I discovered a JS variable that exists within a head script called “settings”. In this variable is the path from which you can obtain a new token. Aha! Combine it with your base customer url and with the unique typeform identifier, and before you know it you can create unique tokens with a simple GET call any time you need one.

Put It all Together
So armed with this information, you can programmatically create a POST call with the proper form-data to pass to Typeform. Just be sure to use the submit URL that in also included in that “settings” variable I mentioned.

3 Likes

This is some great detective work!

I have a situation where I would like to ask a bunch of questions in an embedded typeform and record the answers in a google sheet – this bit is easy to do with typeform’s google sheets integration.

AFTER the typeform is submitted, I’d like to be able to ask for more data via a Webflow form and ADD this to the typeform data already recorded in the google sheet (making sure that the Webflow form data is added to the correct typeform data – this would all happen in the same user session).

We need an identifier to match the typeform data with the Webflow form – Typeform adds a unique ‘token’ value to the google sheet, and I can see the token in the POST data mentioned in this tip but I don’t know how I can retrieve this and add it to the Webflow form data so I could THEN use it as an identifier for zapier to be able to combine the original Typeform data with the Webflow form data.

If this make any sense… can anybody help with the JS/JQuery needed to achieve this?