Make Typeform fields dynamic using Serverless
When I am attending hackathon as a speaker or a mentor I love helping teams with their technical issues or their pitch. But there is always a moment when all the teams are busy coding. They don’t need much help until they encounter the next roadblock. So usually I like to take advantage of this short timeframe to hack something together. It’s my way to join hackers for a short period of time, and work on some small projects.
This is exactly what I did when I attended Spectra two weekends ago. I managed to find an hour for myself and put together this quick hack.
💡🤯 Finding the idea
Right now, at Typeform we are trying to build things that will inspire others to build on top of our platform, like using our Webhooks to connect with another Saas (check Shubha’s piece about Twilio), or build something with our Responses API to do awesome dashboards.
But I was feeling that we weren’t giving enough love to our Create API. It has a lot of power as it lets you manipulate forms and fields directly. This hack is my opportunity to put our Create API in the light! 😍
I got inspired by some of our users that turn Typeform into a booking system. Imagine a local hairdresser, an escape room owner, or a Maths teacher that use Typeform as their frontend for people to book session at their shop.
Unfortunately, our date block does not let you put constrain on dates filled by user so, instead, I thought we could use a simple dropdown menu and display future dates.
Just using a typeform on its own, you would need to manually change the values in dropdown every single day and get rid of past dates. This is a hassle and should be automated.
🚒☁️ Serverless to the rescue
This is definitively a job for a serverless function! It’s the perfect example of something fairly simple that will run on schedule and execute quickly.
To ease deployment and distribution, I used Serverless Framework on top of AWS Lambda. We will call the function every day at 00:01am, once the current day is over, and using Luxon library we will calculate the next dates and push them to Typeform.
And voilà ✨
We always have a dropdown menu with relevant dates in it.
The user does not have to worry about maintaining it, the serverless function runs automatically. And thanks to AWS free tier, it’s free! 💥
📤☁️Deploy it
If you want to deploy this on your own, you can check the Github Repo and read the instructions.
🚀Extend it
This is a fairly simple example, but it shows you how you can connect your form to an external script to update field values.
Imagine now that instead of separating dates merely by day, we offer also a way to break it down by hour. And if we were connecting it to your calendar system using APIs like TimeKit or Cronofy, to only show available times. Powerful, right?
You can also connect it to an external API, and sync up regularly with the data returned form it.
Ain’t this extra exciting?
Now it’s your turn!
What other ideas you have in mind? How would you extend Typeform fields to make them more connected? Don’t be shy, share with us!
Thank you for reading! We are glad to share our experience and help everybody out there to code better.
Do you use Typeform’s Developer Platform? Would you like it to be featured on our Developer Portal? Please share with us!
And yes… we are hiring!
