Notion Forms

Published on: 2023-12-31

, by Daniel Markow

Notion is wonderful. Once I started using it I kept coming back to it finally ignoring my previous choice Apple Notes. Notion in fact is more than a note-taking app. It is a way of collecting information and building workflows on it. Databases are central for that since they allow you to collect the data to build your workflows on in tabular form. One downside of Notion Databases is, that if you want to collect input from others you have to share the entire database with the world. This really isn’t ideal for many use cases.

Another aspect that I found not optimal is that the form for entering data into databases is a little finicky and it takes too many clicks to get to it.

This is where my little holiday project Notion Forms comes in. A few months ago Notion introduced their API which allows you to generate Pages (these are the rows in Databases) programmatically opening up new ways of interaction. Notion Forms allows you to store an API key (in Notion called “Integration Token”) as well as the Page ID (referencing the database). The credentials are encrypted before they are stored in the database and never send to the client in plain-text. Notion Forms then generates a form out of the structure of the database which you then can make public and share with others (for example to gather customer feedback).

Setup

To generate an API key open Notion on your desktop or browser, then go to “Settings & members”, open the tab “Connections” and then click on “Develop or manage integration” below. A browser window will open. Click on the large plus (”Create New Integration”).

Integrations

Give your Integration a name and click “Submit”. Copy the internal integration secret and paste it into this form to create a new API key in Notion Forms. Next you’ll have to grant your API Key access to a database. Navigate to the database you want the form for in Notion. Click on the three dots in the upper right corner, click on “add connections” and add your API key (aka integration token). The final step is to retrieve the page ID. In order to do that you will have to open notion in the browser, navigate to the database you want the form for and then copy the ID from the url.

PageId

Paste this ID into the create new API key form in Notion Forms as well, hit save and thats it.

Stack

For this application I used my old favourite the t3-stack initialised with create-t3-app. After fiddling around with SvelteKit and Angular with Springboot for the past months this stack is like a fresh breeze. It is so simple, so productive. You can review my code here: https://github.com/danielmarkow/notion-forms-t3

Caveats

Not all of the database properties are yet supported.

Supported are

This is obviously early stage software that is running on Vercel and Planetscale free-tiers but feel free to test it (don’t forget to provide feedback).

Please be aware that the Notion API rate limiting applies.

Also know that although the credentials are stored encrypted into the database I as the owner of the encryption key could theoretically de-crypt them. If you are uncomfortable with that consider hosting the app yourself.