NotionForms でかっこいいフォームを作ってみた

NotionForms でかっこいいフォームを作ってみた

フォーム回答を Notion に連携させるなら、さくっと NotionForms でできます!
Clock Icon2022.02.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Guten Tag! 伊藤です。

今回、NotionFormsを使ってフォームを作成し、Notionに連携させてみました。

フォームといえば、スプレッドシートに連携できる Google Forms、多機能な Typeform などがありますが、この NotionForms はなんといっても Notion のデータベースに連携させる上で、とてもシンプルで簡単にフォームを作ることができます。

デモを試してみよう

トップページの [Demo] からサンプルのフォームが見られます。

お気に入りのポケモンを聞いてくるところがセンス良い!!(私は Charmander (ヒトカゲ) 推しです)

スクロールダウンすると、Notion のデータベース上でどのように回答が入力されているか見ることができます。

Notion のデータベースでは作成日や最終更新日のプロパティを追加できるのもいいですね。

早速作ってみる

NotionForms に登録

NotionFormsはNotionの外部のサービスなので、既にNotionユーザの人も別途アカウント登録をする必要があります。[Create Form] からまずは登録を行います。

https://notionforms.io/

次に、Notionと連携させます。

ブラウザでNotionにログインしていない場合は、ログインを。既に複数のNotionワークスペースでログインしている場合には、右上で正しいワークスペースを選択して次に進みます。

NotionFormsのアクセスを許可するNotionページを選択します。今回は Company Home 配下にあるページでフォームを導入したかったので、このように設定します。

※ 注意:探した限り、現時点ではこの許可範囲を設定から変更することができず、連携し直しが必要になります。

フォームを作成

フォームを作成するには、まずは連携するデータベースを Notion 上で作成する必要があります。回答した時の入力例も3つ入れてみてます。

ここでは次のようなデータベーステーブルを作成しました。

カラム名 プロパティ
Occasion Select (単一選択式)
Amount (EUR) Formula (関数:if(prop("Occasion") == "Monthly benefit", 50, 60) でOccasionの値によって自動入力される)
Vendor Select (単一選択式)
Email address Email
Name Person (ワークスペースのユーザの複数選択)
Note Text
Created Created Time (フォーム回答日が自動入力される)

NotionFormsに戻り、上のデータベースに紐づくフォームを作成しましょう。データベースの選択肢には、先で許可した範囲の Notion ページ内の全データベースが候補として出てきます。

先ほど作成したデータベースを選択したら、実際にフォームを編集します。選択したデータベースを元に既にフォームがほぼ出来上がっています。フィールドを非表示や必須としたり、フィールド名を変えたり、順序を変えたりと調整して、フォームのタイトルやトップの説明文も編集しましょう。

もし Notion のデータベース側でカラムを変更したら、Form Structure の更新ボタンを押して変更を反映させます。

※ Notionで値が自動入力されるFormulaやCreated Timeのようなプロパティタイプはフィールドとして利用できません。

フォームを埋め込み

フォームを編集して保存したら、フォームのリンクが作成されるので、そのリンクを使えば独立したページで表示させることができますし、Notion ページ内に埋め込むこともできます。

今回はデモと同じように Notion ページに埋め込んでみます。

連携しているデータベースの親ページの上部に、/Embed してフォームのリンクを入力すると...

同じページにフォームと回答一覧を埋め込むことができました!

注意点

  • 前述の通り、NotionFormsのアクセス許可範囲は現時点で設定から調整することができないようでした。変更したい場合、Notion側の設定の Integrations から一度 NotionForms を Disconnect することで、NotionForms側で再度アクセス許可設定が現れて変更することができました。
  • フリープランでは、一つのNotionワークスペースに対して一つのNotionFormsユーザしか紐づけることができません。既に同僚がワークスペース内でNotionFormsを利用している場合には、プランのアップグレードが必要となります。

おわり

以上、とても簡単に、かっこいいフォームを作ることができました!

有料プランの場合には、フィールドのデフォルト値やヘルプなどの便利な設定ができたり、フォームのデザインをカスタマイズしたり、通知を設定することもできます。

Typeform でも美しいフォームを作成することができるのですが、設定が柔軟な一方ですぐ導入するには複雑だと感じたのと、選択式の場合に選択肢をTypeform側で設定しなければならないなど、やはりNotionとのシンクロ性はNotionFormsの方が優れているように感じました。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.