/ New Features

How to Build an App with Typeform, Zapier, Fly, and Amazon S3

At Fly, we're on a mission to add a variety of useful and powerful backends, services and applications to our ever-expanding library. We're pleased to announce that Typeform is now part of that library. With Fly and Typeform, you can host beautiful surveys, interview forms, applications -- whatever you can dream up -- from your own custom hostnames or anywhere on your domain.

Ye' Olden Days

Form creation is a fundamental part of HTML. Forms are the first basic step in interactivity. Put information in these boxes then send it to the website. At first blush, creating a form doesn't look so challenging...

<form>
  Favourite Food:<br>
  <input type="text" name="firstname"><br>
  Favourite Movie:<br>
  <input type="text" name="lastname">
</form>

Hey! We have a form!... Well, sort of. The next step is where things get dicey: CSS. Now, make your form pretty and responsive. JavaScript for some slickness and a more enjoyable UI? Integrate an API, would you please? Gah! All of a sudden the form is no longer simple. It's... really complex!

Fancily Fly Form Factor

If you want a beautiful and engaging form with all the extensibility of a fantastic API, look no further than Typeform. Typeform is based out of Barcelona, Spain. They're one of a handful of bright-spots within web technology whose goal is to make software feel more human.

Their niche is a nobel one: the responsible collection of voluntarily submitted information. While some empires choose to take information from people without their consent or knowledge, Typeform celebrates the act of intentional interview through beautiful interfaces and enjoyable experiences. They're as fun to create as they are to fill-out!

beautiful-design

You might already be using Typeform to collect information. Let's explore a fun project that demonstrates the deep utility of Fly and Typeform, combined. If you're new to Typeform, you'll get to see it motion.

An Example ...isdeadtome

For a bit of fun, let's walk through a project that Kurt whipped up. Have a bone to pick? Dost thou have a crusade to wage? What better way to express your malcontent than in poem form. Let's visit: isdeadtome.com.

You're greeted with a nice clean form, courtesy of Typeform. Once a simple form, now a vessel for poetic quibbles.

The sugary and disappointing reality of yogurt has become apparent. What was supposed to be a crusader for healthy gut flora has become no more than sugar-y goo; yogurt fuels the very evils it was designed to protect against! Through Haiku, overly dramatic vengeance!

poetry

After entering the poem, its title and an email address for poem control, you submit and receive your poem on its own subdomain.

Neat! There's a lot of fanciness going on. The project uses four services:

  • Typeform, for beautiful forms.
  • Zapier, to respond to form data and POSTs.
  • Amazon S3, to host simple text-y static pages.
  • Fly, to weave everything onto one hostname to rule them all and for one-call Let's Encrypt HTTPS.

The first step is to create a form within Typeform. You'll receive a URL that's formatted like this in return: https://example.typeform.com/to/Wqhm7Q. With the Typeform URI, we head to Fly.

The first step when setting up Fly is to attach a hostname. In this case we've attached isdeadtome.com. After that, one can plug a variety of applications, backends, and services upon that hostname -- Typeform is now one of these services.

fly-ui

We plunk in our URI. By default, it'll match on the root domain: isdeadtome.com, but you can choose any subfolder. For example, if you have a marketing site on GitHub Pages, an application on Heroku, and a survey within Typeform, you could mount GitHub Pages to /, Heroku to /app/ and Typeform to /survey/.

Deeper: isdeadtome.com uses the Fly API to generate signed, automatically renewing Let's Encrypt HTTPS certificates. When a user submits the form, it's received by Zapier, which in turn POSTs to the Fly API. The API creates a Let's Encrypt HTTPS certificate for the subdomain based on the title. In conjunction, Zapier creates a static page within an Amazon S3 bucket, then uses the Fly API again to mount the new S3 page. The poem is sent to the static page.

The end result of all this weaving, churning and bubbling is:

https://yogurt.isdeadtome.com/.

Summary

We went through a fun example of how Fly and Typeform can be used together. The most simple case, however, will likely be the most appealing: Plunk Typeform anywhere on your hostname. Doing so will allow you to weave beautiful forms into your existing brand and applications.

Typeform is an excellent company; when you can offer features that are valuable to creators happen to be made by a radical group of people, that's all the better. We're excited to see what Fly creators will cook up!

Fly is a platform that helps you build and launch dynamic applications to users around the world. It's a bit like a global load balancer, a smart reverse proxy, a CDN, a library of powerful Middleware; woven together, it's a fast, powerful, and intuitive network that creators like you control. It's free to sign-up, as are your first 2,000,000 requests and 100GB of data transfer every month.

Kellen Evan Person

https://goodroot.ca

Kellen Evan Person

A polite, forest-dwelling Canadian who enjoys coding and writing. He's spent near two decades building web applications and strives to keep development fun and light-hearted.

North Vancouver, Canada