前回の記事 Cloudflare Workers 設定編はこちら

この記事は3本立てとなっています。
前回の記事をまだ読んでない方は↓を先に読んでから今回の記事を読むことをおすすめします。

お問い合わせフォームを作成

まずはお問い合せフォームを作っていくのですが、分かりやすいようにシンプルに作っていきます。

<form method="POST">
  <label for="name">お名前</label>
  <input type="text" id="name" name="name" required />

  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email" required />

  <label for="content">お問い合わせ内容</label>
  <textarea id="content" name="content" rows="4" required></textarea>

  <button type="submit">送信</button>
</form>

クライアントのコード

今回はAstroで構築したのでバニラjsで書いています。

const form = document.querySelector("form");
const name = document.querySelector("#name");
const email = document.querySelector("#email");
const content = document.querySelector("#content");

form?.addEventListener("submit", async (e) => {
  e.preventDefault();

  const data = {
    name: name?.value,
    email: email?.value,
    content: content?.value,
  };

  try {
    const response = await fetch("Workersのデプロイ先URL", {
      method: "POST",
      body: JSON.stringify(data),
    });
    if (response.ok) {
      alert("送信しました");
    } else {
      alert("送信に失敗しました");
    }
  } catch (error) {
    console.log(error);
  }
});

分かりやすくするために最低限のコードを書いています。
なのでバリデーションなどは含んでいません。

Cloudflare Workers を使って Notion へデータを登録する処理を作成

Workers のコードを書いていきます。

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    let jsonData: any;
    try {
      jsonData = await request.json();
    } catch (error) {
      return new Response(JSON.stringify({ error: "Invalid form data." }), {
        status: 400,
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "*",
        },
      });
    }

    const name = jsonData.name;
    const email = jsonData.email;
    const content = jsonData.content;

    const notionSendData = {
      parent: { database_id: env.NOTION_DATABASE_ID },
      properties: {
        name: { title: [{ text: { content: name } }] },
        email: { rich_text: [{ text: { content: email } }] },
        content: { rich_text: [{ text: { content: content } }] },
      },
    };

    await fetch(env.NOTION_API_URL, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${env.NOTION_API_KEY}`,
        "Content-Type": "application/json",
        "Notion-Version": "2022-06-28",
      },
      body: JSON.stringify(notionSendData),
    });

    return new Response(
      JSON.stringify({
        message: "Request processed successfully.",
        data: { name, email, content },
      }),
      {
        status: 200,
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "*",
        },
      }
    );
  },
} satisfies ExportedHandler<Env>;

受け取ったデータをNotionのデータベースに登録するだけのシンプルなコードです。
実際に運用する時はここにバリデーションやエラー処理を入れます。

Workerのデプロイ

ローカルで作成したWorkerは↓のコマンドでデプロイすることができます。

npx wrangler deploy

Workerの設定から本番用のURLが確認できます。
お問い合わせフォームのリクエスト先をそのURLに変更して実際に本番環境で動くか試します。

こんな感じでNotionのデータベースにしっかりとデータが入ればOKです。

最後に

今回はNotionを使ったお問い合わせフォームを作成しました。
Notionは非常に便利でユーザー視点、ビジネス視点、開発者視点から見てもすごく良いサービスです。

他にもNotionを使用したメディア作成や小さなWebアプリのデータストアなんかにも使えるのではないかと思っています。

Bloengでは今後もそういったNotionを活用した記事を書いていきますのでお役に立てたら嬉しいです。