How I created beautiful web forms: Integrating Paperform and Trello with Zapier

What can this post teach me?

This post will teach you how to connect Paperform to Zapier and then automate card creations on Trello.

Backstory

So a while back I discovered this awesome Online Form company from Australia — Paperform.

I was curious on understanding how Zapier works together with Paperform and as the best way of learning is to give yourself a project I decided to make one.

Although I am retired from the software business I still take the time to hang out with cool freelance tech geniuses that can feed the inner geek in me. A few times a week these freelancers meet and work out of various coffeeshops. The locations are fixed but the weekdays can vary.

I thought it would be a good idea to make a an easy app that could help our little band of brothers to quickly communicate where they would be on a weekly basis but not have to login to a calendar or any other service.

The app should: ① allow any freelancer, in our group to tell the rest of the team where he/she will be working on any particular weekday ② allow anyone in the group to see where everybody will be on a weekly basis ③ not require users to login anywhere ④ make input super quick and intuitive ⑤ make results intuitive and easy to read

Components of the Solution

• a Trello board to see the weekly schedule of everybody
• a zap to integrate Paperform with Trello
• a form hosted by Paperform to get the input

Example of the input form I made using the Paperform admin panel

Managing Output & Input

The Trello board to capture the output.

Basically the dashboard that shows where everybody will be Monday to Friday

The front-end of the form used to grab the input from users, (allowing freelancers to pick where they’ll go)

The Finished App

Integrate all components into one HTML page so that users only have to go to one place to see and do everything.

Before we begin

• I really recommend Paperform. It is a small business from Australia run by some GREAT people that listen to their customers and make changes quite fast. Their platform also has more logic and functionality than some of the other form builders. See this article I wrote a while back on how to make a Ghost contact form using Paperform.
• You will also work with Zapier and Trello
• Both Zapier and Trello have free plans that you can use until your workflow requires more functionality and thus have to upgrade to a paid plan.

This story is brought to you by Hacker Noon’s weekly sponsor, Paperform. Create beautiful forms. For Hacker Noon readers, 10% off all plans forever.

The process when working with Zapier is:

① allow access to the service you want Zapier to manipulate ② use Zapier to browse inside the service you want e.g. Paperform or Trello and grab the data you want to manipulate ③ tell Zapier what to do with the data you have grabbed

Don’t worry, all these platforms we will be working with are pretty intuitive.

Ok, let’s do it! — Here are the steps:

(1) Create accounts at Paperform, at Zapier and at Trello

(2) You want to start by making a Zap on Zapier

A Zap is Zapier language for an integration

(3a) Next you have to decide what app you want to use to trigger an action. Let’s choose Paperform

A Trigger app is Zapier language for the app that will trigger a later action. In our case it is the submission of a form at Paperform.

(3b) You have to connect Zapier to your Paperform account. Once you click on ‘Connect a New Account’ you should see a popup box that asks for your paperform login.

(3c) If successful, you should see below:

(4) Now it is time to pick the form we want to access in Paperform

(5) Ok, we should be done on the Paperform side. Let’s connect Trello to Zapier. This is done in the same way as in step 3b above, when we connected Paperform to Zapier

(6) Add the action to use Trello as the next step in Zapier

(7) We need to choose a Trello action that we want Zapier to execute for us. Scroll down in the list and pick ‘Find list’ and then continue.

An action is Zapier language for something to be executed in an app. In our case it is finding the right Trello board/list, as well as, creating cards

(8) Pick the board and the list we want to create cards in.

This is when things get interesting because we want to pick a list based on the input from the Paperform.

In this case if a user has entered ‘Monday’ in the form, then we want Zapier to go into Trello and pick the ‘Monday’ list to create cards in. This is why we choose ‘What Day Of The Week Will You Go? Answer’ as the ‘List Name’.

(9) Next we add another Trello action to our Zapier flow. This time pick ‘Create Card’.

(10) Basically we want Zapier to write a new card based on the information from the Paperform that users have filled in. The Name of the card and the Description of the Trello card all comes from fields users have already filled in when they submitted the Paperform.

The Gotcha’s

PICK THE RIGHT FIELDS — When you are in Zapier, picking fields from the Paperform, make sure to always choose ‘Answer ‘ fields because they are the ones that hold the data you want.

E.g. The two fields below: ‘Pick Your Name — Answer’ and ‘What Day Of The Week Will You Go? Answer.

will in this case create the card with the name ‘Andrew @ Taimo Cafe’ because those are the answers provided by the submitted form.

PRE-FILL KEYS — Papeform has a wonderful new function called pre-fill key and it uses a small unique code in the URL. This will sometimes screw up displaying the correct field name in Zapier

E.g. The field below: ‘What Day Of The Week Will You Go? Answer’

will sometimes show up in Zapier as Ei2sb and that is because if we look at the pre-fill key unique code for that field answer in the Paperform admin, the code is: Ei2sb

Don’t worry though, Zapier will always process the field correctly and it knows this particular field is ‘What Day Of The Week Will You Go? Answer’

ZAPIER FIELD ID’s — In Step 10 above, if you look at the List field, it says ‘ID’ and not the Name of the list. Why is that?

Let’s look at an extract of that screenshot.

It is because Zapier sometimes can’t process the name of a field and absolutely must have the unique ID of the field. This is explained more here: Zapier Field ID’s

You just need to be aware of this and sometimes give Zapier the ID of a field instead of the name of a field. Often the reason a Zap doesn’t work is exactly because of this.

Conclusion & Additional Information

I hope this post shows what is possible with some Zapier and Paperfom magic If you want to see the complete proof-of-concept app, go here to take a look.

Below I have added some additional resources. Happy Integrating Everybody!

Reference Links: Connecting Paperform to Zapier TutorialOther Zapier Apps that connect to PaperformWhat’s pre-filling on Paperform?Zapier Field ID’s

This is story is brought to you by Hacker Noon’s weekly sponsor, Paperform. Create beautiful forms. For Hacker Noon readers, 10% all plans forever. Learn more about becoming Hacker Noon’s Weekly Sponsor (spoiler alert — this form is powered by Paperform).