Notion+SuperでHTMLコードの埋め込みをする方法（Noway Formによるコンタクトフォーム設置時に必要）

Created time

Jan 15, 2024 3:08 AM

Last edited time

Dec 26, 2025 1:49 PM

Tags

Notionsuper.so

Project

桜泥棒PROJECT

Created by

U

Untitled

桜泥棒PROJECTサイト内に設置したお問い合わせ フォームの構築時に、なかなか日本語の情報がなくて苦戦した内容と対策を書き残しておきます。

このコンタクトフォームは、Noway Formという機能をNotion内で動かす形で構築されています。

Noway Formとは？

Noway Formは、Notion内で直接フォームを作成し、管理するためのサードパーティ製のツールです。これにより、Notionのページに直接フォームを埋め込んで、ユーザーからのフィードバックや情報を簡単に収集することができます。Noway Formは、使いやすさとシームレスな統合を重視しており、Notionでのプロジェクト管理やデータ収集に非常に役立つ機能を提供します。

Noway Formの構築方法

Noway Formの基本的な構築方法は以下のチコログさんのサイトが詳しいです。

Notionブログにお問い合わせフォームやアンケートを導入する｜Noway Formを活用した完全ガイド

「Noway Form」を使って、Notionブログにお問い合わせフォームやアンケートを導入する方法を紹介。Notionユーザーならではの使い勝手の良さがあります。無料プランもあるので、初心者の方にもオススメです。

chicolog.net

HTMLなどのコードを埋め込む場合のSuper特有の設定

Wraptasでサイトを構築している場合はチコログさんのページだけで設定は完結しますが、Superの場合はHTML等の埋め込みをする場合の設定が以下のように変わります。（この設定をしないと、コードを埋め込んでも実際にコードが展開されません）

1. カスタム埋め込みスクリプトのロード： まず、SuperのPageの中からコードを埋め込みたいページを選択し、「Body section of Code」に<script src="https://sites.super.so/snippets/embed.js"></script>を追加します。

2. HTMLまたは埋め込みコードのNotionでの設定： Notionでコードの埋め込みをしたい場所に/codeを入力してコードブロックを作成し、最初の行にsuper-embed:と入力した後、埋め込みたいHTMLコードを追加します。
3. ページの更新： Superでページを更新すると、スーパー埋め込みスクリプトがコードブロックを検出し、HTMLをページにロードします。

スクリプトが信頼性を持って実行されない場合は、Head section of Codeにスクリプトをロードすることが推奨されています。

詳細については、Super Help Centerの該当ページをご参照ください。

NotionをSuperでWeb公開している場合で、HTMLやその他のコードを埋め込む場合に参考にしてください。