🗓 作成日
January 17, 2021
🔖 タグ
notion+super.so
notion + super.so で作成したサイトに、問い合わせフォームを埋め込む方法を解説します。
今回は、Chilipepper を活用したフォームの作成をしてみます。
Chilipepperについて
- コンタクトフォームをnotionに埋め込めるサービスです。
- サービスの開発元や、プライス設計が存在してないのが不安ですが、 super.so のコミュニティ内でも紹介され、界隈では利用されている気配を感じているので、その流れに乗ります。
‣
Chilipepperの特徴
- Chilipepper上で入力された情報が、特定のnotionのDBに動的にストックされるのが、このサービスの特徴的な仕様です。
実際のフォーム設置まで説明します。
フォーム設置までの解説
まずは、公式サイトにある「create a form」より先に進みます。
次に必要なフォームの設計を行います
今回は、「名前」「メールアドレス」「メッセージ」を入力できるフォームにしてみました
すると、次は、notionとの接続設計に移ります。
「Connect to Notion」に進むと、以下の画面が出るので、NotionのTokenの入力と、フォームに入力したデータを格納するDBの指定を行っていきます。
Notionのtoken情報は、公式サイトにも詳しい確認方法が乗っていますが、自身のnotionを開き、Chromeのデベロッパーツールから、token情報を見つける方法になります。
そして、データの格納先のDBの設計も公式サイトに詳しい手順があるのでそれを参考に設計しました。
tokenの接続と、DB情報の入力を終えると、「Map Fields」から入力フォームの情報とDBのカラム名の名寄せを行います。
名寄せが完了し、このような画面になっていたら設定は完了です。
webhookの設定や、Email転送設定も必要に応じて行えました。「Next」で次に進みます。
「Free」プランを選択して「Create Form」します。
次の画面で、URLが発行されるのでそれをコピー。
最後に、フォームを設置したいページ上で、URLをEmbedして完了です。
実際の挙動はこのようになります。快適！！
今回作成したコンタクトフォームはこちら
