Created time
Jan 15, 2024 3:08 AM
Last edited time
Feb 8, 2024 12:27 PM
Project
Created by
桜泥棒PROJECTサイト内に設置したお問い合わせ フォームの構築時に、なかなか日本語の情報がなくて苦戦した内容と対策を書き残しておきます。
このコンタクトフォームは、Noway Formという機能をNotion内で動かす形で構築されています。
Noway Formとは?
Noway Formは、Notion内で直接フォームを作成し、管理するためのサードパーティ製のツールです。これにより、Notionのページに直接フォームを埋め込んで、ユーザーからのフィードバックや情報を簡単に収集することができます。Noway Formは、使いやすさとシームレスな統合を重視しており、Notionでのプロジェクト管理やデータ収集に非常に役立つ機能を提供します。
Noway Formの構築方法
Noway Formの基本的な構築方法は以下のチコログさんのサイトが詳しいです。
HTMLなどのコードを埋め込む場合のSuper特有の設定
Wraptasでサイトを構築している場合はチコログさんのページだけで設定は完結しますが、Superの場合はHTML等の埋め込みをする場合の設定が以下のように変わります。(この設定をしないと、コードを埋め込んでも実際にコードが展開されません)
- カスタム埋め込みスクリプトのロード: まず、SuperのPageの中からコードを埋め込みたいページを選択し、「Body section of Code」に
<script src="https://sites.super.so/snippets/embed.js"></script>
を追加します。 - HTMLまたは埋め込みコードのNotionでの設定: Notionでコードの埋め込みをしたい場所に
/code
を入力してコードブロックを作成し、最初の行にsuper-embed:
と入力した後、埋め込みたいHTMLコードを追加します。 - ページの更新: Superでページを更新すると、スーパー埋め込みスクリプトがコードブロックを検出し、HTMLをページにロードします。
![image](https://prod-files-secure.s3.us-west-2.amazonaws.com/006e88a0-5b53-460b-b1a2-a7b47a8b283b/d7df21e2-c7cb-4f6f-8172-70f06cbec276/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20241019%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20241019T095942Z&X-Amz-Expires=86400&X-Amz-Signature=47c8a5e08712e1891a16c1c56e0fa5a13a8bd612c69acd836534f35195491179&X-Amz-SignedHeaders=host&x-id=GetObject)
スクリプトが信頼性を持って実行されない場合は、Head section of Codeにスクリプトをロードすることが推奨されています。
詳細については、Super Help Centerの該当ページをご参照ください。
NotionをSuperでWeb公開している場合で、HTMLやその他のコードを埋め込む場合に参考にしてください。